/* ------------------------------------------------------------------
   tokens.css — every colour, size and timing used by the site.
   Change a value here and it changes everywhere. Nothing else in the
   CSS should contain a raw colour or a magic number.
   ------------------------------------------------------------------ */

/* Cascade order. Later layers win, so specificity fights never happen. */
@layer reset, tokens, base, layout, components, pages;

/* Fonts live in assets/fonts (all draw Mongolian Ө ө Ү ү; the cyrillic-ext files carry those letters).
   Onest for the text (the pages and the invitation posters); Lora, a calm serif, for the headings. */
@layer tokens {
  @font-face { font-family: "Onest"; font-style: normal; font-weight: 400 600; font-display: swap;
    src: url("../assets/fonts/onest-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
  @font-face { font-family: "Onest"; font-style: normal; font-weight: 400 600; font-display: swap;
    src: url("../assets/fonts/onest-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
  @font-face { font-family: "Onest"; font-style: normal; font-weight: 400 600; font-display: swap;
    src: url("../assets/fonts/onest-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  @font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url("../assets/fonts/lora-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
  @font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url("../assets/fonts/lora-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
  @font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url("../assets/fonts/lora-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
}

@layer tokens {
  :root {
    color-scheme: light dark;

    /* Palette — named after what they are, not after a UI role.
       These never change with the theme; the roles below do.
       The house look is the open steppe sky: a pale, high sky by day, a deep clear sky by night,
       the blue of the sky (хөх тэнгэр) for the one accent, warm sunlight for small signals. */
    --air:       #F6F8F7;   /* the page: air near the horizon */
    --air-high:  #E4EEF5;   /* the page: sky higher up (top of the screen) */
    --haze:      #EBF0F2;   /* image wells, table stripes */
    --paper:     #FFFFFF;   /* raised surfaces */
    --ink:       #18232D;   /* text */
    --ink-soft:  #47535E;   /* 7:1 on the day sky */
    --sky:       #1F5E9A;   /* the blue of the sky: the one accent */
    --sky-deep:  #164672;
    --sky-pale:  #A9CBEA;   /* the accent as text/lines on dark ground */
    --saffron:   #C9922E;   /* sunlight: signals only (featured, today, new) */
    --moss:      #4E7A3A;   /* summer / success */
    --burgundy:  #9A2A33;   /* errors, full, cancelled */
    --rose:      #E9A3AC;   /* errors on dark ground */
    --night:      #142235;  /* dark page: the sky after sunset, lighter at the horizon */
    --night-high: #08111D;  /* the deep sky overhead */
    --night-well: #1B2A3D;
    --night-up:   #18263A;  /* raised surfaces at night */
    --hill-day:   #D2DECE;  /* the footer's hills */
    --hill-night: #1A2838;
    --smoke:      #E6EDF2;  /* text on dark ground */
    --smoke-soft: #AEBBC6;

    /* Roles — components use these, not the palette directly */
    --bg: var(--air);
    --bg-high: var(--air-high);
    --surface: var(--paper);
    --well: var(--haze);
    --text: var(--ink);
    --text-soft: var(--ink-soft);
    --accent: var(--sky);               /* links, small accent marks */
    --accent-strong: var(--sky-deep);
    --accent-fill: var(--sky);          /* primary button background */
    --accent-fill-strong: var(--sky-deep);
    --on-accent: var(--paper);          /* text on --accent-fill */
    --signal: var(--saffron);
    --on-signal: var(--ink);
    --ok: var(--moss);
    --danger: var(--burgundy);
    --focus: var(--sky);                /* keyboard ring; 3:1+ against --bg */

    /* Over photographs: the same in both themes */
    --on-media: var(--paper);
    --media-chip: var(--ink);
    --scrim-top: color-mix(in oklab, var(--ink) 42%, transparent);
    --scrim-bottom: color-mix(in oklab, var(--ink) 72%, transparent);
    --backdrop: color-mix(in oklab, var(--ink) 50%, transparent);

    --line:        color-mix(in oklab, var(--text) 16%, transparent);
    --line-strong: color-mix(in oklab, var(--text) 42%, transparent);
    --skeleton:    color-mix(in oklab, var(--text) 7%, transparent);

    /* The sky behind every page: high and blue at the top, light at the horizon */
    --stars: none;
    --atmosphere: var(--stars), linear-gradient(to bottom, var(--bg-high), var(--bg) 70%);
    --hill: var(--hill-day);
    /* The home opening (.open): a daylight photograph; at night its sky is drawn instead and the land dims */
    --open-sky-photo: 1;
    --open-land: none;
    --open-ink: var(--ink);
    --open-ink-soft: var(--ink-soft);
    --open-glass: color-mix(in oklab, var(--paper) 82%, transparent);
    /* Maps (listing-map.js): the OpenStreetMap tiles as they are by day, turned to night with a filter */
    --map-tiles: saturate(0.85);
    --map-bg: var(--haze);
    --star: var(--saffron);    /* filled rating stars: sunlight */
    /* Raised things float a little: a long, faint shadow, no hard edges */
    --lift: 0 30px 60px -40px color-mix(in oklab, var(--sky-deep) 45%, transparent);
    --hairline: color-mix(in oklab, var(--sky) 28%, transparent);

    /* Type. Any replacement MUST draw the Mongolian letters Ө ө Ү ү well. */
    --font-display: "Lora", Georgia, serif;   /* headings: a calm serif (small ones use --font-sans) */
    --tracking-display: -0.01em;
    --font-sans:  "Onest", "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Fluid type scale (about 1.25 ratio) */
    --step--1: clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem);   /* never under 14px: small text must still read */
    --step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
    --step-1:  clamp(1.35rem, 1.22rem + 0.6vw, 1.7rem);
    --step-2:  clamp(1.75rem, 1.5rem + 1.2vw, 2.45rem);
    --step-3:  clamp(2.3rem, 1.8rem + 2.4vw, 3.8rem);
    --step-4:  clamp(2.9rem, 1.9rem + 4.6vw, 6.4rem);

    /* Type roles: pick by job, not by size */
    --type-display: var(--step-4);   /* the one h1 on the home page */
    --type-title:   var(--step-3);   /* h1 on inner pages, section titles on home */
    --type-heading: var(--step-2);   /* h2 */
    --type-sub:     var(--step-1);   /* h3, card titles */
    --type-body:    var(--step-0);
    --type-caption: var(--step--1);
    --weight-strong: 600;
    --weight-display: 500;     /* headings: open, not bold */
    --weight-ui: 500;          /* buttons, labels */
    --leading-body: 1.65;
    --leading-heading: 1.06;
    --leading-tight: 1;
    --tracking-heading: -0.01em;
    --tracking-ui: 0.02em;

    /* Space */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3.5rem;
    --space-8: 6rem;    /* room to breathe between sections */
    --space-9: 9rem;

    /* Shape — deliberately few. Cards are not rounded; controls barely are. */
    --r-s: 10px;            /* soft corners, nothing hard */
    --r-m: 14px;
    --border: 1px;
    --border-strong: 2px;
    --mark: 3px;            /* progress bars, current-item underlines, notice edges */
    --dot: 0.5rem;          /* calendar "something on" marker */

    /* Interaction */
    --tap: 2.75rem;         /* 44px: smallest touch target */
    --ring: 2px;
    --ring-offset: 3px;

    /* Layout */
    --gutter: clamp(1rem, 4vw, 2rem);
    --max: 72rem;
    --cols: 12;
    --col-gap: var(--space-5);
    --measure: 66ch;
    --measure-narrow: 38ch;
    --header-h: 3.75rem;
    --tabbar-h: 3.75rem;    /* phones: the bottom bar (site-header.js tabBar) */
    --card-min: 17rem;      /* narrowest a listing card may get */
    --field-narrow: 22rem;

    /* Motion */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur-fast: 180ms;
    --dur: 260ms;
    --dur-slow: 600ms;      /* pictures settle slowly, like a slow breath */
    --spin: 800ms;
  }


  /* Night: the roles move, the palette stays. Follows the system unless the visitor picked one in the
     header (site-header.js sets data-theme="light" | "dark" on <html>; an inline script in each page's
     <head> sets it before the first paint, so there is no flash). Photographs and the 3D ger stay daylight. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: var(--night);
      --bg-high: var(--night-high);
      --surface: var(--night-up);
      --well: var(--night-well);
      --text: var(--smoke);
      --text-soft: var(--smoke-soft);
      --accent: var(--sky-pale);
      --accent-strong: var(--smoke);
      --focus: var(--sky-pale);
      --danger: var(--rose);
      --hill: var(--hill-night);
      --open-sky-photo: 0;
      --open-land: brightness(0.42) saturate(0.55) hue-rotate(12deg);
      --open-ink: var(--smoke);
      --open-ink-soft: var(--smoke-soft);
      --open-glass: color-mix(in oklab, var(--night-up) 80%, transparent);
      --map-tiles: invert(1) hue-rotate(185deg) brightness(0.95) contrast(0.85) saturate(0.6);
      --map-bg: var(--night-well);
      --lift: 0 30px 60px -34px color-mix(in oklab, black 75%, transparent);
      --hairline: color-mix(in oklab, var(--sky-pale) 22%, transparent);
      /* stars, drawn by the browser: soft dots on four grids of odd sizes, so they never line up */
      --stars:
        radial-gradient(1px 1px at 23px 31px, rgb(255 255 255 / .85), transparent) 0 0 / 197px 173px,
        radial-gradient(1px 1px at 121px 89px, rgb(255 255 255 / .6), transparent) 0 0 / 263px 211px,
        radial-gradient(1.5px 1.5px at 61px 141px, rgb(255 255 255 / .5), transparent) 0 0 / 331px 297px,
        radial-gradient(1px 1px at 171px 19px, rgb(255 255 255 / .65), transparent) 0 0 / 419px 239px;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
      --bg: var(--night);
      --bg-high: var(--night-high);
      --surface: var(--night-up);
      --well: var(--night-well);
      --text: var(--smoke);
      --text-soft: var(--smoke-soft);
      --accent: var(--sky-pale);
      --accent-strong: var(--smoke);
      --focus: var(--sky-pale);
      --danger: var(--rose);
      --hill: var(--hill-night);
      --open-sky-photo: 0;
      --open-land: brightness(0.42) saturate(0.55) hue-rotate(12deg);
      --open-ink: var(--smoke);
      --open-ink-soft: var(--smoke-soft);
      --open-glass: color-mix(in oklab, var(--night-up) 80%, transparent);
      --map-tiles: invert(1) hue-rotate(185deg) brightness(0.95) contrast(0.85) saturate(0.6);
      --map-bg: var(--night-well);
      --lift: 0 30px 60px -34px color-mix(in oklab, black 75%, transparent);
      --hairline: color-mix(in oklab, var(--sky-pale) 22%, transparent);
      /* stars, drawn by the browser: soft dots on four grids of odd sizes, so they never line up */
      --stars:
        radial-gradient(1px 1px at 23px 31px, rgb(255 255 255 / .85), transparent) 0 0 / 197px 173px,
        radial-gradient(1px 1px at 121px 89px, rgb(255 255 255 / .6), transparent) 0 0 / 263px 211px,
        radial-gradient(1.5px 1.5px at 61px 141px, rgb(255 255 255 / .5), transparent) 0 0 / 331px 297px,
        radial-gradient(1px 1px at 171px 19px, rgb(255 255 255 / .65), transparent) 0 0 / 419px 239px;
      color-scheme: dark;
  }
  :root[data-theme="light"] { color-scheme: light; }
}