@layer tokens {
  :root {
    --ark-ink: #16181b;
    --ark-ink-soft: #24282d;
    --ark-paper: #efefec;
    --ark-gold: #d4a537;
    --ark-gold-deep: #a8801f;
    --ark-gold-ink: #7a5a12;
    --ark-muted: #8c9196;
    --ark-body: #3a3f45;
    --ark-body-soft: #565b61;
    --ark-line-dark: #2e3238;
    --ark-line-ui: #676c72;
    --ark-line: rgb(22 24 27 / 0.2);
    --ark-line-contrast: rgb(22 24 27 / 0.35);

    --font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
    --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;

    --text-100: 0.75rem;
    --text-200: 0.8125rem;
    --text-300: 0.875rem;
    --text-400: 0.96875rem;
    --text-500: 1.03125rem;
    --text-600: 1.09375rem;
    --text-700: 1.125rem;

    --text-h1: clamp(2.5rem, 5.9vw, 5.125rem);
    --text-h2-lg: clamp(2rem, 4.4vw, 3.75rem);
    --text-h2: clamp(1.75rem, 3.4vw, 2.75rem);
    --text-h2-sm: clamp(1.75rem, 3vw, 2.375rem);
    --text-h3: clamp(1.3125rem, 2.1vw, 1.625rem);
    --text-h4: clamp(1.1875rem, 1.9vw, 1.4375rem);

    --leading-flat: 1.02;
    --leading-tight: 1.12;
    --leading-normal: 1.6;
    --leading-loose: 1.7;

    --tracking-flat: -0.034em;
    --tracking-tight: -0.028em;
    --tracking-snug: -0.02em;
    --tracking-wide: 0.08em;
    --tracking-wider: 0.1em;
    --tracking-widest: 0.14em;

    --optical-inset: -0.04em;
    --optical-inset-lg: -0.058em;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.625rem;
    --space-4: 0.875rem;
    --space-5: 1rem;
    --space-6: 1.25rem;
    --space-7: 1.375rem;
    --space-8: 1.75rem;
    --space-9: 2rem;

    --edge: clamp(1.25rem, 5vw, 4.5rem);
    --shell-max: 77.5rem;
    --header-h: clamp(3.875rem, 8vw, 4.75rem);
    --section-y: clamp(3.5rem, 8vw, 5.5rem);
    --section-y-lg: clamp(4rem, 9vw, 6rem);
    --section-y-xl: clamp(4.5rem, 10vw, 7rem);
    --gap-head: clamp(2rem, 5vw, 3rem);
    --gap-split: clamp(1.5rem, 5vw, 6rem);

    --rule-weak: 1px;
    --rule-strong: 2px;

    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --dur-fast: 0.2s;
    --dur-mid: 0.45s;
    --dur-slow: 0.7s;

    --surface: var(--ark-paper);
    --on-surface: var(--ark-ink);
    --on-surface-muted: var(--ark-body-soft);
    --on-surface-body: var(--ark-body);
    --accent: var(--ark-gold-ink);
    --accent-strong: var(--ark-gold);
    --divider: var(--ark-line);
    --divider-strong: var(--ark-ink);
    --border-ui: var(--ark-line-contrast);
    --focus-ring: var(--ark-gold-ink);
    --on-accent: var(--ark-ink);
  }

  [data-surface="dark"] {
    --surface: var(--ark-ink);
    --on-surface: var(--ark-paper);
    --on-surface-muted: var(--ark-muted);
    --on-surface-body: var(--ark-muted);
    --accent: var(--ark-gold);
    --accent-strong: var(--ark-gold);
    --divider: var(--ark-line-dark);
    --divider-strong: var(--ark-gold);
    --border-ui: var(--ark-line-ui);
    --focus-ring: var(--ark-gold);
    --on-accent: var(--ark-ink);
  }

  [data-surface="contrast"] {
    --surface: var(--ark-ink-soft);
    --on-surface: var(--ark-paper);
    --on-surface-muted: var(--ark-muted);
    --on-surface-body: var(--ark-muted);
    --accent: var(--ark-gold);
    --accent-strong: var(--ark-gold);
    --divider: var(--ark-body);
    --divider-strong: var(--ark-gold);
    --border-ui: var(--ark-line-ui);
    --focus-ring: var(--ark-gold);
    --on-accent: var(--ark-ink);
  }

  [data-surface="light"] {
    --surface: var(--ark-paper);
    --on-surface: var(--ark-ink);
    --on-surface-muted: var(--ark-body-soft);
    --on-surface-body: var(--ark-body);
    --accent: var(--ark-gold-ink);
    --accent-strong: var(--ark-gold);
    --divider: var(--ark-line);
    --divider-strong: var(--ark-ink);
    --border-ui: var(--ark-line-contrast);
    --focus-ring: var(--ark-gold-ink);
    --on-accent: var(--ark-ink);
  }
}