/*
 * Lumen Design Tokens
 * High-contrast, sharp-edged site palette for balanced light and dark modes.
 */

:root {
  --canvas: #f7f6f1;
  --ink: #171918;
  --stone: #d8d4c8;
  --slate: #555f5b;
  --accent: #0b6f6a;
  --accent-hover: #084f4b;
  --accent-contrast: #ffffff;
  --focus-ring: #c45a1a;
  --glass: rgba(247, 246, 241, 0.86);
  --glass-border: rgba(23, 25, 24, 0.14);

  --surface-base: var(--canvas);
  --surface-raised: #ffffff;
  --surface-muted: #eeece4;
  --surface-floating: var(--glass);
  --surface-inset: #e9e6dc;

  --font-display: "Outfit", "Inter", "Suisse Int'l", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Soehne", "Suisse Int'l", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", "Cascadia Code", monospace;

  --text-hero: 4.25rem;
  --text-h1: 2.85rem;
  --text-h2: 1.85rem;
  --text-h3: 1.25rem;
  --text-body: 1rem;
  --text-caption: 0.875rem;
  --text-micro: 0.75rem;

  --leading-hero: 0.98;
  --leading-h1: 1.08;
  --leading-h2: 1.18;
  --leading-h3: 1.3;
  --leading-body: 1.65;
  --leading-caption: 1.45;
  --leading-micro: 1.35;

  --tracking-hero: -0.035em;
  --tracking-h1: -0.025em;
  --tracking-h2: -0.015em;
  --tracking-h3: -0.01em;
  --tracking-body: 0;
  --tracking-caption: 0;
  --tracking-micro: 0;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;
  --space-10: 192px;

  --grid-columns: 12;
  --grid-gutter: 24px;
  --container-max: 1440px;
  --container-padding: var(--space-4);

  --radius-sharp: 0;
  --radius-soft: 2px;
  --radius-pill: 999px;

  --ease-instant: ease-out;
  --ease-swift: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-dramatic: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-instant: 100ms;
  --dur-swift: 180ms;
  --dur-smooth: 320ms;
  --dur-dramatic: 640ms;

  --shadow-subtle: 0 1px 2px rgba(23, 25, 24, 0.06), 0 8px 28px rgba(23, 25, 24, 0.07);
  --shadow-medium: 0 2px 3px rgba(23, 25, 24, 0.08), 0 18px 48px rgba(23, 25, 24, 0.11);
  --shadow-strong: 0 4px 8px rgba(23, 25, 24, 0.12), 0 28px 72px rgba(23, 25, 24, 0.16);
}

[data-theme="dark"],
[data-md-color-scheme="slate"] {
  --canvas: #101413;
  --ink: #f4f0e8;
  --stone: #38403c;
  --slate: #b4bdb7;
  --accent: #65d0c4;
  --accent-hover: #8ae0d8;
  --accent-contrast: #071110;
  --focus-ring: #f2b366;
  --glass: rgba(16, 20, 19, 0.88);
  --glass-border: rgba(244, 240, 232, 0.18);

  --surface-base: var(--canvas);
  --surface-raised: #171d1b;
  --surface-muted: #202724;
  --surface-floating: var(--glass);
  --surface-inset: #0b0f0e;

  --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.26), 0 10px 30px rgba(0, 0, 0, 0.24);
  --shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.32), 0 18px 52px rgba(0, 0, 0, 0.34);
  --shadow-strong: 0 4px 8px rgba(0, 0, 0, 0.38), 0 28px 76px rgba(0, 0, 0, 0.42);
}

[data-theme="light"],
[data-md-color-scheme="default"] {
  --canvas: #f7f6f1;
  --ink: #171918;
  --stone: #d8d4c8;
  --slate: #555f5b;
  --accent: #0b6f6a;
  --accent-hover: #084f4b;
  --accent-contrast: #ffffff;
  --focus-ring: #c45a1a;
  --glass: rgba(247, 246, 241, 0.86);
  --glass-border: rgba(23, 25, 24, 0.14);

  --surface-base: var(--canvas);
  --surface-raised: #ffffff;
  --surface-muted: #eeece4;
  --surface-floating: var(--glass);
  --surface-inset: #e9e6dc;
}

@media screen and (max-width: 60rem) {
  :root {
    --text-hero: 3.25rem;
    --text-h1: 2.2rem;
    --text-h2: 1.55rem;
    --container-padding: var(--space-3);
  }
}

@media screen and (max-width: 37.5rem) {
  :root {
    --text-hero: 2.65rem;
    --text-h1: 1.85rem;
    --text-h2: 1.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-swift: 0ms;
    --dur-smooth: 0ms;
    --dur-dramatic: 0ms;
    --ease-swift: linear;
    --ease-smooth: linear;
    --ease-dramatic: linear;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}