@layer tokens, base, components, utilities;

@layer tokens {

  @font-face {
    font-family: 'Geist';
    src: url('/assets/fonts/geist-variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Geist';
    src: url('/assets/fonts/geist-variable-italic.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: 'Geist Mono';
    src: url('/assets/fonts/geist-mono-variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

  :root {
    color-scheme: light dark;

    --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;

    --text-2xs: clamp(0.6875rem, 0.6771rem + 0.0463vw, 0.71875rem);
    --text-xs: clamp(0.75rem, 0.7292rem + 0.0926vw, 0.8125rem);
    --text-sm: clamp(0.875rem, 0.8542rem + 0.0926vw, 0.9375rem);
    --text-base: clamp(1rem, 0.9792rem + 0.0926vw, 1.0625rem);
    --text-md: clamp(1.0625rem, 1.0208rem + 0.1852vw, 1.1875rem);
    --text-lg: clamp(1.1875rem, 1.125rem + 0.2778vw, 1.375rem);
    --text-xl: clamp(1.375rem, 1.25rem + 0.5556vw, 1.75rem);
    --text-2xl: clamp(1.625rem, 1.4167rem + 0.9259vw, 2.25rem);
    --text-3xl: clamp(2rem, 1.6667rem + 1.4815vw, 3rem);
    --text-4xl: clamp(2.375rem, 1.8333rem + 2.4074vw, 4rem);
    --text-5xl: clamp(2.75rem, 2rem + 3.3333vw, 5rem);

    --text-hero: clamp(2rem, 1.5rem + 2.2222vw, 2.5rem);

    --leading-tight: 1.05;
    --leading-snug: 1.2;
    --leading-normal: 1.45;
    --leading-relaxed: 1.65;

    --tracking-display: -0.03em;
    --tracking-heading: -0.015em;
    --tracking-normal: 0em;
    --tracking-label: 0.06em;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-4xl: 8rem;

    --space-gutter: clamp(1.25rem, 0.8333rem + 1.8519vw, 2.5rem);
    --space-block: clamp(2.5rem, 1.8333rem + 2.963vw, 4.5rem);
    --space-section: clamp(3rem, 2.1667rem + 3.7037vw, 5.5rem);

    --container: 72rem;
    --container-wide: 80rem;
    --container-narrow: 46rem;
    --measure: 68ch;
    --measure-narrow: 46ch;

    --header-h: 4.5rem;

    --radius-control: 8px;
    --radius-surface: 16px;
    --radius-stage: 20px;
    --radius-tag: 999px;
    --radius-inline: 4px;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 400ms;
    --dur-reveal: 600ms;

    --focus-width: 2px;
    --focus-offset: 2px;

    --z-base: 0;
    --z-raised: 10;
    --z-sticky: 100;
    --z-header: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-skip: 600;

    --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 5.8 8 10.6l4.8-4.8' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  :root,
  :root[data-theme='light'] {
    --paper: #fafbfc;
    --paper-sunken: #eceef3;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-glass: rgb(250 251 253 / 0.85);

    --ink: #0f172a;
    --ink-muted: #475569;
    --ink-faint: #5b6a7f;
    --ink-inverse: #ffffff;

    --line: rgb(15 23 42 / 0.08);
    --line-strong: rgb(15 23 42 / 0.16);
    --border-control: #64748b;

    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-active: #1e40af;
    --accent-contrast: #ffffff;
    --accent-soft: #eef4ff;
    --accent-soft-ink: #1e40af;
    --accent-line: rgb(37 99 235 / 0.32);
    --accent-sheen: #3b74f0;

    --success: #047857;
    --success-soft: #ecfdf5;
    --warning: #b45309;
    --warning-soft: #fffbeb;
    --danger: #be123c;
    --danger-soft: #fef2f2;

    --shadow-xs: 0 1px 2px rgb(15 23 42 / 0.06);
    --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.05), 0 2px 8px -2px rgb(15 23 42 / 0.06);
    --shadow-md: 0 1px 2px rgb(15 23 42 / 0.04), 0 12px 24px -10px rgb(15 23 42 / 0.10);
    --shadow-lg: 0 1px 2px rgb(15 23 42 / 0.04), 0 20px 40px -15px rgb(15 23 42 / 0.13);
    --shadow-xl: 0 2px 4px rgb(15 23 42 / 0.04), 0 40px 72px -28px rgb(15 23 42 / 0.20);
    --shadow-accent: 0 10px 24px -10px rgb(37 99 235 / 0.50);

    --glow-primary: rgb(37 99 235 / 0.20);
    --grid-dot: rgb(15 23 42 / 0.10);
    --bg-grid: 28px;

    --bg-grid-mask:
      radial-gradient(112% 82% at 50% 8%,
        rgb(0 0 0 / 0.3) 0%,
        rgb(0 0 0 / 0.58) 40%,
        rgb(0 0 0 / 1) 84%);

    --bg-base: #f2f3f6;
    --bg-wash:
      radial-gradient(125% 90% at 50% 0%,
        rgb(255 255 255 / 0.35) 0%,
        rgb(255 255 255 / 0.18) 45%,
        rgb(255 255 255 / 0) 75%),
      radial-gradient(58% 45% at 85% 6%,
        rgb(37 99 235 / 0.055) 0%,
        rgb(37 99 235 / 0) 70%),
      radial-gradient(55% 45% at 8% 72%,
        rgb(37 99 235 / 0.045) 0%,
        rgb(37 99 235 / 0) 72%),
      radial-gradient(125% 105% at 50% 38%,
        rgb(15 23 42 / 0) 52%,
        rgb(15 23 42 / 0.055) 100%);

    --section-glow: rgb(37 99 235 / 0.055);

    --selection-bg: #dbeafe;
    --selection-ink: #1e3a8a;

    --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --icon-check-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='%231e40af' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
      --paper: #090d16;
      --paper-sunken: #05080f;
      --surface: #111a2b;
      --surface-raised: #16203a;
      --surface-glass: rgb(9 13 22 / 0.78);

      --ink: #e8edf5;
      --ink-muted: #a3b1c6;
      --ink-faint: #8496ae;
      --ink-inverse: #0b1120;

      --line: rgb(148 163 184 / 0.16);
      --line-strong: rgb(148 163 184 / 0.28);
      --border-control: #7c8ba1;

      --accent: #60a5fa;
      --accent-hover: #93c5fd;
      --accent-active: #bfdbfe;
      --accent-contrast: #06152b;
      --accent-soft: #17243d;
      --accent-soft-ink: #a8caff;
      --accent-line: rgb(96 165 250 / 0.38);
      --accent-sheen: #7db4fb;

      --success: #34d399;
      --success-soft: #0c2a20;
      --warning: #fbbf24;
      --warning-soft: #2b2110;
      --danger: #fb7185;
      --danger-soft: #2e1520;

      --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.45);
      --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.45), 0 2px 8px -2px rgb(0 0 0 / 0.40);
      --shadow-md: 0 1px 2px rgb(0 0 0 / 0.45), 0 12px 24px -10px rgb(0 0 0 / 0.55);
      --shadow-lg: 0 1px 2px rgb(0 0 0 / 0.45), 0 20px 40px -15px rgb(0 0 0 / 0.65);
      --shadow-xl: 0 2px 4px rgb(0 0 0 / 0.45), 0 40px 72px -28px rgb(0 0 0 / 0.75);
      --shadow-accent: 0 10px 24px -10px rgb(96 165 250 / 0.45);

      --glow-primary: rgb(37 99 235 / 0.26);
      --grid-dot: rgb(148 163 184 / 0.13);
      --bg-base: #060911;
      --bg-wash:
        radial-gradient(105% 75% at 50% -8%,
          rgb(37 99 235 / 0.20) 0%,
          rgb(30 58 138 / 0.16) 34%,
          rgb(23 36 61 / 0) 72%),
        radial-gradient(60% 45% at 90% 60%,
          rgb(56 89 168 / 0.09) 0%,
          rgb(56 89 168 / 0) 70%),
        radial-gradient(55% 42% at 3% 28%,
          rgb(37 99 235 / 0.05) 0%,
          rgb(37 99 235 / 0) 72%),
        radial-gradient(105% 95% at 50% 32%,
          rgb(1 2 6 / 0) 40%,
          rgb(1 2 6 / 0.82) 100%);
      --bg-grid-mask:
        radial-gradient(105% 80% at 50% 10%,
          rgb(0 0 0 / 0) 0%,
          rgb(0 0 0 / 0.5) 38%,
          rgb(0 0 0 / 1) 82%);
      --section-glow: rgb(59 130 246 / 0.10);

      --selection-bg: #1e3a8a;
      --selection-ink: #e8edf5;

      --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='%2306152b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      --icon-check-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='%23a8caff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
  }

  :root[data-theme='dark'] {
    --paper: #090d16;
    --paper-sunken: #05080f;
    --surface: #111a2b;
    --surface-raised: #16203a;
    --surface-glass: rgb(9 13 22 / 0.78);

    --ink: #e8edf5;
    --ink-muted: #a3b1c6;
    --ink-faint: #8496ae;
    --ink-inverse: #0b1120;

    --line: rgb(148 163 184 / 0.16);
    --line-strong: rgb(148 163 184 / 0.28);
    --border-control: #7c8ba1;

    --accent: #60a5fa;
    --accent-hover: #93c5fd;
    --accent-active: #bfdbfe;
    --accent-contrast: #06152b;
    --accent-soft: #17243d;
    --accent-soft-ink: #a8caff;
    --accent-line: rgb(96 165 250 / 0.38);
    --accent-sheen: #7db4fb;

    --success: #34d399;
    --success-soft: #0c2a20;
    --warning: #fbbf24;
    --warning-soft: #2b2110;
    --danger: #fb7185;
    --danger-soft: #2e1520;

    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.45);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.45), 0 2px 8px -2px rgb(0 0 0 / 0.40);
    --shadow-md: 0 1px 2px rgb(0 0 0 / 0.45), 0 12px 24px -10px rgb(0 0 0 / 0.55);
    --shadow-lg: 0 1px 2px rgb(0 0 0 / 0.45), 0 20px 40px -15px rgb(0 0 0 / 0.65);
    --shadow-xl: 0 2px 4px rgb(0 0 0 / 0.45), 0 40px 72px -28px rgb(0 0 0 / 0.75);
    --shadow-accent: 0 10px 24px -10px rgb(96 165 250 / 0.45);

    --glow-primary: rgb(37 99 235 / 0.26);
    --grid-dot: rgb(148 163 184 / 0.13);
    --bg-base: #060911;
    --bg-wash:
      radial-gradient(105% 75% at 50% -8%,
        rgb(37 99 235 / 0.20) 0%,
        rgb(30 58 138 / 0.16) 34%,
        rgb(23 36 61 / 0) 72%),
      radial-gradient(60% 45% at 90% 60%,
        rgb(56 89 168 / 0.09) 0%,
        rgb(56 89 168 / 0) 70%),
      radial-gradient(55% 42% at 3% 28%,
        rgb(37 99 235 / 0.05) 0%,
        rgb(37 99 235 / 0) 72%),
      radial-gradient(105% 95% at 50% 32%,
        rgb(1 2 6 / 0) 40%,
        rgb(1 2 6 / 0.82) 100%);
    --bg-grid-mask:
      radial-gradient(105% 80% at 50% 10%,
        rgb(0 0 0 / 0) 0%,
        rgb(0 0 0 / 0.5) 38%,
        rgb(0 0 0 / 1) 82%);
    --section-glow: rgb(59 130 246 / 0.10);

    --selection-bg: #1e3a8a;
    --selection-ink: #e8edf5;

    --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='%2306152b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      --icon-check-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='%23a8caff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  :root[data-theme='light'] { color-scheme: light; }
  :root[data-theme='dark'] { color-scheme: dark; }

  @media (max-width: 39.9375rem) {
    :root {
      --header-h: 6.25rem;
    }
  }
}