/* ==========================================================================
   theme.css  —  theme/token overrides (v1.0.0). Loads AFTER tokens.css.

   Brightness model (the "system brightness night/day" feature):
     - No [data-theme] attribute  -> AUTO: follow OS via prefers-color-scheme.
     - [data-theme="light"]        -> force light.
     - [data-theme="dark"]         -> force dark.
   js/core.js (theme module) sets/clears the attribute and persists the choice.
   ========================================================================== */

/* ---- DARK token map (shared by forced-dark and auto-dark) ---------------- */
:root[data-theme="dark"] {
  --color-bg:            var(--n-900);
  --color-surface:       var(--n-850);
  --color-surface-2:     var(--n-800);
  --color-surface-inset: var(--n-950);
  --color-border:        var(--n-700);
  --color-border-strong: var(--n-600);
  --color-text:          #f2f4f7;
  --color-text-muted:    var(--n-400);
  --color-text-subtle:   var(--n-500);
  --color-overlay:       rgba(0, 0, 0, 0.62);

  --brand-soft:  #1e0d04;   /* near-black orange tint; used for active nav   */
  --brand-ink:   #f5d0b0;   /* warm off-white; text on brand-soft dark        */
  --accent-a-soft: var(--brand-soft);
  --accent-b-soft: #0d1828;

  --status-success-soft: #0d1c12;
  --status-warning-soft: #1f1008;
  --status-danger-soft:  #200e0e;
  --status-info-soft:    #0d1828;

  /* Shadows read as depth via darker, larger spreads on dark surfaces. */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 28px 72px rgba(0, 0, 0, 0.65);
}

/* AUTO mode: when no explicit choice is set, mirror the OS preference. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:            var(--n-900);
    --color-surface:       var(--n-850);
    --color-surface-2:     var(--n-800);
    --color-surface-inset: var(--n-950);
    --color-border:        var(--n-700);
    --color-border-strong: var(--n-600);
    --color-text:          #f2f4f7;
    --color-text-muted:    var(--n-400);
    --color-text-subtle:   var(--n-500);
    --color-overlay:       rgba(0, 0, 0, 0.62);

    --brand-soft:  #1e0d04;
    --brand-ink:   #f5d0b0;
    --accent-a-soft: var(--brand-soft);
    --accent-b-soft: #0d1828;

    --status-success-soft: #0d1c12;
    --status-warning-soft: #1f1008;
    --status-danger-soft:  #200e0e;
    --status-info-soft:    #0d1828;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.50);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
    --shadow-xl: 0 28px 72px rgba(0, 0, 0, 0.65);
  }
}

/* [data-theme="light"] simply uses the tokens.css :root defaults — no override
   needed, but declared for intent and to win over any future cascade noise. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }