/* Atomic Framework v2.3.1 — 118 tokens
   Generated by build_tokens.py. Edit the JSON, not this file.

   Root: html{font-size:100%}, so 1rem = 16px. Every clamp() below
   is computed against that root; keep it when overriding the page.

   Fluid range 360px to 1440px. Custom properties cannot be used inside
   @media queries, so any layout breakpoint must hardcode these. */

html{font-size:100%;}

:root{
  /* --- Colors --- */
  --primary: oklch(25% 0 0);
  --secondary: oklch(45% 0 0);
  --accent: oklch(60% 0 0);
  --text-color: oklch(32% 0.006 264);
  --heading-color: oklch(15% 0.005 264);
  --bg-body: oklch(100% 0 0);
  --bg-surface: oklch(97% 0.003 264);
  --border-color: oklch(87% 0.005 264);
  --success: oklch(50% 0.13 150);
  --warning: oklch(64% 0.15 70);
  --error: oklch(53% 0.19 27);
  --info: oklch(52% 0.13 245);
  --on-success: oklch(98% 0 0);
  --on-warning: oklch(15% 0.005 264);
  --on-error: oklch(98% 0 0);
  --on-info: oklch(98% 0 0);
  --on-accent: oklch(15% 0.005 264);
  --muted-foreground: color-mix(in srgb, var(--text-color) 75%, var(--bg-body) 25%);
  --surface-muted: color-mix(in srgb, var(--border-color) 50%, var(--bg-surface) 50%);
  --primary-hover: color-mix(in srgb, var(--primary) 85%, black);
  --secondary-hover: color-mix(in srgb, var(--secondary) 85%, black);
  --accent-hover: color-mix(in srgb, var(--accent) 85%, black);
  --on-primary: var(--bg-body);
  --on-secondary: var(--bg-body);
  --scrim-strong: oklch(12% 0.01 264 / 0.88);
  --scrim-mid: oklch(12% 0.01 264 / 0.62);
  --scrim-soft: oklch(12% 0.01 264 / 0.15);
  --on-scrim: oklch(98% 0 0);

  /* --- Typography --- */
  --font-body: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-heading: inherit;
  --font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  --text-xs: clamp(0.7325rem, calc(0.0118vw + 0.7301rem), 0.7406rem);
  --text-s: clamp(0.8331rem, calc(0vw + 0.8333rem), 0.8331rem);
  --text-m: clamp(0.9375rem, calc(0.0926vw + 0.9167rem), 1rem);
  --text-l: clamp(1.055rem, calc(0.2153vw + 1.0063rem), 1.2rem);
  --text-xl: clamp(1.1681rem, calc(0.3183vw + 1.0963rem), 1.3825rem);
  --text-2xl: clamp(1.2869rem, calc(0.4261vw + 1.1908rem), 1.5744rem);
  --text-3xl: clamp(1.4131rem, calc(0.5428vw + 1.2908rem), 1.7794rem);
  --text-4xl: clamp(1.5475rem, calc(0.6707vw + 1.3969rem), 2.0006rem);
  --text-line-height: calc(8px + 2ex);
  --heading-line-height: calc(4px + 2ex);
  --text-font-weight: 400;
  --heading-font-weight: 600;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --line-height-tight: 1;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-wide: 0.05em;
  --measure: 65ch;
  --h1: clamp(1.6513rem, calc(0.703vw + 1.4928rem), 2.1256rem);
  --h2: clamp(1.5069rem, calc(0.568vw + 1.3793rem), 1.8906rem);
  --h3: clamp(1.3725rem, calc(0.4448vw + 1.2724rem), 1.6725rem);
  --h4: clamp(1.2456rem, calc(0.331vw + 1.1714rem), 1.4694rem);
  --h5: clamp(1.125rem, calc(0.2222vw + 1.075rem), 1.275rem);
  --h6: clamp(1rem, calc(0.0926vw + 0.9792rem), 1.0625rem);

  /* --- Spacing --- */
  --space-xs: clamp(0.64rem, calc(0.3481vw + 0.5625rem), 0.875rem);
  --space-s: clamp(0.8rem, calc(0.6481vw + 0.6542rem), 1.2375rem);
  --space-m: clamp(1rem, calc(1.1111vw + 0.75rem), 1.75rem);
  --space-l: clamp(1.25rem, calc(1.8148vw + 0.8417rem), 2.475rem);
  --space-xl: clamp(1.5625rem, calc(2.8704vw + 0.9167rem), 3.5rem);
  --space-2xl: clamp(1.9531rem, calc(4.4361vw + 0.955rem), 4.9475rem);
  --space-3xl: clamp(2.4413rem, calc(6.7537vw + 0.9217rem), 7rem);
  --space-4xl: clamp(3.0519rem, calc(10.1454vw + 0.7692rem), 9.9rem);
  --space-2xs: calc(var(--space-xs) * 0.5);
  --space-3xs: calc(var(--space-xs) * 0.25);

  /* --- Layout --- */
  --min-screen-width: 360px;
  --max-screen-width: 1440px;
  --container-width: 1280px;
  --max-width: 960px;
  --max-width-m: 720px;
  --max-width-s: 560px;
  --icon-s: 1rem;
  --icon-m: 1.375rem;
  --icon-l: 1.625rem;
  --avatar-s: 2.25rem;
  --avatar-m: 2.625rem;
  --avatar-l: 3.625rem;
  --logo-height: 2.5rem;
  --aspect-square: 1 / 1;
  --aspect-landscape: 16 / 10;
  --aspect-portrait: 3 / 4;
  --aspect-wide: 21 / 9;
  --container-gutter: var(--space-m);
  --section-space-s: var(--space-l);
  --section-space-m: var(--space-xl);

  /* --- Effects --- */
  --radius-none: 0;
  --radius-xs: clamp(0.1875rem, calc(0.0926vw + 0.1667rem), 0.25rem);
  --radius-s: clamp(0.375rem, calc(0.1852vw + 0.3333rem), 0.5rem);
  --radius-m: clamp(0.5rem, calc(0.3704vw + 0.4167rem), 0.75rem);
  --radius-l: clamp(0.75rem, calc(0.3704vw + 0.6667rem), 1rem);
  --radius-xl: clamp(1rem, calc(0.3704vw + 0.9167rem), 1.25rem);
  --radius-full: 9999px;
  --shadow-color: var(--heading-color);
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-tooltip: 700;
  --focus-ring-width: 0.125rem;
  --focus-ring-offset: 0.125rem;
  --border-width: 1px;
  --border-width-thick: 2px;
  --duration-fast: 100ms;
  --duration-base: 200ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --opacity-disabled: 0.5;
  --opacity-muted: 0.7;
  --z-toast: 600;
  --shadow-xs: 0 1px 2px color-mix(in srgb, var(--shadow-color) 8%, transparent);
  --shadow-s: 0 2px 4px color-mix(in srgb, var(--shadow-color) 10%, transparent);
  --shadow-m: 0 4px 8px color-mix(in srgb, var(--shadow-color) 12%, transparent);
  --shadow-l: 0 8px 16px color-mix(in srgb, var(--shadow-color) 15%, transparent);
  --shadow-xl: 0 16px 32px color-mix(in srgb, var(--shadow-color) 18%, transparent);
  --focus-ring-color: var(--heading-color);
  --focus-ring-contrast: var(--bg-body);
  --focus-ring-style: solid;
}

