/* ═══════════════════════════════════════════════════════════════════
   HSS DESIGN TOKENS — Single Source of Truth
   Phase 1: Token-Layer + Theme-Layer merged for migration simplicity
   Components migrate to semantic tokens progressively.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── LAYER 1: Primitives ─── */

:root {
  /* Neutrals */
  --hss-black-900: #1a1a1a;
  --hss-black-700: #2a2a2a;
  --hss-gray-500: #6b6b6b;
  --hss-gray-300: #a0a0a0;
  --hss-gray-100: #e5e5e5;
  --hss-white: #ffffff;

  /* Brand */
  --hss-green: #1C4231;
  --hss-green-light: #2D5A3F;
  --hss-lime: #D9EA9A;
  --hss-peach: #F7A072;
  --hss-cream: #FCF2E0;
  --hss-cream-alt: #F5EBD6;

  /* Radius */
  --hss-radius-sm: 0.5rem;
  --hss-radius: 1.25rem;
  --hss-radius-lg: 2rem;
  --hss-radius-pill: 50px;

  /* Shadows */
  --hss-shadow: 0 4px 16px rgba(26,26,26,0.10), 0 2px 6px rgba(26,26,26,0.06);
  --hss-shadow-lg: 0 12px 40px rgba(26,26,26,0.12), 0 4px 12px rgba(26,26,26,0.08);

  /* Motion */
  --hss-ease: cubic-bezier(0.29, 0.63, 0.44, 1);
  --hss-ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --hss-duration: 400ms;
}

/* ─── LAYER 2: Semantic Tokens — LIGHT THEME (default) ─── */

:root,
:root[data-theme="light"] {
  /* Surfaces */
  --hss-bg: var(--hss-cream);
  --hss-bg-alt: var(--hss-cream-alt);
  --hss-surface: var(--hss-white);

  /* Text */
  --hss-fg: var(--hss-green);
  --hss-heading: var(--hss-green);
  --hss-muted: rgba(28, 66, 49, 0.55);

  /* Borders */
  --hss-border: rgba(28, 66, 49, 0.12);
  --hss-border-strong: rgba(28, 66, 49, 0.25);

  /* Brand */
  --hss-primary: var(--hss-green);
  --hss-primary-fg: var(--hss-cream);
  --hss-accent: var(--hss-lime);
  --hss-accent-fg: var(--hss-green);

  /* Buttons — Primary */
  --hss-btn-bg: var(--hss-green);
  --hss-btn-fg: var(--hss-cream);
  --hss-btn-border: var(--hss-green);
  /* Buttons — Outline */
  --hss-btn-outline-bg: transparent;
  --hss-btn-outline-fg: var(--hss-green);
  --hss-btn-outline-border: var(--hss-green);
  /* Buttons — Lime */
  --hss-btn-lime-bg: var(--hss-lime);
  --hss-btn-lime-fg: var(--hss-green);
  --hss-btn-lime-border: var(--hss-lime);
  /* Buttons — Burgundy */
  --hss-btn-burgundy-bg: #722F37;
  --hss-btn-burgundy-fg: var(--hss-cream);
  --hss-btn-burgundy-border: #722F37;
  /* Buttons — Peach */
  --hss-btn-peach-bg: var(--hss-peach);
  --hss-btn-peach-fg: #472426;
  --hss-btn-peach-border: var(--hss-peach);
  /* Buttons — Light (dark bg) */
  --hss-btn-light-bg: var(--hss-cream);
  --hss-btn-light-fg: var(--hss-green);
  --hss-btn-light-border: var(--hss-cream);

  /* Cards */
  --hss-card-bg: var(--hss-cream-alt);
  --hss-card-border: rgba(28, 66, 49, 0.12);
  --hss-card-title: var(--hss-green);
  --hss-card-desc: rgba(28, 66, 49, 0.6);

  /* Glass */
  --hss-glass-bg: rgba(252, 242, 224, 0.08);
  --hss-glass-blur: blur(24px) saturate(180%);
  --hss-glass-border: rgba(252, 242, 224, 0.15);

  /* Footer */
  --hss-footer-bg: var(--hss-green);
  --hss-footer-fg: var(--hss-cream);
  --hss-footer-muted: rgba(252, 242, 224, 0.7);

  /* Nav */
  --hss-nav-bg: rgba(252, 242, 224, 0.85);
  --hss-nav-fg: var(--hss-green);
  --hss-nav-link-hover-bg: rgba(28, 66, 49, 0.08);

  /* Logo */
  --hss-logo-filter: brightness(0) saturate(100%) invert(15%) sepia(17%) saturate(1372%) hue-rotate(126deg) brightness(92%) contrast(96%);

  /* Selection */
  --hss-selection-bg: var(--hss-green);
  --hss-selection-fg: var(--hss-cream);

  /* Scrollbar */
  --hss-scrollbar-thumb: var(--hss-green);
  --hss-scrollbar-track: transparent;
}

