/*
 * Design Tokens — Obsidian Executive Studio
 * Grounded in frontend-design skill token system
 * Typography: Fraunces (display) + Outfit (body) + JetBrains Mono (technical)
 */

:root {
  /* Palette Primitives — Dark Default (Obsidian & Warm Amber / Mint Technical) */
  --color-bg-h:       224;  --color-bg-s:       24%;  --color-bg-l:       6%;
  --color-surface-h:  224;  --color-surface-s:  20%;  --color-surface-l:  11%;
  --color-text-h:     40;   --color-text-s:     20%;  --color-text-l:     93%;
  --color-primary-h:  32;   --color-primary-s:  88%;  --color-primary-l:  56%;
  --color-accent-h:   168;  --color-accent-s:   68%;  --color-accent-l:   46%;
}

[data-theme='light'] {
  --color-bg-h:       40;   --color-bg-s:       22%;  --color-bg-l:       96%;
  --color-surface-h:  40;   --color-surface-s:  18%;  --color-surface-l:  100%;
  --color-text-h:     224;  --color-text-s:     28%;  --color-text-l:     12%;
  --color-primary-h:  26;   --color-primary-s:  84%;  --color-primary-l:  44%;
  --color-accent-h:   168;  --color-accent-s:   72%;  --color-accent-l:   34%;
}

:root {
  /* Semantic Surface & Text Tokens */
  --bg:              hsl(var(--color-bg-h) var(--color-bg-s) var(--color-bg-l));
  --bg-hover:        hsl(var(--color-bg-h) var(--color-bg-s) calc(var(--color-bg-l) + 4%));
  --surface:         hsl(var(--color-surface-h) var(--color-surface-s) var(--color-surface-l));
  --surface-raised:  hsl(var(--color-surface-h) var(--color-surface-s) calc(var(--color-surface-l) + 4%));
  --surface-overlay: hsl(var(--color-surface-h) var(--color-surface-s) var(--color-surface-l) / 0.88);

  --text:            hsl(var(--color-text-h) var(--color-text-s) var(--color-text-l));
  --text-muted:      hsl(var(--color-text-h) 12% 64%);
  --text-faint:      hsl(var(--color-text-h) 10% 48%);
  --text-inverse:    hsl(224 28% 8%);

  --primary:         hsl(var(--color-primary-h) var(--color-primary-s) var(--color-primary-l));
  --primary-hover:   hsl(var(--color-primary-h) var(--color-primary-s) calc(var(--color-primary-l) + 7%));
  --primary-subtle:  hsl(var(--color-primary-h) var(--color-primary-s) var(--color-primary-l) / 0.14);
  --on-primary:      hsl(224 28% 7%);

  --accent:          hsl(var(--color-accent-h) var(--color-accent-s) var(--color-accent-l));
  --accent-subtle:   hsl(var(--color-accent-h) var(--color-accent-s) var(--color-accent-l) / 0.14);

  --border:          hsl(var(--color-bg-h) 16% 18%);
  --border-strong:   hsl(var(--color-bg-h) 16% 26%);
  --border-focus:    var(--primary);

  --color-success:   hsl(152 62% 46%);
  --color-warning:   hsl(38 92% 54%);
  --color-error:     hsl(4 78% 58%);
  --color-info:      hsl(208 76% 56%);

  /* Typography */
  --font-display:    'Fraunces', Georgia, serif;
  --font-body:       'Outfit', system-ui, -apple-system, sans-serif;
  --font-mono:       'JetBrains Mono', monospace;

  --text-xs:         clamp(0.72rem, 0.69rem + 0.12vw, 0.78rem);
  --text-sm:         clamp(0.82rem, 0.79rem + 0.18vw, 0.90rem);
  --text-base:       clamp(0.95rem, 0.91rem + 0.22vw, 1.02rem);
  --text-lg:         clamp(1.12rem, 1.05rem + 0.35vw, 1.25rem);
  --text-xl:         clamp(1.32rem, 1.20rem + 0.50vw, 1.52rem);
  --text-2xl:        clamp(1.62rem, 1.45rem + 0.80vw, 1.95rem);
  --text-3xl:        clamp(2.00rem, 1.75rem + 1.15vw, 2.45rem);

  --leading-tight:   1.18;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.72;

  /* 4px Spacing Scale */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;

  /* Radii & Shadows */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  --shadow-sm:   0 2px 8px hsl(224 40% 2% / 0.28);
  --shadow-md:   0 8px 24px hsl(224 45% 2% / 0.42);
  --shadow-lg:   0 20px 48px hsl(224 50% 2% / 0.58);

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-normal: 240ms;
}

[data-theme='light'] {
  --text-muted:      hsl(224 14% 36%);
  --text-faint:      hsl(224 10% 50%);
  --on-primary:      #ffffff;
  --border:          hsl(40 16% 84%);
  --border-strong:   hsl(40 16% 72%);
  --shadow-sm:       0 2px 6px hsl(224 20% 10% / 0.06);
  --shadow-md:       0 8px 24px hsl(224 20% 10% / 0.10);
  --shadow-lg:       0 20px 48px hsl(224 20% 10% / 0.16);
}