/* FlightSnatcher - shared design tokens, fonts and reset.
 *
 * Loaded by BOTH the parent-facing answer screen and the owner dashboard, so
 * the two surfaces cannot drift apart. Page-specific rules live in today.css
 * and pro.css.
 *
 * Original notes, still true:
 * The answer screen.
 *
 * Written for two people in their seventies reading Romanian on a phone. Every
 * decision below serves that, and each one is measured rather than felt:
 *
 *   - Nothing is smaller than 17px. Hierarchy is carried by weight, colour and
 *     space, never by shrinking text, because shrinking text is the one move
 *     that costs this reader the most.
 *   - Every text colour clears 7:1 against both surfaces it can sit on, and
 *     every mark clears 3:1. Computed, not eyeballed.
 *   - The verdict is encoded by POSITION on a four-step scale as well as by
 *     colour. The palette validator put green against amber at protan dE 4.2,
 *     which means a red-green colourblind reader cannot separate them. Colour
 *     here is reinforcement; the filled step is the message.
 *   - Inter is self-hosted as ONE file that holds Latin and all of Romanian
 *     (comma-below s/t, a-breve, circumflex a/i). Kerning works across the
 *     diacritics, and no word breaks into a fallback face mid-sentence. Build
 *     it with scripts/build_font.sh; do not swap in a Google subset, those
 *     strip cv05/cv08.
 */

/* ---------------------------------------------------------------- fonts -- */

@font-face {
  /* One self-built subset (scripts/build_font.sh): Latin + Romanian, weights
     400-700, with cv05/cv08 kept so the feature settings on body work. The
     name carries a content hash; templates preload this exact URL. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-6d25040e84.woff2") format("woff2");
}

/* ---------------------------------------------------------------- tokens -- */

:root {
  color-scheme: light dark;

  /* surfaces - warm paper, not clinical white */
  --page:   #FBFAF7;
  --card:   #FFFFFF;
  --sunken: #F4F2EC;
  --line:   #E7E2D8;
  --line-strong: #D6D0C3;

  /* ink - every value >= 7:1 on both --page and --card */
  --ink:    #191814;   /* 17.0 / 17.8 */
  --ink-2:  #54514A;   /*  7.6 /  7.9 */

  /* state text */
  --good:   #0F5C2E;   /*  7.8 /  8.1 */
  --wait:   #7A4A06;   /*  7.2 /  7.5 */
  --crit:   #8A1C1C;   /*  8.9 /  9.3 */
  --accent: #0B4F8A;   /*  8.1 /  8.4 */

  /* marks - sparkline, scale steps, rules. >= 3:1 */
  --m-good:   #0F7D24;
  --m-wait:   #B87708;
  --m-crit:   #B02A2A;
  --m-muted:  #8F8A7E;
  --m-accent: #1668B0;
  /* the unlit part of a meter: >= 3:1 on the card, and visibly lighter than
     --m-muted, which is the LIT step for a "normal" price */
  --m-track:  #958F83;   /* 3.2 on card, 3.1 on page */

  /* segmented control: the selected thumb sits ABOVE its track, as on iOS */
  --thumb:        #FFFFFF;
  --thumb-edge:   rgba(25, 24, 20, .10);
  --thumb-shadow: 0 1px 3px rgba(25, 24, 20, .14), 0 1px 1px rgba(25, 24, 20, .06);

  --on-accent: #FFFFFF;

  /* type scale - nothing below 17px, ever. In rem, so the reader's text size
     (Android's font scale, iOS Dynamic Type via today.css) reaches the page;
     at the default 16px root these are the old 17/19/21px exactly. The two
     display sizes are capped by the viewport instead: they are already huge,
     and a verdict that outgrows the screen helps nobody. */
  --t-meta:    1.0625rem;
  --t-body:    1.1875rem;
  --t-lead:    1.3125rem;
  --t-eyebrow: 1.1875rem;
  --t-verdict: min(2.875rem, 12vw);
  --t-price:   min(4.5rem, 19vw);

  --tap: 44px;
  --r:   18px;
  --shadow: 0 1px 2px rgba(25, 24, 20, .05), 0 8px 24px -12px rgba(25, 24, 20, .12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --page:   #131311;
    --card:   #1C1B18;
    --sunken: #232220;
    --line:   #2E2C27;
    --line-strong: #3C3934;

    --ink:    #F3F0E9;   /* 16.3 / 15.1 */
    --ink-2:  #B4AFA4;   /*  8.5 /  7.9 */

    --good:   #63D08A;
    --wait:   #EDB258;
    --crit:   #F2938B;
    --accent: #8FBFEC;

    --m-good:   #3FBF6A;
    --m-wait:   #E8A93C;
    --m-crit:   #E4685E;
    --m-muted:  #7C776D;
    --m-accent: #5EA6E0;
    --m-track:  #6D6960;   /* 3.1 on card */

    --thumb:        #46433D;
    --thumb-edge:   rgba(255, 255, 255, .10);
    --thumb-shadow: 0 1px 3px rgba(0, 0, 0, .5);

    --on-accent: #10100E;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--page);
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t-body);
  line-height: 1.55;
  /* cv05: l with a tail, cv08: I with serifs. Both remove the l/I/1 collision
     that costs an older reader real time. */
  font-feature-settings: "cv05" 1, "cv08" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* One focus ring for both surfaces; pro.css may refine it. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.wrap { max-width: 33rem; margin: 0 auto; padding: 0 20px 64px; }