/* ═══════════════════════════════════════════════════════════════════════════
   RallyIQ design tokens — the ONLY file in the project that may contain a
   raw colour literal.
   ───────────────────────────────────────────────────────────────────────────
   Why this is a separate file, not a :root block inside style.css:
   the light-mode sweep rewrites every hex in the codebase to var(--token).
   With the definitions living in style.css, every sed and every verification
   grep would need a line-range carve-out for lines 3-17 — which silently
   drifts the moment a token is added, and made the residual-literal check
   return 11 false positives against its own token block. One file split
   removes the carve-out permanently. See task/plan.md, review finding #22.

   Dark is the brand default and lives in :root, so the currently-shipping
   theme is what renders if anything about the light layer fails.
   Light is opt-in via the nav toggle only. prefers-color-scheme is
   deliberately NOT honoured — do not add a media query here that overrides
   the stored preference.

   Every light value below is measured, not eyeballed. Ratios are against
   --bg-surface / --bg-deep respectively. See task/plan.md for the full table.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg-deep:        #191919;
  --bg-surface:     #242424;
  --bg-elevated:    #2d2d2d;
  --surface-sunk:   #161616;   /* phone screen */
  --border:         #333333;
  --border-dim:     #2a2a2a;
  --border-strong:  #3a3a3a;   /* phone bezel */

  /* Accent — channel form drives all 16 distinct tint alphas in use.
     Composed tokens cannot represent them; see plan review finding #24. */
  --green-rgb:      61,158,66;
  --green:          rgb(var(--green-rgb));        /* fills, borders, rules */
  --green-text:     rgb(var(--green-rgb));        /* accent text */
  --green-hover:    #2e8632;                      /* deepens on dark */
  --green-bright:   #6ed873;                      /* text on a green tint */
  --green-dim:      rgba(var(--green-rgb), 0.15);

  --gold-rgb:       255,214,79;
  --gold:           rgb(var(--gold-rgb));
  --gold-text:      rgb(var(--gold-rgb));         /* 7.5:1 on dark, passes */

  --error:          #f0643c;                      /* 5.52:1 on --bg-deep */

  /* STREaMLiNE maker's-credit ink. RallyIQ green owns every filled primary
     button on this site; cyan is deliberately restricted to text, hairlines
     and a ghost-tier CTA, so the two accents never compete for the same job.
     Measured on the three dark surfaces: 7.24 / 6.39 / 5.67 : 1. */
  --sl-cyan-rgb:    6,182,212;
  --sl-cyan:        rgb(var(--sl-cyan-rgb));
  --sl-cyan-hover:  #22d3ee;                      /* lightens on dark: 9.73:1 */
  --sl-cyan-dim:    rgba(var(--sl-cyan-rgb), 0.12);   /* decorative hairline only */
  /* Ambient wash behind the maker section. 0.08, not 0.12: at 0.12 the cyan
     link sitting on it measured 4.53:1 on the light theme, and a translucent
     pill placed on top of it composited TWICE and dropped to 3.87:1. At 0.08
     the worst case on that wash is 4.81:1 (cyan) and 5.10:1 (--text-muted).
     Anything with its own background inside this section is opaque, so it is
     immune to the wash rather than compositing through it. */
  --sl-cyan-wash:   rgba(var(--sl-cyan-rgb), 0.08);
  /* Label on a filled cyan surface (the ghost CTA's hover state only).
     #191919 on #06B6D4 = 7.24:1; white would be 2.43:1 and fail. */
  --sl-on-cyan:     #191919;

  /* Text. --text-on-accent is the label colour for a filled accent button.
     Black on #3d9e42 = 5.16:1; white would be 3.40:1 and fail. */
  --text-primary:   #ffffff;
  --text-sec:       #ccc8bd;
  --text-muted:     #9e9e9e;
  --text-dim:       #616161;
  --text-dead:      #484646;
  --text-on-accent: #191919;
  --strip-idle:     #2e2e2e;   /* marquee resting state */

  /* Composites. --overlay-rgb is the surface-lift channel: white lifts a dark
     surface, black shades a light one, so the same 6 alphas serve both. */
  --overlay-rgb:    255,255,255;
  --nav-bg:         rgba(25,25,25,0.96);
  --dot-grid:       rgba(var(--overlay-rgb), 0.055);
  --grain-opacity:  0.025;

  /* Shadows are the one composite that cannot be a channel swap: light mode
     needs a lower ALPHA, not a different hue. A 0.65 black at 80px blur is
     correct on #191919 and a smudge on #f7f7f4. */
  --shadow-sm:      0 8px 32px rgba(0,0,0,0.5);
  --shadow-md:      0 24px 60px rgba(0,0,0,0.45);
  --shadow-lg:      0 32px 80px rgba(0,0,0,0.65);
  --shadow-phone:   0 40px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05);
  --scrim:          rgba(0,0,0,0.7);   /* modal veil */
}

