/* ── Light theme overrides ─────────────────────────────────────────────────
 * Applied two ways:
 *   1. Explicit [data-theme="light"], set by the theme switcher or the inline
 *      boot script in index.html when localStorage says "light".
 *   2. @media (prefers-color-scheme: light) whenever the user has not opted
 *      into dark — this gives live OS-theme-switch behavior and is resilient
 *      to JS failures.
 *
 * The two rule bodies are intentionally identical. If you change one, change
 * the other. The duplication is preserved deliberately so each rule remains
 * trivially auditable without depending on extra cascade tricks. */

[data-theme="light"] {
  /* Surface */
  --surface-0: #f7faf8;
  --surface-1: #ffffff;
  --surface-2: #eef5f1;
  --surface-3: #e3ede7;

  /* Text — warm-tinted near-black, never pure */
  --text-primary:   #0b1016;
  --text-secondary: #3f4d5c;
  --text-tertiary:  #6b7985;
  --text-inverse:   #ffffff;

  /* Accents — AA-safe evergreen on white */
  --accent:               #0f8a68;
  --accent-hover:         #0a6f53;
  --accent-subtle:        rgba(15, 138, 104, 0.10);
  --accent-strong:        rgba(15, 138, 104, 0.28);
  --accent-warm:          #c97a1f;
  --accent-warm-subtle:   rgba(201, 122, 31, 0.12);
  --accent-cool:          #3e5fa8;
  --accent-cool-subtle:   rgba(62, 95, 168, 0.10);
  --accent-violet:        #7f52c2;
  --accent-violet-subtle: rgba(127, 82, 194, 0.12);
  --accent-steel:         #1a8a70;
  --accent-steel-subtle:  rgba(26, 138, 112, 0.12);
  --accent-ochre:         #b5832a;
  --accent-ochre-subtle:  rgba(181, 131, 42, 0.12);
  --accent-neutral:       #5d6a7c;
  --accent-neutral-subtle: rgba(93, 106, 124, 0.10);

  /* Status */
  --status-healthy:   #0f8a68;
  --status-degraded:  #c97a1f;
  --status-attention: #b4411e;

  /* Chrome */
  --border:        rgba(15, 138, 104, 0.16);
  --border-strong: rgba(15, 138, 104, 0.30);
  --border-hover:  rgba(15, 138, 104, 0.24);
  --focus-ring:    rgba(15, 138, 104, 0.20);
  --shadow-sm: 0 1px 3px rgba(11, 16, 22, 0.05);
  --shadow-md: 0 8px 24px rgba(11, 16, 22, 0.08);
  --shadow-lg: 0 18px 40px rgba(11, 16, 22, 0.12);

  /* Body background */
  --grad-1: rgba(15, 138, 104, 0.08);
  --grad-2: rgba(62, 95, 168, 0.06);
  --grad-3: rgba(15, 138, 104, 0.04);
  --body-start: #f7faf8;
  --body-mid:   #eef5f1;
  --body-end:   #e6efe9;
  --dot-color:  rgba(11, 16, 22, 0.035);
  --grid-color: rgba(11, 16, 22, 0.035);

  /* Inputs & controls */
  --input-bg:             rgba(255, 255, 255, 0.9);
  --control-bg:           rgba(15, 138, 104, 0.08);
  --control-border:       rgba(15, 138, 104, 0.22);
  --control-hover-bg:     rgba(15, 138, 104, 0.14);
  --control-hover-border: rgba(15, 138, 104, 0.4);
  --control-text:         var(--accent);

  /* Toggles */
  --toggle-active-bg:   var(--accent-subtle);
  --toggle-active-text: var(--accent);
  --toggle-hover-bg:    rgba(11, 16, 22, 0.04);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --surface-0: #f7faf8;
    --surface-1: #ffffff;
    --surface-2: #eef5f1;
    --surface-3: #e3ede7;

    --text-primary:   #0b1016;
    --text-secondary: #3f4d5c;
    --text-tertiary:  #6b7985;
    --text-inverse:   #ffffff;

    --accent:               #0f8a68;
    --accent-hover:         #0a6f53;
    --accent-subtle:        rgba(15, 138, 104, 0.10);
    --accent-strong:        rgba(15, 138, 104, 0.28);
    --accent-warm:          #c97a1f;
    --accent-warm-subtle:   rgba(201, 122, 31, 0.12);
    --accent-cool:          #3e5fa8;
    --accent-cool-subtle:   rgba(62, 95, 168, 0.10);
    --accent-violet:        #7f52c2;
    --accent-violet-subtle: rgba(127, 82, 194, 0.12);
    --accent-steel:         #1a8a70;
    --accent-steel-subtle:  rgba(26, 138, 112, 0.12);
    --accent-ochre:         #b5832a;
    --accent-ochre-subtle:  rgba(181, 131, 42, 0.12);
    --accent-neutral:       #5d6a7c;
    --accent-neutral-subtle: rgba(93, 106, 124, 0.10);

    --status-healthy:   #0f8a68;
    --status-degraded:  #c97a1f;
    --status-attention: #b4411e;

    --border:        rgba(15, 138, 104, 0.16);
    --border-strong: rgba(15, 138, 104, 0.30);
    --border-hover:  rgba(15, 138, 104, 0.24);
    --focus-ring:    rgba(15, 138, 104, 0.20);
    --shadow-sm: 0 1px 3px rgba(11, 16, 22, 0.05);
    --shadow-md: 0 8px 24px rgba(11, 16, 22, 0.08);
    --shadow-lg: 0 18px 40px rgba(11, 16, 22, 0.12);

    --grad-1: rgba(15, 138, 104, 0.08);
    --grad-2: rgba(62, 95, 168, 0.06);
    --grad-3: rgba(15, 138, 104, 0.04);
    --body-start: #f7faf8;
    --body-mid:   #eef5f1;
    --body-end:   #e6efe9;
    --dot-color:  rgba(11, 16, 22, 0.035);
    --grid-color: rgba(11, 16, 22, 0.035);

    --input-bg:             rgba(255, 255, 255, 0.9);
    --control-bg:           rgba(15, 138, 104, 0.08);
    --control-border:       rgba(15, 138, 104, 0.22);
    --control-hover-bg:     rgba(15, 138, 104, 0.14);
    --control-hover-border: rgba(15, 138, 104, 0.4);
    --control-text:         var(--accent);

    --toggle-active-bg:   var(--accent-subtle);
    --toggle-active-text: var(--accent);
    --toggle-hover-bg:    rgba(11, 16, 22, 0.04);
  }
}