/*
 * Colour and type live here and nowhere else. Spec 06 §3.
 *
 * Supersedes the violet palette in spec 01 §8. The accent is now #F04B09 —
 * the vermilion from the logo's ring, which is the actual brand colour and
 * which none of the earlier specs used.
 *
 * ────────────────────────────────────────────────────────────────────────────
 * THE ONE TRAP, and it is the single mistake to avoid on this whole subdomain:
 *
 *   #F04B09 on the dark ground  = 5.03:1  ✓ fine for anything, including text
 *   #F04B09 on the light ground = 3.35:1  ✗ FAILS the 4.5:1 body-text minimum
 *
 * So --accent deliberately resolves to a DIFFERENT value per theme: the brand
 * vermilion on dark, and #C43A05 (4.84:1) on light. Use the token. Never
 * hardcode #F04B09 anywhere a body-size string could land, or the light theme
 * ships an accessibility failure that looks fine to whoever wrote it on dark.
 *
 * --brand stays constant in both themes and is for the logo mark and for
 * large-text or white-on-fill uses only, where 3:1 is the bar rather than 4.5.
 * ────────────────────────────────────────────────────────────────────────────
 *
 * THEME RESOLUTION — three states, no JavaScript required:
 *
 *   1. an explicit choice        → [data-theme] stamped on <html> by the server
 *                                  from the imz_theme cookie
 *   2. otherwise the OS setting  → @media (prefers-color-scheme: light)
 *   3. otherwise dark            → the bare :root block
 *
 * Dark is the default because it suits the material and because the logo, whose
 * outer edge is near-black indigo, dissolves into a dark page and lets the
 * vermilion ring become the shape. On light it reads as a pasted-on medallion.
 */

:root {
  /* ── brand: constant across themes ─────────────────────────────────────── */
  --brand:       #F04B09;   /* the logo vermilion */
  --brand-deep:  #C43A05;   /* the light-theme text variant */

  /* ── dark, the default ─────────────────────────────────────────────────── */
  --ground:      #14121F;
  --surface:     #1D1A2E;
  --raised:      #252139;
  --edge:        #332E4D;

  --text:        #EDE7DC;
  --text-muted:  #9A93AD;
  --text-faint:  #655E7D;

  --accent:      var(--brand);
  --accent-soft: #8A3208;   /* decorative rules and borders only, never text */
  /* Near-black on the bright vermilion measures 5.04:1; white on it is only
     3.69:1 and fails a button label. The light theme flips this — see there. */
  --on-accent:   #14121F;

  --positive:    #E0A742;
  --negative:    #D4576B;
  --info:        #6FB3C4;

  /* Translucent washes for the dashboard's gauge zones and alert fills. They
     are tokens rather than inline rgba() because the alpha that reads as a
     tint over #14121F reads as a stain over #F7F4EE. */
  --positive-wash: rgba(224, 167, 66, .30);
  --negative-wash: rgba(212,  87,107, .22);
  --info-wash:     rgba(111, 179,196, .26);
  --positive-line: rgba(224, 167, 66, .50);
  --negative-line: rgba(212,  87,107, .50);
  --info-line:     rgba(111, 179,196, .50);

  --focus-ring:  rgba(240, 75, 9, .38);

  color-scheme: dark;
}

/*
 * Light, when the OS asks for it and the visitor has made no explicit choice.
 * The :not() guard is what makes an explicit dark choice stick on a machine
 * set to light — without it the media query would win and the toggle would
 * appear to do nothing in one direction.
 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground:      #F7F4EE;   /* warm bone, NOT white — pure white under a
                                 vermilion accent looks clinical and fights
                                 the brand */
    --surface:     #FFFFFF;
    --raised:      #EFEAE0;
    --edge:        #DCD5C8;

    --text:        #1A1823;
    --text-muted:  #5C5568;
    --text-faint:  #8A8398;

    --accent:      var(--brand-deep);
    --accent-soft: #E8BBA6;
    --on-accent:   #FFFFFF;   /* 5.34:1 on --brand-deep; near-black would be 3.25:1 */

    --positive:    #8E6113;   /* NOT the spec's #9A6A15 — that measures 4.30:1
                              on this ground and --positive lands on body-size
                              text. This is 4.94:1 and reads the same. */
    --negative:    #A8323F;
    --info:        #2F6E7D;

    --positive-wash: rgba(154, 106, 21, .16);
    --negative-wash: rgba(168,  50, 63, .12);
    --info-wash:     rgba( 47, 110,125, .14);
    --positive-line: rgba(154, 106, 21, .45);
    --negative-line: rgba(168,  50, 63, .45);
    --info-line:     rgba( 47, 110,125, .45);

    --focus-ring:  rgba(196, 58, 5, .32);

    color-scheme: light;
  }
}

/* An explicit light choice wins over an OS set to dark. */
:root[data-theme="light"] {
  --ground:      #F7F4EE;
  --surface:     #FFFFFF;
  --raised:      #EFEAE0;
  --edge:        #DCD5C8;

  --text:        #1A1823;
  --text-muted:  #5C5568;
  --text-faint:  #8A8398;

  --accent:      var(--brand-deep);
  --accent-soft: #E8BBA6;
  --on-accent:   #FFFFFF;

  --positive:    #8E6113;   /* NOT the spec's #9A6A15 — that measures 4.30:1
                              on this ground and --positive lands on body-size
                              text. This is 4.94:1 and reads the same. */
  --negative:    #A8323F;
  --info:        #2F6E7D;

  --positive-wash: rgba(154, 106, 21, .16);
  --negative-wash: rgba(168,  50, 63, .12);
  --info-wash:   rgba( 47, 110,125, .14);
  --positive-line: rgba(154, 106, 21, .45);
  --negative-line: rgba(168,  50, 63, .45);
  --info-line:   rgba( 47, 110,125, .45);

  --focus-ring:  rgba(196, 58, 5, .32);

  color-scheme: light;
}

:root {
  /*
   * Self-hosted, latin subset, font-display: swap. No CDN — these are ad
   * landing pages on Indian mobile and every byte lands before first paint.
   * @font-face lives in fonts.css so this file stays a token sheet.
   */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body:    "Karla", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;

  --radius:   10px;
  --radius-s: 6px;

  --measure: 34rem;   /* reading width */
  --page:    62rem;   /* widest container */
}

/*
 * Theme transitions: background and border only.
 *
 * NEVER transition `color`. Text mid-fade between a light and a dark value
 * passes through the middle of the contrast range, and for those 150ms it is
 * genuinely unreadable — worse than an instant switch for exactly the people
 * least able to absorb it.
 */
@media (prefers-reduced-motion: no-preference) {
  body, .card, .banner, .option, .field input, .btn {
    transition: background-color .15s ease, border-color .15s ease;
  }
}