/* ═══════════════════════════════════════════════════════════════
   Themes — CSS-only presets via [data-theme] attribute.
   Zero JavaScript. Apply to any container element.

   Each theme overrides @property knobs: hues, chroma, radius, spacing.
   Downstream tokens (primitives, surfaces, semantics) recompute automatically.

   Usage:
     <div data-theme="ocean">...ocean themed...</div>
     <html data-theme="slate">...entire app...</html>
   ═══════════════════════════════════════════════════════════════ */

/* All rules below are the `context` layer (ADR-0038 step 7): theme/prose
   context sits above `utilities`+`components`, so a [data-theme]/[prose] scope
   re-skins everything within it. The @layer order is declared by the co-loaded
   barrel (styles/index.css); this file only contributes to `context`. */
@layer context {

/* ── Default (cool indigo, balanced) ── */

[data-scheme="light"] {
  color-scheme: light;
}
[data-scheme="dark"] {
  color-scheme: dark;
}
[data-scheme="system"] {
  color-scheme: light dark;
}

/* ── Default (cool indigo, balanced) ── */

[data-theme="default"] {
  --a-neutral-hue:   225;
  --a-neutral-c-min: 0.010;
  --a-brand-hue:     225;
  --a-accent-hue:    225;
  --a-success-hue:   145;
  --a-warning-hue:   65;
  --a-danger-hue:    25;
  --a-info-hue:      200;
  --a-radius-k:      1;
  --a-density:       1;
  --a-shadow-intensity: 1;
}

/* ── Ocean (cool teal, vivid, rounded, relaxed) ── */
[data-theme="ocean"] {
  --a-neutral-hue:   210;
  --a-neutral-c-min: 0.020;
  --a-brand-hue:     200;
  --a-accent-hue:    200;
  --a-success-hue:   160;
  --a-warning-hue:   55;
  --a-danger-hue:    15;
  --a-info-hue:      190;
  --a-accent-c-max:  0.20;
  --a-brand-c-max:   0.20;
  --a-radius-k:      1.5;
  --a-density:       1.1;
}

/* ── Forest (earthy green, muted, compact) ── */
[data-theme="forest"] {
  --a-neutral-hue:   150;
  --a-neutral-c-min: 0.018;
  --a-neutral-c-max: 0.030;
  --a-brand-hue:     140;
  --a-accent-hue:    140;
  --a-success-hue:   145;
  --a-warning-hue:   60;
  --a-danger-hue:    20;
  --a-info-hue:      180;
  --a-accent-c-max:  0.14;
  --a-brand-c-max:   0.14;
  --a-radius-k:      0.5;
  --a-density:       0.9;
}

/* ── Sunset (warm amber, vivid, sharp) ── */
[data-theme="sunset"] {
  --a-neutral-hue:   30;
  --a-neutral-c-min: 0.022;
  --a-brand-hue:     20;
  --a-accent-hue:    20;
  --a-success-hue:   145;
  --a-warning-hue:   50;
  --a-danger-hue:    10;
  --a-info-hue:      200;
  --a-accent-c-max:  0.22;
  --a-brand-c-max:   0.22;
  --a-radius-k:      0.25;
  --a-density:       1.1;
}

/* ── Lavender (soft purple, low chroma, pill radius) ── */
[data-theme="lavender"] {
  --a-neutral-hue:   280;
  --a-neutral-c-min: 0.018;
  --a-brand-hue:     270;
  --a-accent-hue:    270;
  --a-success-hue:   145;
  --a-warning-hue:   65;
  --a-danger-hue:    25;
  --a-info-hue:      220;
  --a-accent-c-max:  0.15;
  --a-brand-c-max:   0.15;
  --a-radius-k:      2;
  --a-density:       1.1;
}

/* ── Rose (warm pink, medium chroma) ── */
[data-theme="rose"] {
  --a-neutral-hue:   350;
  --a-neutral-c-min: 0.016;
  --a-brand-hue:     340;
  --a-accent-hue:    340;
  --a-success-hue:   145;
  --a-warning-hue:   55;
  --a-danger-hue:    15;
  --a-info-hue:      200;
  --a-accent-c-max:  0.17;
  --a-brand-c-max:   0.17;
  --a-radius-k:      0.75;
  --a-density:       1;
}

/* ── Slate (desaturated grey-blue, sharp, tight) ── */
[data-theme="slate"] {
  --a-neutral-hue:   220;
  --a-neutral-c-min: 0.008;
  --a-neutral-c-max: 0.015;
  --a-brand-hue:     220;
  --a-accent-hue:    220;
  --a-success-hue:   145;
  --a-warning-hue:   65;
  --a-danger-hue:    25;
  --a-info-hue:      200;
  --a-accent-c-max:  0.10;
  --a-brand-c-max:   0.10;
  --a-radius-k:      0.35;
  --a-density:       0.85;
  --a-shadow-intensity: 0.5;
}

/* ── Midnight (deep indigo, high chroma, rounded, spacious) ── */
[data-theme="midnight"] {
  --a-neutral-hue:   250;
  --a-neutral-c-min: 0.020;
  --a-brand-hue:     240;
  --a-accent-hue:    240;
  --a-success-hue:   150;
  --a-warning-hue:   60;
  --a-danger-hue:    20;
  --a-info-hue:      210;
  --a-accent-c-max:  0.22;
  --a-brand-c-max:   0.22;
  --a-radius-k:      1.25;
  --a-density:       1.1;
}

}
