/* ==========================================================================
   ALGEB — design tokens & self-hosted fonts
   ========================================================================== */

/* Instrument Sans (variable, 400–700) */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/instrument-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Instrument Serif italic — accent words only */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono — labels, data, technical UI */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg: #06080C;
  --surface: #0B0F15;
  --surface-2: #0E141C;
  --surface-3: #111821;
  --surface-raised: rgba(17, 22, 30, .92);

  /* Text */
  --text: #EDF1F5;
  --text-2: #AEB6C2;
  --text-3: #8A94A3;
  --text-4: #77818F;      /* smallest meta text — kept above 4.5:1 on --bg */
  --text-faint: #3B4452;  /* decorative only */

  /* Lines */
  --line: rgba(255, 255, 255, .08);
  --line-soft: rgba(255, 255, 255, .06);
  --line-strong: rgba(255, 255, 255, .16);

  /* Accent system */
  --accent: #3CC6D2;
  --accent-2: #4A8FE0;
  --accent-ink: #BDEFF3;
  --accent-hover: #7FE0E8;
  --accent-deep: #13698A;
  --accent-wash: rgba(60, 198, 210, .07);
  --accent-wash-2: rgba(60, 198, 210, .12);
  --accent-line: rgba(60, 198, 210, .35);
  --accent-line-strong: rgba(60, 198, 210, .55);
  --grad: linear-gradient(90deg, var(--accent), var(--accent-2));

  /* Status */
  --warn: #E5B26B;
  --neg: #E58A9B;
  --neg-ink: #D9A3AE;

  /* Light (inverted) panel */
  --paper: #EDF1F5;
  --paper-ink: #06080C;
  --paper-ink-2: #3B4452;

  /* Type */
  --font-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --fs-display: clamp(44px, 7.4vw, 104px);
  --fs-h2: clamp(36px, 5vw, 64px);
  --fs-h2-xl: clamp(40px, 6.4vw, 88px);
  --fs-lead: clamp(17px, 1.5vw, 19px);

  /* Shape */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-3xl: 32px;
  --r-pill: 999px;

  /* Layout */
  --container: 1200px;
  --gutter: 20px;
  --section-space: clamp(96px, 12vw, 160px);
  --header-offset: 100px;

  /* Motion */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur: .35s;
}

@media (max-width: 480px) {
  :root { --gutter: 16px; }
}