/* ==========================================================================
   Shared Design System — Design Tokens
   Version: 1.0 | Date: 2026-08-03
   Canonical reference: DESIGN_SYSTEM_SPEC.md

   Naming: --<category>-<subcategory>[-<variant>]
   Theme mechanism: data-theme="dark|light" on <html>
   Dark-first — all dark values at :root; light overrides in [data-theme="light"]
   ========================================================================== */

/* --------------------------------------------------------------------------
   2.1  Colour Tokens
   -------------------------------------------------------------------------- */

:root {
  /* ── Backgrounds ── */
  --bg:             #0d1117;
  --surface:        #161b22;
  --surface-2:      #21262d;
  --surface-3:      #2b2c31;
  --nav-bg:         rgba(13, 17, 23, 0.82);

  /* ── Text colours ── */
  --text:            #e6edf3;
  --text-heading:    #f0f6fc;
  --text-muted:      #8b949e;
  --text-placeholder:#484f58;
  --text-inverse:    #0d1117;

  /* ── Accent colours ── */
  --accent-primary:       #a9c6a1;
  --accent-primary-soft:  rgba(169, 198, 161, 0.15);
  --accent-primary-ink:   #8c574f;

  --accent-secondary:       #e3b1ac;
  --accent-secondary-soft:  rgba(227, 177, 172, 0.15);
  --accent-secondary-ink:   #c97e76;

  --accent-brand:       #f0b90b;
  --accent-brand-soft:  rgba(240, 185, 11, 0.15);
  --accent-brand-ink:   #f0b90b;

  /* ── Semantic status colours ── */
  --status-success:  #3fb950;
  --status-warning:  #d29922;
  --status-error:    #f85149;
  --status-info:     #58a6ff;

  /* ── Border colours ── */
  --border:        #30363d;
  --border-strong: #484f58;
}

/* ── Light-theme colour overrides ── */
[data-theme="light"] {
  --bg:             #f4f3ef;
  --surface:        #fbfaf8;
  --surface-2:      #eeede8;
  --surface-3:      #e0ded7;
  --nav-bg:         rgba(244, 243, 239, 0.82);

  --text:            #2b2b30;
  --text-heading:    #1a1a20;
  --text-muted:      #6d6d75;
  --text-placeholder:#9b9ba2;
  --text-inverse:    #f4f3ef;

  --accent-primary:       #8fb489;
  --accent-primary-soft:  rgba(143, 180, 137, 0.15);
  --accent-primary-ink:   #7a4a43;

  --accent-secondary:       #cd9a95;
  --accent-secondary-soft:  rgba(205, 154, 149, 0.15);
  --accent-secondary-ink:   #b06961;

  --accent-brand:       #d4a30a;
  --accent-brand-soft:  rgba(212, 163, 10, 0.15);
  --accent-brand-ink:   #d4a30a;

  --status-success:  #2d8a3e;
  --status-warning:  #b0881a;
  --status-error:    #d9362e;
  --status-info:     #0969da;

  --border:        rgba(30, 30, 40, 0.09);
  --border-strong: rgba(30, 30, 40, 0.18);
}

/* --------------------------------------------------------------------------
   2.2  Typography Tokens
   -------------------------------------------------------------------------- */

:root {
  /* ── Font families ── */
  --font-display: 'Sora', system-ui, -apple-system, sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, monospace;

  /* ── Font sizes (rem, base 16px) ── */
  --text-3xs: 0.625rem;   /* 10px */
  --text-2xs: 0.6875rem;  /* 11px */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.8125rem;  /* 13px */
  --text-base:1rem;       /* 16px */
  --text-lg:  1.125rem;   /* 18px */
  --text-xl:  1.25rem;    /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */
  --text-6xl: 3.75rem;    /* 60px */
  --text-7xl: 4rem;       /* 64px */

  /* ── Font weights ── */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Letter spacing ── */
  --tracking-tightest: -0.03em;
  --tracking-tighter:  -0.02em;
  --tracking-tight:    -0.01em;
  --tracking-normal:    0;
  --tracking-wide:      0.05em;

  /* ── Line heights ── */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;
}

/* --------------------------------------------------------------------------
   2.3  Spacing & Sizing Tokens
   -------------------------------------------------------------------------- */

:root {
  /* ── 4px-based spacing scale ── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* ── Layout-specific sizing ── */
  --page-x:        32px;
  --content-width: 1040px;
  --nav-h:         70px;
  --footer-h:      28px;
  --header-h:      52px;
}

