/* Webfonts: IBM Plex Sans + IBM Plex Mono, served from Google Fonts.
   @import must stay first — CSS ignores @import after any other rule. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

/* --- colors --- */
:root,
[data-theme="dark"] {
  /* base ramp — dark is the primary theme */
  --ink-950: #0b0c0e;
  --ink-900: #14161a;
  --ink-800: #1a1d22;
  --ink-700: #2a2e35;
  --ink-500: #6e767f;
  --ink-300: #9aa3ac;
  --ink-200: #c6d0da;
  --ink-050: #e8eaed;
  --paper-050: #fafaf7;

  --lime-400: #c6f24e;
  --lime-300: #dcfb8a;
  --lime-700: #4e6b00;

  --danger: #ff6b5a;
  --ok: #7be0a5;

  /* semantic aliases */
  --surface-page: var(--ink-950);
  --surface-raised: var(--ink-800);
  --surface-sunken: var(--ink-900);
  --border-hairline: var(--ink-700);
  --border-quiet: #1e2126;

  --text-strong: var(--ink-050);
  --text-body: var(--ink-200);
  --text-muted: var(--ink-500);
  --text-inverse: var(--ink-950);

  --accent: var(--lime-400);
  --accent-hover: var(--lime-300);
  --accent-ink: var(--ink-950);
  /* accent used as TEXT — must stay readable on the page surface */
  --accent-text: var(--lime-400);
  --link: var(--lime-400);
  --link-hover: var(--lime-300);

  --focus-ring: var(--lime-400);
  --shadow-lift: none;
}

[data-theme="light"] {
  --surface-page: var(--paper-050);
  --surface-raised: #ffffff;
  --surface-sunken: #f1f1ec;
  --border-hairline: #d6d6ce;
  --border-quiet: #e5e5de;

  --text-strong: var(--ink-950);
  --text-body: #33373d;
  --text-muted: #767c84;
  --text-inverse: var(--paper-050);

  --accent: var(--lime-400);
  --accent-hover: var(--lime-300);
  --accent-ink: var(--ink-950);
  --accent-text: var(--lime-700);
  --link: var(--lime-700);
  --link-hover: var(--ink-950);

  --focus-ring: var(--lime-700);
  --shadow-lift: 0 1px 2px rgba(11, 12, 14, 0.06);
}

/* --- typography --- */
:root {
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* display scale — clamp() so it works desktop → mobile */
  --text-display: clamp(38px, 6vw, 72px);
  --text-h1: clamp(32px, 4.4vw, 48px);
  --text-h2: clamp(24px, 3vw, 32px);
  --text-h3: 20px;
  --text-body-lg: 18px;
  --text-body-md: 16px;
  --text-body-sm: 14px;
  --text-label: 12px;
  --text-stat: clamp(32px, 4vw, 40px);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --leading-tight: 1.02;
  --leading-snug: 1.25;
  --leading-body: 1.6;

  --tracking-display: -0.03em;
  --tracking-tight: -0.02em;
  --tracking-label: 0.16em;
}

/* --- spacing --- */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --radius-sharp: 2px;
  --radius-soft: 6px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --border-width: 1px;
  --content-max: 1040px;
  --page-gutter: clamp(20px, 5vw, 40px);
  --section-gap: clamp(48px, 8vw, 64px);
}

/* --- motion --- */
:root {
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.3, 1);
  --transition-ui: color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
  --transition-theme: background-color var(--dur-slow) var(--ease-out),
    color var(--dur-slow) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}