/* =========================================================================
   Design Tokens — Kyle Welch personal site
   Philosophy: Swiss / International Typographic (+ editorial data accents)
   Generated via designer-skills /design-tokens.
   Semantic tokens only — components reference these, never raw values.
   Light + crisp near-black dark. Toggle via [data-theme]; system via media query.
   ========================================================================= */

:root {
  /* ---- Color: light ---- */
  --color-bg-primary:    #ffffff;
  --color-bg-secondary:  #f6f6f4;   /* panels / alt sections */
  --color-bg-tertiary:   #ececea;   /* wells / hover fills */
  --color-bg-inverse:    #111113;

  --color-text-primary:   #111113;
  --color-text-secondary: #44454a;
  --color-text-tertiary:  #686970;
  --color-text-inverse:   #f6f6f4;

  --color-border-primary:   #e3e3e0;  /* hairline rules */
  --color-border-secondary: #efefed;
  --color-border-strong:    #111113;  /* Swiss structural rules */
  --color-border-focus:     var(--color-accent-primary);

  --color-accent-primary:        #0f766e;  /* deep teal */
  --color-accent-primary-hover:  #115e56;
  --color-accent-primary-active: #0c4f49;
  --color-accent-soft:           #e7f1ef;  /* tinted background */

  --color-status-success: #0f766e;
  --color-status-warning: #b45309;
  --color-status-error:   #b91c1c;
  --color-status-info:    #1d4ed8;

  /* ---- Typography ---- */
  --font-family-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-family-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-family-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  --font-size-xs:   0.75rem;   /* 12 */
  --font-size-sm:   0.875rem;  /* 14 */
  --font-size-base: 1rem;      /* 16 */
  --font-size-md:   1.125rem;  /* 18 */
  --font-size-lg:   1.375rem;  /* 22 */
  --font-size-xl:   1.75rem;   /* 28 */
  --font-size-2xl:  2.375rem;  /* 38 */
  --font-size-3xl:  3.25rem;   /* 52 */
  --font-size-4xl:  clamp(3rem, 9vw, 5rem); /* hero display 48–80 */

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:   1.04;  /* display */
  --line-height-snug:    1.18;  /* headings */
  --line-height-normal:  1.6;   /* body */
  --line-height-relaxed: 1.75;

  --letter-spacing-tight:  -0.03em;  /* display */
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.14em;   /* all-caps labels */

  /* ---- Spacing (8px base) ---- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */
  --space-11: 10rem;    /* 160 */
  --space-12: 12rem;    /* 192 */

  /* ---- Layout ---- */
  --max-width-content: 68ch;
  --max-width-wide:    1100px;
  --max-width-page:    1100px;

  --border-radius-sm:   3px;   /* Swiss = minimal radius */
  --border-radius-md:   5px;
  --border-radius-lg:   8px;
  --border-radius-full: 999px;

  --shadow-sm:    none;        /* Swiss is flat — structure via rules */
  --shadow-md:    none;
  --shadow-lg:    none;
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-accent-primary) 35%, transparent);

  /* ---- Motion ---- */
  --duration-instant: 50ms;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;

  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-in:      cubic-bezier(0.4, 0, 1, 1);
  --easing-out:     cubic-bezier(0, 0, 0.2, 1);

  /* ---- Breakpoints (reference; media queries use literals) ---- */
  --breakpoint-sm:  375px;
  --breakpoint-md:  768px;
  --breakpoint-lg:  1024px;
  --breakpoint-xl:  1280px;
}

/* ============================ Dark: crisp near-black ============================ */
:root[data-theme="dark"] {
  --color-bg-primary:    #0d0d0f;
  --color-bg-secondary:  #151518;
  --color-bg-tertiary:   #1e1e22;
  --color-bg-inverse:    #f6f6f4;

  --color-text-primary:   #f1f1f2;   /* off-white, not pure */
  --color-text-secondary: #b6b7bc;
  --color-text-tertiary:  #9a9ba1;
  --color-text-inverse:   #111113;

  --color-border-primary:   #2a2a2f;
  --color-border-secondary: #202024;
  --color-border-strong:    #f1f1f2;
  --color-border-focus:     var(--color-accent-primary);

  --color-accent-primary:        #2dd4bf;  /* lightened teal for AA on dark */
  --color-accent-primary-hover:  #5eead4;
  --color-accent-primary-active: #99f6e4;
  --color-accent-soft:           #10312e;

  --color-status-success: #2dd4bf;
  --color-status-warning: #f59e0b;
  --color-status-error:   #f87171;
  --color-status-info:    #60a5fa;

  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-accent-primary) 40%, transparent);
}

/* System preference, unless the user explicitly chose light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-primary:    #0d0d0f;
    --color-bg-secondary:  #151518;
    --color-bg-tertiary:   #1e1e22;
    --color-bg-inverse:    #f6f6f4;

    --color-text-primary:   #f1f1f2;
    --color-text-secondary: #b6b7bc;
    --color-text-tertiary:  #9a9ba1;
    --color-text-inverse:   #111113;

    --color-border-primary:   #2a2a2f;
    --color-border-secondary: #202024;
    --color-border-strong:    #f1f1f2;

    --color-accent-primary:        #2dd4bf;
    --color-accent-primary-hover:  #5eead4;
    --color-accent-primary-active: #99f6e4;
    --color-accent-soft:           #10312e;

    --color-status-error: #f87171;
  }
}