/* --------------------------------------------------------------------------
   2.4  Border Radius Tokens (asymmetric two-corner system)
   -------------------------------------------------------------------------- */

:root {
  --r-none:      0;
  --r-pill:      9px 3px 9px 3px;
  --r-chip-xs:   11px 4px 11px 4px;
  --r-chip-sm:   12px 4px 12px 4px;
  --r-chip:      14px 4px 14px 4px;
  --r-btn:       16px 5px 16px 5px;
  --r-entry:     24px 7px 24px 7px;
  --r-thumb:     24px 6px 24px 6px;
  --r-group:     28px 7px 28px 7px;
  --r-thumb-lg:  30px 7px 30px 7px;
  --r-card:      32px 8px 32px 8px;
  --r-card-lg:   40px 10px 40px 10px;
  --r-panel:     44px 12px 44px 12px;

  /* Uniform fallback for tables / data-heavy contexts */
  --r-uniform:   8px;
}

/* --------------------------------------------------------------------------
   2.5  Shadow Tokens
   -------------------------------------------------------------------------- */

:root {
  --shadow-none: none;

  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:    0 3px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg:    0 24px 60px -30px rgba(0, 0, 0, 0.45);
  --shadow-xl:    0 40px 90px rgba(0, 0, 0, 0.55);
  --shadow-sheet: 9px 9px 0 0 var(--surface), 9px 9px 0 1px var(--border);
}

[data-theme="light"] {
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md:    0 3px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg:    0 24px 60px -30px rgba(0, 0, 0, 0.12);
  --shadow-xl:    0 40px 90px rgba(0, 0, 0, 0.18);
}

/* --------------------------------------------------------------------------
   2.6  Z-Index Scale
   -------------------------------------------------------------------------- */

:root {
  --z-base:     0;
  --z-dropdown: 40;
  --z-sticky:   50;
  --z-progress: 60;
  --z-overlay:  90;
  --z-modal:    100;
}

/* --------------------------------------------------------------------------
   2.7  Motion Tokens
   -------------------------------------------------------------------------- */

:root {
  /* ── Durations ── */
  --duration-instant: 0.1s;
  --duration-fast:    0.15s;
  --duration-normal:  0.25s;
  --duration-slow:    0.35s;
  --duration-glacial: 0.6s;

  /* ── Easings ── */
  --ease-default: ease;
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Keyframe animations ── */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(22px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes slide-down {
  from { max-height: 0; opacity: 0; }
  to   { max-height: 500px; opacity: 1; }
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --------------------------------------------------------------------------
   2.8  Border & Outline Tokens
   -------------------------------------------------------------------------- */

:root {
  --border-width:        1px;
  --border-width-accent: 2px;
  --focus-ring-width:   2px;
  --focus-ring-offset:  2px;
  --focus-ring-color:   var(--accent-primary);
}

/* --------------------------------------------------------------------------
   2.9  Glow Tokens (retained from cyberpunk — optional in shared system)
   -------------------------------------------------------------------------- */

:root {
  --glow-subtle:       0 0 6px var(--accent-primary)44;
  --glow-standard:     0 0 10px var(--accent-primary)66, 0 0 30px var(--accent-primary)22;
  --glow-intense:      0 0 16px var(--accent-primary)88, 0 0 40px var(--accent-primary)33;
  --glow-text-subtle:  0 0 6px var(--accent-primary)66;
  --glow-text-standard:0 0 8px var(--accent-primary)88, 0 0 20px var(--accent-primary)44;
}

[data-theme="light"] {
  --glow-subtle:       0 0 4px var(--accent-primary)33;
  --glow-standard:     0 0 6px var(--accent-primary)44;
  --glow-intense:      0 0 10px var(--accent-primary)55;
  --glow-text-subtle:  0 0 4px var(--accent-primary)44;
  --glow-text-standard:0 0 6px var(--accent-primary)55;
}

/* --------------------------------------------------------------------------
   2.10  Clip-Path Tokens (retained from cyberpunk — optional)
   -------------------------------------------------------------------------- */

:root {
  --clip-card:   polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  --clip-header: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
  --clip-btn-lg: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
  --clip-btn-sm: polygon(0 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%);
  --clip-thumb:  polygon(0 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%);
  --clip-none:   none;
}