/* GENERATED by dev/build-tokens.mjs from tokens/tokens.json (v1.0.0).
   DO NOT EDIT BY HAND: edit tokens.json and re-run the script.

   Dark is the default. Light applies when <html data-theme="light"> is set
   (theme-boot.js restores a saved choice from localStorage "optseo-theme"),
   or when the system prefers light and no choice is saved. The light values
   are declared twice for that reason; both blocks are generated, so they
   cannot drift apart. */

:root {
  color-scheme: dark;

  /* font */
  --opt-font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --opt-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* fontWeight */
  --opt-fw-regular: 400;
  --opt-fw-medium: 500;
  --opt-fw-semibold: 600;
  --opt-fw-bold: 700;

  /* fontSize */
  --opt-fs-xs: 12px;
  --opt-fs-sm: 13.5px;
  --opt-fs-md: 15px;
  --opt-fs-base: 16px;
  --opt-fs-lg: 18px;
  --opt-fs-xl: 20px;
  --opt-fs-2xl: clamp(1.6rem, 1.25rem + 1.3vw, 2.1rem);
  --opt-fs-3xl: clamp(2.4rem, 1.5rem + 3.4vw, 3.75rem);

  /* lineHeight */
  --opt-lh-tight: 1.1;
  --opt-lh-snug: 1.3;
  --opt-lh-normal: 1.5;
  --opt-lh-relaxed: 1.65;

  /* letterSpacing */
  --opt-ls-tight: -0.035em;
  --opt-ls-snug: -0.02em;
  --opt-ls-normal: -0.005em;
  --opt-ls-wide: 0.08em;

  /* space */
  --opt-space-1: 0.25rem;
  --opt-space-2: 0.5rem;
  --opt-space-3: 0.75rem;
  --opt-space-4: 1rem;
  --opt-space-5: 1.5rem;
  --opt-space-6: 2rem;
  --opt-space-7: 3rem;
  --opt-space-8: 4.5rem;
  --opt-space-gutter: 32px;
  --opt-space-gutter-tablet: 24px;
  --opt-space-gutter-phone: 16px;

  /* radius */
  --opt-radius-sm: 8px;
  --opt-radius-md: 12px;
  --opt-radius-lg: 16px;
  --opt-radius-xl: 20px;
  --opt-radius-pill: 999px;

  /* duration */
  --opt-duration-fast: 140ms;
  --opt-duration-normal: 240ms;
  --opt-duration-slow: 420ms;

  /* easing */
  --opt-ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* color (dark, default) */
  --opt-bg: #050608;
  --opt-bg-alt: #090b0e;
  --opt-surface: #0d1013;
  --opt-surface-raised: #11151a;
  --opt-surface-inset: #161b21;
  --opt-border: #222a31;
  --opt-border-soft: #171c22;
  --opt-border-input: #2c3640;
  --opt-text-bright: #f7fafb;
  --opt-text: #eef2f4;
  --opt-text-soft: #c7d0d5;
  --opt-text-muted: #a9b4ba;
  --opt-text-dim: #8d999f;
  --opt-accent: #bfe9f5;
  --opt-accent-strong: #8fd9ee;
  --opt-accent-soft: rgba(191, 233, 245, 0.07);
  --opt-accent-line: rgba(191, 233, 245, 0.35);
  --opt-good: #45dd9b;
  --opt-good-bg: rgba(69, 221, 155, 0.11);
  --opt-good-line: rgba(69, 221, 155, 0.38);
  --opt-warn: #ffbd5c;
  --opt-warn-bg: rgba(255, 189, 92, 0.11);
  --opt-warn-line: rgba(255, 189, 92, 0.38);
  --opt-bad: #ff7a73;
  --opt-bad-bg: rgba(255, 122, 115, 0.11);
  --opt-bad-line: rgba(255, 122, 115, 0.38);
  --opt-btn-bg: #f4f7f8;
  --opt-btn-bg-hover: #ffffff;
  --opt-btn-ink: #050608;
  --opt-btn-glow: rgba(191, 233, 245, 0.45);
  --opt-nav-bg: rgba(5, 6, 8, 0.82);
  --opt-shadow-card: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --opt-bg: #f6f8f9;
    --opt-bg-alt: #eef2f4;
    --opt-surface: #ffffff;
    --opt-surface-raised: #ffffff;
    --opt-surface-inset: #f2f5f7;
    --opt-border: #d8e0e5;
    --opt-border-soft: #e3e9ed;
    --opt-border-input: #c3ced5;
    --opt-text-bright: #030405;
    --opt-text: #0c1317;
    --opt-text-soft: #26333a;
    --opt-text-muted: #3e4c54;
    --opt-text-dim: #56646c;
    --opt-accent: #0a6a82;
    --opt-accent-strong: #08586c;
    --opt-accent-soft: rgba(10, 106, 130, 0.07);
    --opt-accent-line: rgba(10, 106, 130, 0.35);
    --opt-good: #0b7148;
    --opt-good-bg: #e6f6ee;
    --opt-good-line: #9fd8bd;
    --opt-warn: #8a5000;
    --opt-warn-bg: #fdf1dc;
    --opt-warn-line: #efc98c;
    --opt-bad: #b8261f;
    --opt-bad-bg: #fdeceb;
    --opt-bad-line: #f1b1ad;
    --opt-btn-bg: #0b1114;
    --opt-btn-bg-hover: #000000;
    --opt-btn-ink: #ffffff;
    --opt-btn-glow: rgba(10, 106, 130, 0.35);
    --opt-nav-bg: rgba(246, 248, 249, 0.86);
    --opt-shadow-card: 0 20px 50px -28px rgba(12, 19, 23, 0.35);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --opt-bg: #f6f8f9;
  --opt-bg-alt: #eef2f4;
  --opt-surface: #ffffff;
  --opt-surface-raised: #ffffff;
  --opt-surface-inset: #f2f5f7;
  --opt-border: #d8e0e5;
  --opt-border-soft: #e3e9ed;
  --opt-border-input: #c3ced5;
  --opt-text-bright: #030405;
  --opt-text: #0c1317;
  --opt-text-soft: #26333a;
  --opt-text-muted: #3e4c54;
  --opt-text-dim: #56646c;
  --opt-accent: #0a6a82;
  --opt-accent-strong: #08586c;
  --opt-accent-soft: rgba(10, 106, 130, 0.07);
  --opt-accent-line: rgba(10, 106, 130, 0.35);
  --opt-good: #0b7148;
  --opt-good-bg: #e6f6ee;
  --opt-good-line: #9fd8bd;
  --opt-warn: #8a5000;
  --opt-warn-bg: #fdf1dc;
  --opt-warn-line: #efc98c;
  --opt-bad: #b8261f;
  --opt-bad-bg: #fdeceb;
  --opt-bad-line: #f1b1ad;
  --opt-btn-bg: #0b1114;
  --opt-btn-bg-hover: #000000;
  --opt-btn-ink: #ffffff;
  --opt-btn-glow: rgba(10, 106, 130, 0.35);
  --opt-nav-bg: rgba(246, 248, 249, 0.86);
  --opt-shadow-card: 0 20px 50px -28px rgba(12, 19, 23, 0.35);
}