[data-theme="dark"]{
  --primary: oklch(80% 0 0);
  --secondary: oklch(65% 0 0);
  --accent: oklch(55% 0 0);
  --text-color: oklch(75% 0.006 264);
  --heading-color: oklch(93% 0.005 264);
  --bg-body: oklch(11% 0.003 264);
  --bg-surface: oklch(16% 0.003 264);
  --border-color: oklch(24% 0.005 264);
  --on-accent: oklch(98% 0 0);
  --muted-foreground: color-mix(in srgb, var(--text-color) 75%, var(--bg-body) 25%);
  --surface-muted: color-mix(in srgb, var(--border-color) 50%, var(--bg-surface) 50%);
  --primary-hover: color-mix(in srgb, var(--primary) 85%, white);
  --secondary-hover: color-mix(in srgb, var(--secondary) 85%, white);
  --accent-hover: color-mix(in srgb, var(--accent) 85%, white);
  --shadow-color: oklch(0% 0 0);
  --shadow-xs: 0 1px 3px oklch(0% 0 0 / 0.25);
  --shadow-s: 0 2px 6px oklch(0% 0 0 / 0.30);
  --shadow-m: 0 4px 12px oklch(0% 0 0 / 0.40);
  --shadow-l: 0 8px 24px oklch(0% 0 0 / 0.50);
  --shadow-xl: 0 16px 40px oklch(0% 0 0 / 0.60);
  --focus-ring-color: oklch(93% 0.005 264);
  --on-primary: oklch(15% 0.005 264);
  --on-secondary: oklch(15% 0.005 264);
  --focus-ring-contrast: var(--bg-body);
  --scrim-strong: oklch(6% 0.01 264 / 0.92);
  --scrim-mid: oklch(6% 0.01 264 / 0.72);
  --scrim-soft: oklch(6% 0.01 264 / 0.25);
  --on-scrim: oklch(98% 0 0);
  --success: oklch(74% 0.15 150);
  --warning: oklch(80% 0.14 75);
  --error: oklch(72% 0.16 25);
  --info: oklch(74% 0.12 245);
  --on-success: oklch(15% 0.005 264);
  --on-warning: oklch(15% 0.005 264);
  --on-error: oklch(15% 0.005 264);
  --on-info: oklch(15% 0.005 264);
}