/* ─── LAYER 2: Semantic Tokens — DARK THEME ─── */

:root[data-theme="dark"] {
  /* Surfaces */
  --hss-bg: var(--hss-black-900);
  --hss-bg-alt: var(--hss-black-700);
  --hss-surface: var(--hss-black-700);

  /* Text */
  --hss-fg: var(--hss-cream);
  --hss-heading: var(--hss-cream);
  --hss-muted: rgba(252, 242, 224, 0.5);

  /* Borders */
  --hss-border: rgba(252, 242, 224, 0.1);
  --hss-border-strong: rgba(252, 242, 224, 0.2);

  /* Brand */
  --hss-primary: var(--hss-lime);
  --hss-primary-fg: var(--hss-black-900);
  --hss-accent: var(--hss-green);
  --hss-accent-fg: var(--hss-cream);

  /* Buttons — Primary (lime on dark) */
  --hss-btn-bg: var(--hss-lime);
  --hss-btn-fg: var(--hss-black-900);
  --hss-btn-border: var(--hss-lime);
  /* Buttons — Outline (cream outline on dark) */
  --hss-btn-outline-bg: transparent;
  --hss-btn-outline-fg: var(--hss-cream);
  --hss-btn-outline-border: rgba(252, 242, 224, 0.4);
  /* Buttons — Lime */
  --hss-btn-lime-bg: var(--hss-lime);
  --hss-btn-lime-fg: var(--hss-black-900);
  --hss-btn-lime-border: var(--hss-lime);
  /* Buttons — Burgundy */
  --hss-btn-burgundy-bg: #722F37;
  --hss-btn-burgundy-fg: var(--hss-cream);
  --hss-btn-burgundy-border: #722F37;
  /* Buttons — Peach */
  --hss-btn-peach-bg: var(--hss-peach);
  --hss-btn-peach-fg: var(--hss-cream);
  --hss-btn-peach-border: var(--hss-peach);
  /* Buttons — Light (cream on dark) */
  --hss-btn-light-bg: var(--hss-cream);
  --hss-btn-light-fg: var(--hss-black-900);
  --hss-btn-light-border: var(--hss-cream);

  /* Cards */
  --hss-card-bg: var(--hss-black-700);
  --hss-card-border: rgba(252, 242, 224, 0.1);
  --hss-card-title: var(--hss-cream);
  --hss-card-desc: rgba(252, 242, 224, 0.55);

  /* Glass */
  --hss-glass-bg: rgba(26, 26, 26, 0.75);
  --hss-glass-blur: blur(24px) saturate(180%);
  --hss-glass-border: rgba(252, 242, 224, 0.08);

  /* Footer */
  --hss-footer-bg: #0f0f0f;
  --hss-footer-fg: var(--hss-cream);
  --hss-footer-muted: rgba(252, 242, 224, 0.5);

  /* Nav */
  --hss-nav-bg: rgba(26, 26, 26, 0.88);
  --hss-nav-fg: var(--hss-cream);
  --hss-nav-link-hover-bg: rgba(252, 242, 224, 0.08);

  /* Logo — inverted for dark bg */
  --hss-logo-filter: brightness(0) saturate(100%) invert(88%) sepia(6%) saturate(350%) hue-rotate(340deg) brightness(105%);

  /* Selection */
  --hss-selection-bg: var(--hss-lime);
  --hss-selection-fg: var(--hss-black-900);

  /* Scrollbar */
  --hss-scrollbar-thumb: var(--hss-cream);
  --hss-scrollbar-track: transparent;
}

/* ─── Backwards-compat aliases: ds10-* / green/lime/cream-* → hss-* ─── */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  /* ds10-* aliases (for ds10-v8-global.css) */
  --ds10-green: var(--hss-green);
  --ds10-green-light: var(--hss-green-light);
  --ds10-cream: var(--hss-cream);
  --ds10-cream-alt: var(--hss-cream-alt);
  --ds10-lime: var(--hss-lime);
  --ds10-peach: var(--hss-peach);
  --ds10-text: var(--hss-fg);
  --ds10-text-light: var(--hss-muted);
  --ds10-radius-pill: var(--hss-radius-pill);
  --ds10-transition: all var(--hss-duration) var(--hss-ease);
  --ds10-glass: var(--hss-glass-bg);
  --ds10-glass-blur: var(--hss-glass-blur);
  --ds10-glass-border: var(--hss-glass-border);

  /* Legacy --green / --lime / --cream aliases */
  --green: var(--hss-green);
  --green-light: var(--hss-green-light);
  --lime: var(--hss-lime);
  --peach: var(--hss-peach);
  --cream: var(--hss-cream);
  --cream-alt: var(--hss-cream-alt);
  --text: var(--hss-fg);
  --text-muted: var(--hss-muted);
  --border: var(--hss-border);
  --radius: var(--hss-radius);
  --radius-lg: var(--hss-radius-lg);
  --pill: var(--hss-radius-pill);
}