/* theme-cyan.css — the COLOUR SKIN. The only CheckIt-specific stylesheet.
   Dark ships day one (a preflight at dawn, a campsite at night are real scenarios for this app),
   so every token is defined in all three states: bare :root, the OS media query, and [data-theme].

   ⚠️ TWO TRAPS, both load-bearing (Maya §18.4/18.5):
     1. --accent is cyan-700 (#0e7490), NOT cyan-500. Cyan is a LIGHT hue: bright cyan fails contrast
        the moment it's used as text on a white surface — the same trap LinkIt hit with yellow and
        solved by picking a deeper value. If anyone reaches for #06b6d4 because it looks more "cyan",
        the nav text, links and the run counter all quietly fail, in an app used in sunlight.
     2. --accent-ink FLIPS in dark. A white checkmark on a #22d3ee fill is unreadable; a near-black
        one is crisp. One token, on the most important control in the app.
*/

:root {
  /* Surfaces / ink — barely-cyan off-white, deep slate ink */
  --bg:        #f3f9fb;
  --surface:   #ffffff;
  --surface-2: #e6f4f8;   /* alt rows, wells, hover */
  --surface-3: #d0ecf3;   /* deeper wash */
  --ink:       #0d2430;   /* deep slate-teal, not pure black */
  --ink-soft:  #375362;
  --ink-faint: #6b8794;   /* the tick-box border colour — never --line */
  --line:      #bcdae4;
  --line-soft: #d9edf3;

  /* Cyan brand scale */
  --cyan-50:  #ecfeff;  --cyan-100: #cffafe;  --cyan-200: #a5f3fc;
  --cyan-300: #67e8f9;  --cyan-400: #22d3ee;  --cyan-500: #06b6d4;
  --cyan-600: #0891b2;  --cyan-700: #0e7490;  --cyan-800: #155e75;

  --accent:      var(--cyan-700);   /* safe as TEXT on light surfaces — see trap 1 */
  --accent-2:    var(--cyan-600);
  --accent-soft: var(--cyan-100);   /* tinted wash — chips, focus rings, ticked rows */
  --accent-ink:  #ffffff;           /* drawn ON the accent — see trap 2 */

  --ok:     #1f9d6b;
  --warn:   #b45309;                /* amber, dark enough to be text */
  --danger: #d13438;

  --scrim: rgba(13, 36, 48, .45);   /* the modal / sheet backdrop */

  --shadow-sm: 0 1px 2px rgba(13, 60, 80, .10);
  --shadow:    0 1px 2px rgba(13, 60, 80, .06), 0 4px 14px rgba(13, 60, 80, .08);
  --shadow-lg: 0 12px 40px rgba(13, 60, 80, .20);

  color-scheme: light;
}

/* Dark — same names, flipped values. Defined twice on purpose: the media query covers the default
   "system" setting (which stamps no attribute at all), and [data-theme="dark"] lets the in-app
   toggle win over the OS in both directions. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0b1418;
    --surface:   #12212a;
    --surface-2: #182c37;
    --surface-3: #204050;
    --ink:       #e9f4f8;
    --ink-soft:  #a5bfcb;
    --ink-faint: #6f8b99;
    --line:      #24404e;
    --line-soft: #1c333f;

    --accent:      var(--cyan-400);   /* bright cyan reads on dark */
    --accent-2:    var(--cyan-300);
    --accent-soft: #10333d;
    --accent-ink:  #05191f;           /* DARK ink on a bright cyan fill */

    --ok: #35c98d;  --warn: #e0a52b;  --danger: #ef5a5f;

    --scrim: rgba(2, 10, 14, .62);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:        #0b1418;
  --surface:   #12212a;
  --surface-2: #182c37;
  --surface-3: #204050;
  --ink:       #e9f4f8;
  --ink-soft:  #a5bfcb;
  --ink-faint: #6f8b99;
  --line:      #24404e;
  --line-soft: #1c333f;

  --accent:      var(--cyan-400);
  --accent-2:    var(--cyan-300);
  --accent-soft: #10333d;
  --accent-ink:  #05191f;

  --ok: #35c98d;  --warn: #e0a52b;  --danger: #ef5a5f;

  --scrim: rgba(2, 10, 14, .62);

  color-scheme: dark;
}