:root {

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:
    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;


  --font-variant-numeric-data: tabular-nums;


  --text-display-1-size: clamp(2.5rem, 5vw, 4rem);
  --text-display-1-line: 1.05;
  --text-display-1-tracking: -0.02em;
  --text-display-1-weight: 700;
  --text-display-1-family: var(--font-display);

  --text-display-2-size: clamp(2rem, 3.5vw, 2.75rem);
  --text-display-2-line: 1.1;
  --text-display-2-tracking: -0.015em;
  --text-display-2-weight: 700;
  --text-display-2-family: var(--font-display);

  --text-h1-size: 2rem;
  --text-h1-line: 1.2;
  --text-h1-tracking: 0em;
  --text-h1-weight: 500;
  --text-h1-family: var(--font-display);

  --text-h2-size: 1.5rem;
  --text-h2-line: 1.3;
  --text-h2-tracking: 0em;
  --text-h2-weight: 500;
  --text-h2-family: var(--font-display);

  --text-h3-size: 1.25rem;
  --text-h3-line: 1.4;
  --text-h3-tracking: 0em;
  --text-h3-weight: 500;
  --text-h3-family: var(--font-display);

  --text-body-size: 0.9375rem;
  --text-body-line: 1.6;
  --text-body-tracking: 0em;
  --text-body-weight: 400;
  --text-body-family: var(--font-body);

  --text-small-size: 0.8125rem;
  --text-small-line: 1.5;
  --text-small-tracking: 0em;
  --text-small-weight: 400;
  --text-small-family: var(--font-body);

  --text-micro-size: 0.6875rem;
  --text-micro-line: 1.4;
  --text-micro-tracking: 0em;
  --text-micro-weight: 400;
  --text-micro-family: var(--font-body);

  --text-data-lg-size: 1.75rem;
  --text-data-lg-line: 1.1;
  --text-data-lg-tracking: 0em;
  --text-data-lg-weight: 400;
  --text-data-lg-family: var(--font-mono);

  --text-data-size: 1rem;
  --text-data-line: 1.4;
  --text-data-tracking: 0em;
  --text-data-weight: 400;
  --text-data-family: var(--font-mono);

  --text-data-sm-size: 0.8125rem;
  --text-data-sm-line: 1.4;
  --text-data-sm-tracking: 0em;
  --text-data-sm-weight: 400;
  --text-data-sm-family: var(--font-mono);


  --text-label-size: 0.6875rem;
  --text-label-line: 1;
  --text-label-tracking: 0.12em;
  --text-label-weight: 600;
  --text-label-family: var(--font-body);
  --text-label-transform: uppercase;
  --text-label-color: var(--ink-3);


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


  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 9999px;


  --hairline-width: 1px;




  --grid-size: 32px;
}

:root {
  --void: #f4f7fa;
  --surface: #ffffff;
  --raised: #ffffff;
  --overlay: #ffffff;

  --hairline: #e2e8f0;
  --edge: #758faf;

  --ink: #0b1017;
  --ink-2: #475569;
  --ink-3: #627289;

  --accent: #0e7490;
  --accent-hi: #059ab4;
  --accent-dim: #cffafe;
  --signal: #6d28d9;

  --ok: #047857;
  --warn: #b45309;
  --danger: #b91c1c;


  --glow: 0 0 0 1px rgba(5, 154, 180, 0.25);
  --grid: rgba(11, 16, 23, 0.045);
}

@media (prefers-color-scheme: dark) {

  :root:not([data-theme="light"]) {
    --void: #05070a;
    --surface: #0a0e14;
    --raised: #10151d;
    --overlay: #161c26;

    --hairline: #1c2430;
    --edge: #546b85;

    --ink: #e6edf5;
    --ink-2: #93a1b4;
    --ink-3: #76859a;

    --accent: #22d3ee;
    --accent-hi: #67e8f9;
    --accent-dim: #0e3a44;
    --signal: #a78bfa;

    --ok: #34d399;
    --warn: #fbbf24;
    --danger: #f87171;

    --glow: 0 0 24px rgba(34, 211, 238, 0.18), 0 0 0 1px rgba(34, 211, 238, 0.35);
    --grid: rgba(230, 237, 245, 0.035);
  }
}

:root[data-theme="dark"] {
  --void: #05070a;
  --surface: #0a0e14;
  --raised: #10151d;
  --overlay: #161c26;

  --hairline: #1c2430;
  --edge: #546b85;

  --ink: #e6edf5;
  --ink-2: #93a1b4;
  --ink-3: #76859a;

  --accent: #22d3ee;
  --accent-hi: #67e8f9;
  --accent-dim: #0e3a44;
  --signal: #a78bfa;

  --ok: #34d399;
  --warn: #fbbf24;
  --danger: #f87171;

  --glow: 0 0 24px rgba(34, 211, 238, 0.18), 0 0 0 1px rgba(34, 211, 238, 0.35);
  --grid: rgba(230, 237, 245, 0.035);
}