/*
  Design tokens: the literal source of truth this portfolio claims to model.
  Themes: light (default), dark, hc (high-contrast).
  Density: comfortable (default), compact.
  Every visual value in styles.css should resolve to one of these custom properties.
*/

:root {
  /* ---- Color: surfaces ---- */
  --surface-0: #FFFFFF; /* page background */
  --surface-1: #F7F7F8; /* raised panel */
  --surface-2: #FBFBFC; /* nested / inset panel */

  /* ---- Color: text ---- */
  --text-primary: #14151A;
  --text-secondary: #5B5D66;
  --text-on-accent: #FFFFFF;

  /* ---- Color: border ---- */
  --border: #E5E5E8;
  --border-strong: #828288; /* meets 3:1 vs surface-0 for form-field / interactive boundaries (WCAG 1.4.11) */

  /* ---- Color: accent ---- */
  --accent: #4F46E5;
  --accent-hover: #4338CA;
  --accent-soft: rgba(79, 70, 229, 0.1);
  --accent-soft-strong: rgba(79, 70, 229, 0.18);

  /* ---- Color: semantic ---- */
  --success: #16A34A;
  --success-soft: rgba(22, 163, 74, 0.12);
  --danger: #DC2626;
  --danger-soft: rgba(220, 38, 38, 0.12);
  --focus-ring: var(--accent);

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(20, 21, 26, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 21, 26, 0.08);
  --shadow-lg: 0 12px 32px rgba(20, 21, 26, 0.12);

  /* ---- Type families ---- */
  --font-display: "Newsreader", ui-serif, Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Type scale (comfortable / default multiplier 1) ---- */
  --scale: 1;
  --text-xs: calc(0.75rem * var(--scale));
  --text-sm: calc(0.875rem * var(--scale));
  --text-base: calc(1rem * var(--scale));
  --text-md: calc(1.125rem * var(--scale));
  --text-lg: calc(1.375rem * var(--scale));
  --text-xl: calc(1.75rem * var(--scale));
  --text-2xl: calc(2.25rem * var(--scale));
  --text-3xl: calc(3.25rem * var(--scale));

  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* ---- Space scale (comfortable / default multiplier 1) ---- */
  --space-unit: 1;
  --space-1: calc(4px * var(--space-unit));
  --space-2: calc(8px * var(--space-unit));
  --space-3: calc(12px * var(--space-unit));
  --space-4: calc(16px * var(--space-unit));
  --space-5: calc(24px * var(--space-unit));
  --space-6: calc(32px * var(--space-unit));
  --space-7: calc(48px * var(--space-unit));
  --space-8: calc(64px * var(--space-unit));
  --space-9: calc(96px * var(--space-unit));

  /* ---- Radius (Playground-adjustable base) ---- */
  --radius-base: 8px;
  --radius-sm: calc(var(--radius-base) * 0.5);
  --radius-md: var(--radius-base);
  --radius-lg: calc(var(--radius-base) * 1.5);
  --radius-full: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 420ms;

  /* ---- Layout ---- */
  --content-width: 1120px;
  --nav-height: 64px; /* used for scroll-margin-top so sticky nav never obscures a focused/jumped-to target (WCAG 2.4.11) */
  --z-nav: 100;
  --z-palette: 200;
  --z-toast: 300;
  --z-overlay: 400;
}

/* ---- Density: compact ---- */
[data-density="compact"] {
  --space-unit: 0.7;
  --scale: 0.94;
}

/* ---- Theme: dark (system preference, no explicit override) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="hc"]) {
    --surface-0: #0B0C0E;
    --surface-1: #131418;
    --surface-2: #17181C;

    --text-primary: #F2F2F3;
    --text-secondary: #9A9CA5;
    --text-on-accent: #0B0C0E;

    --border: #26272B;
    --border-strong: #6E7077; /* meets 3:1 vs surface-0 for form-field / interactive boundaries (WCAG 1.4.11) */

    --accent: #A5B4FC;
    --accent-hover: #C7D2FE;
    --accent-soft: rgba(165, 180, 252, 0.14);
    --accent-soft-strong: rgba(165, 180, 252, 0.24);

    --success: #4ADE80;
    --success-soft: rgba(74, 222, 128, 0.14);
    --danger: #F87171;
    --danger-soft: rgba(248, 113, 113, 0.14);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
  }
}

/* ---- Theme: dark (explicit override, wins both directions) ---- */
:root[data-theme="dark"] {
  --surface-0: #0B0C0E;
  --surface-1: #131418;
  --surface-2: #17181C;

  --text-primary: #F2F2F3;
  --text-secondary: #9A9CA5;
  --text-on-accent: #0B0C0E;

  --border: #26272B;
  --border-strong: #35363B;

  --accent: #A5B4FC;
  --accent-hover: #C7D2FE;
  --accent-soft: rgba(165, 180, 252, 0.14);
  --accent-soft-strong: rgba(165, 180, 252, 0.24);

  --success: #4ADE80;
  --success-soft: rgba(74, 222, 128, 0.14);
  --danger: #F87171;
  --danger-soft: rgba(248, 113, 113, 0.14);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* ---- Theme: hc (high contrast, a real token set, not a filter) ---- */
:root[data-theme="hc"] {
  --surface-0: #000000;
  --surface-1: #0A0A0A;
  --surface-2: #000000;

  --text-primary: #FFFFFF;
  --text-secondary: #E5E5E5;
  --text-on-accent: #000000;

  --border: #FFFFFF;
  --border-strong: #FFFFFF;

  --accent: #FFD600;
  --accent-hover: #FFE566;
  --accent-soft: rgba(255, 214, 0, 0.18);
  --accent-soft-strong: rgba(255, 214, 0, 0.3);

  --success: #00FF7F;
  --success-soft: rgba(0, 255, 127, 0.16);
  --danger: #FF5C5C;
  --danger-soft: rgba(255, 92, 92, 0.16);
  --focus-ring: #FFD600;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}