[data-theme="light"] {
  color-scheme: light;

  --bg-deep:        #f7f7f4;
  --bg-surface:     #ffffff;
  --bg-elevated:    #f0f0ed;
  --surface-sunk:   #eceae4;
  --border:         #cfcdc4;
  --border-dim:     #e6e5e0;
  --border-strong:  #cfcdc4;

  /* #3d9e42 is a 3.40:1 fill on light — unusable. #256b29 gives 6.53:1 with a
     white label and 6.09:1 as text on --bg-deep. */
  --green-rgb:      37,107,41;
  --green-hover:    #1d5520;   /* 8.85:1. Must be DARKER than the base fill or
                                  the hover affordance inverts between themes. */
  --green-bright:   #256b29;   /* #6ed873 measures 1.79:1 here */

  /* #c49a00 is a 2.64:1 text colour. Kept as a fill only; text uses the dark
     companion, exactly as the app's globals.css does. */
  --gold-rgb:       196,154,0;
  --gold-text:      #7a5c00;   /* 6.25:1 */

  --error:          #b91c1c;   /* 6.03:1. #dc2626 is only 4.50:1 on --bg-deep. */

  /* #06B6D4 is 2.26:1 on --bg-deep here and unusable as ink. #0e7490 is the
     value the live STREaMLiNE site uses for its own light theme:
     4.99 / 5.36 / 4.69 : 1 across the three light surfaces. */
  --sl-cyan-rgb:    14,116,144;
  --sl-cyan-hover:  #155e75;   /* 6.77:1. Must be DARKER than the base fill or
                                  the hover affordance inverts between themes. */
  --sl-on-cyan:     #ffffff;   /* white on #0e7490 = 5.36:1 */

  /* --text-muted carries BODY COPY here (217 uses), not muted-label duty, so it
     takes the 7.11:1 value rather than the app's #807d72 label grey (4.12:1). */
  --text-primary:   #26251e;
  --text-sec:       #5a5852;
  --text-muted:     #5a5852;
  /* Measured on the DARKEST light surface (--surface-sunk #eceae4), not on
     white: #6e6b63 is 5.32:1 on #ffffff but only 4.42:1 on #eceae4, and 10px
     labels do sit on it. #67645c clears 4.5 on all four light surfaces. */
  --text-dim:       #67645c;   /* 5.91 / 5.51 / 5.17 / 4.91 — also ::placeholder */
  --text-dead:      #67645c;
  --text-on-accent: #ffffff;
  --strip-idle:     #d8d6d0;

  --overlay-rgb:    0,0,0;
  --nav-bg:         rgba(247,247,244,0.96);
  --grain-opacity:  0.015;     /* 0.025 white noise reads as dirt on a light bg */

  --shadow-sm:      0 8px 32px rgba(0,0,0,0.08);
  --shadow-md:      0 24px 60px rgba(0,0,0,0.09);
  --shadow-lg:      0 32px 80px rgba(0,0,0,0.10);
  --shadow-phone:   0 40px 80px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06);
  --scrim:          rgba(0,0,0,0.45);  /* 0.7 is far too heavy over a light page */
}