@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Ink scale (dark surfaces) ── */
  --color-ink-0:   #000000;
  --color-ink-50:  #050506;
  --color-ink-100: #0A0A0C;
  --color-ink-200: #121215;
  --color-ink-300: #1C1C20;
  --color-ink-400: #2A2A30;
  --color-ink-500: #3A3A42;
  --color-ink-600: #5A5A62;
  --color-ink-700: #7A7A82;
  --color-ink-800: #AEAEB6;
  --color-ink-900: #FFFFFF;

  /* ── Paper scale (light surfaces) ── */
  --color-paper-0:   #FFFFFF;
  --color-paper-50:  #FAFAFA;
  --color-paper-100: #F2F2F3;
  --color-paper-200: #E5E5E7;
  --color-paper-300: #D1D1D4;

  /* ── Semantic ── */
  --surface-primary:   #000000;
  --surface-secondary: #050506;
  --surface-elevated:  #0A0A0C;
  --surface-inverse:   #FFFFFF;
  --border-hairline:   #1C1C20;
  --border-divider:    #2A2A30;
  --text-primary:      #FFFFFF;
  --text-secondary:    #AEAEB6;
  --text-tertiary:     #7A7A82;
  --text-quiet:        #5A5A62;

  /* ── Typography ── */
  --font-sans:    Inter, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, 'SF Mono', Consolas, monospace;
  --font-display: Inter, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  /* Weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;

  /* Tracking */
  --tracking-tight:   -0.04em;
  --tracking-snug:    -0.02em;
  --tracking-normal:  -0.005em;
  --tracking-wide:     0.12em;
  --tracking-wider:    0.18em;
  --tracking-widest:   0.22em;

  /* ── Type scale ── */
  --text-display-size: 120px; --text-display-lh: 1.05;
  --text-h1-size:       72px; --text-h1-lh:       1.05;
  --text-h2-size:       48px; --text-h2-lh:       1.2;
  --text-h3-size:       32px; --text-h3-lh:       1.2;
  --text-h4-size:       22px; --text-h4-lh:       1.2;
  --text-lede-size:     20px; --text-lede-lh:     1.4;
  --text-body-size:     16px; --text-body-lh:     1.55;
  --text-small-size:    14px; --text-small-lh:    1.4;
  --text-label-size:    12px; --text-label-lh:    1.2;
  --text-eyebrow-size:  11px; --text-eyebrow-lh:  1.2;
  --text-micro-size:    10px; --text-micro-lh:    1.2;

  /* ── Spacing (4px base) ── */
  --sp-2:    2px;   --sp-4:    4px;   --sp-8:    8px;
  --sp-12:  12px;   --sp-16:  16px;   --sp-20:  20px;
  --sp-24:  24px;   --sp-32:  32px;   --sp-40:  40px;
  --sp-48:  48px;   --sp-56:  56px;   --sp-64:  64px;
  --sp-80:  80px;   --sp-96:  96px;   --sp-128:128px;
  --sp-160:160px;  --sp-192:192px;   --sp-256:256px;

  /* ── Border radius (default: none) ── */
  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:  12px;

  /* ── Borders ── */
  --border-hairline-w: 0.5px;
  --border-thin-w:     1px;
  --border-regular-w:  1.5px;

  /* ── Shadows (no blur) ── */
  --shadow-card:  0 0 0 0.5px rgba(255,255,255,0.06) inset;
  --shadow-panel: 0 1px 0 rgba(255,255,255,0.04) inset,
                  0 0 0 0.5px rgba(255,255,255,0.06) inset;
  --shadow-focus: 0 0 0 2px #000000, 0 0 0 3px #FFFFFF;

  /* ── Motion ── */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
  --ease:     cubic-bezier(0.2, 0, 0, 1);

  /* ── Grid ── */
  --grid-cols:   12;
  --grid-gutter: 32px;
  --grid-margin: 64px;
}

[data-theme="light"] {
  --surface-primary:   #FFFFFF;
  --surface-secondary: #FAFAFA;
  --surface-elevated:  #F2F2F3;
  --surface-inverse:   #000000;
  --border-hairline:   #D1D1D4;
  --border-divider:    #E5E5E7;
  --text-primary:      #000000;
  --text-secondary:    #3A3A42;
  --text-tertiary:     #5A5A62;
  --text-quiet:        #7A7A82;
}