/* Design tokens — vocabulary borrowed from IBM Carbon Design System
   (type scale, spacing scale, color values, motion curves).
   Layout/grid is NOT Carbon's — that's custom, see style.css. */

:root {
  /* ---- Color: Carbon Gray + Blue 60 accent ---- */
  --color-bg: #ffffff;
  --color-bg-subtle: #f4f4f4;      /* gray-10 */
  --color-bg-inverse: #161616;     /* gray-100 */
  --color-border: #e0e0e0;         /* gray-20 */
  --color-border-strong: #8d8d8d;  /* gray-50 */
  --color-text-primary: #161616;   /* gray-100 */
  --color-text-secondary: #525252; /* gray-70 */
  --color-text-on-inverse: #f4f4f4;
  --color-text-on-inverse-secondary: #a8a8a8; /* gray-40 */
  --color-accent: #0f62fe;         /* blue-60 */
  --color-accent-hover: #0043ce;   /* blue-70 */

  /* ---- Type: IBM Plex, Carbon-esque productive scale ---- */
  --font-sans: 'IBM Plex Sans', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --type-label: 0.75rem;                          /* 12px — eyebrows, meta */
  --type-body: 1rem;                               /* 16px */
  --type-body-lg: 1.125rem;                        /* 18px */
  --type-heading-sm: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);   /* 20–24px */
  --type-heading-md: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);  /* 28–36px */
  --type-heading-lg: clamp(2.5rem, 1.8rem + 3vw, 3.5rem);      /* 40–56px */
  --type-display: clamp(3rem, 2rem + 5vw, 5rem);               /* 48–80px */

  --line-tight: 1.1;
  --line-normal: 1.5;

  /* ---- Spacing: Carbon spacing scale (2px base) ---- */
  --space-01: 0.125rem; /* 2px */
  --space-02: 0.25rem;  /* 4px */
  --space-03: 0.5rem;   /* 8px */
  --space-04: 0.75rem;  /* 12px */
  --space-05: 1rem;     /* 16px */
  --space-06: 1.5rem;   /* 24px */
  --space-07: 2rem;     /* 32px */
  --space-08: 2.5rem;   /* 40px */
  --space-09: 3rem;     /* 48px */
  --space-10: 4rem;     /* 64px */
  --space-11: 5rem;     /* 80px */
  --space-12: 6rem;     /* 96px */
  --space-13: 10rem;    /* 160px */

  /* ---- Motion: Carbon's standard easing ---- */
  --ease-productive: cubic-bezier(0.2, 0, 0.38, 0.9);
  --duration-fast: 110ms;
  --duration-moderate: 240ms;

  /* ---- Layout ---- */
  --content-max: 1200px;
  --gutter: var(--space-06);
  --topbar-h: 4.5rem; /* 72px */
}

@media (min-width: 768px) {
  :root {
    --gutter: var(--space-09);
  }
}