/* ==========================================================================
   Prism' — Color tokens
   Base HSL values match production styles.css :root, kept as raw H S% L%
   triples so they can be composed as hsl(var(--x) / <alpha>).
   ========================================================================== */

:root {
  /* ---- Base hues (HSL channels only — wrap in hsl()) ---- */
  --navy-900: 215 43% 18%; /* @kind color */
  --navy-800: 215 43% 25%; /* @kind color */
  --violet-600: 247 75% 56%; /* @kind color */
  --violet-500: 247 75% 50%; /* @kind color */
  --paper-50: 215 40% 98%; /* @kind color */
  --paper-100: 215 40% 92%; /* @kind color */
  --mist-100: 215 50% 96%; /* @kind color */
  --mist-200: 215 40% 96%; /* @kind color */
  --slate-500: 215 30% 45%; /* @kind color */
  --line-200: 215 40% 85%; /* @kind color */
  --line-100: 215 40% 90%; /* @kind color */
  --white: 0 0% 100%; /* @kind color */
  --red-600: 0 84% 60%; /* @kind color */
  --green-600: 142 76% 36%; /* @kind color */

  /* ---- Semantic aliases (use these in components) ---- */
  --color-bg: var(--paper-50);
  --color-surface: var(--white);
  --color-surface-foreground: var(--navy-900);
  --color-text: var(--navy-900);
  --color-text-muted: var(--slate-500);
  --color-text-inverse: var(--white);
  --color-border: var(--line-200);
  --color-input-border: var(--line-100);
  --color-primary: var(--navy-900);
  --color-primary-foreground: var(--white);
  --color-secondary: var(--navy-800);
  --color-accent: var(--violet-600);
  --color-accent-hover: var(--violet-500);
  --color-accent-foreground: var(--white);
  --color-destructive: var(--red-600);
  --color-success: var(--green-600);
  --color-focus-ring: var(--violet-600);

  /* ---- Hairline borders (minimalist-tech evolution: replace heavy shadows) ---- */
  --hairline: hsl(var(--navy-900) / 0.08);
  --hairline-strong: hsl(var(--navy-900) / 0.14);

  /* ---- Glass (header, floating panels) ---- */
  --glass-bg: hsl(var(--white) / 0.7);
  --glass-border: hsl(var(--white) / 0.3);
  --glass-bg-on-dark: hsl(var(--white) / 0.1);
  --glass-border-on-dark: hsl(var(--white) / 0.22);

  /* ---- Gradients (signature — use sparingly per 2026 direction) ---- */
  --gradient-hero: linear-gradient(135deg, hsl(var(--navy-900)), hsl(var(--violet-600)));
  --gradient-card: linear-gradient(145deg, hsl(var(--white)), hsl(var(--paper-50)));
  --gradient-feature: linear-gradient(120deg, hsl(215 50% 99%), hsl(247 75% 99%)); /* @kind other */
  --gradient-text-accent: linear-gradient(to right, hsl(var(--violet-600)), hsl(var(--white)));

  /* ---- Dark mode (optional, per brand notes) ---- */
  --navy-dark-bg: 222 43% 11%; /* @kind color */
  --navy-dark-card: 222 30% 18%; /* @kind color */
}