/* envimate design tokens — source of truth for colors, type and spacing.
   Link this file before the site stylesheet, or paste it at the top of it.
   No hex codes anywhere else in the CSS: always use var(--…). */

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Color — light (default) */
  --color-paper: #F5F6F7;        /* page background */
  --color-surface: #FFFFFF;      /* quotes, cards, case studies */
  --color-ink: #121417;          /* headings, body text, primary button */
  --color-muted: #6B7078;        /* secondary text, captions, labels */
  --color-line: #D9DCE0;         /* borders, dividers */
  --color-accent: #E8552B;       /* the cursor: graphic accents, focus ring, hover fill */
  --color-accent-text: #C2410C;  /* links and any orange TEXT on light backgrounds */
  --color-on-accent: #121417;    /* text placed on an accent fill */

  /* Type */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --text-xs: 0.8125rem;   /* 13px  labels, footer */
  --text-sm: 0.9375rem;   /* 15px  captions, attributions */
  --text-base: 1.125rem;  /* 18px  body */
  --text-lg: 1.25rem;     /* 20px  h3, lead-in */
  --text-xl: 1.75rem;     /* 28px  h2 */
  --text-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); /* 32–52px h1 */

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-body: 1.6;

  /* Space (4px base) */
  --space-1: 0.25rem;  /*   4 */
  --space-2: 0.5rem;   /*   8 */
  --space-3: 0.75rem;  /*  12 */
  --space-4: 1rem;     /*  16 */
  --space-5: 1.5rem;   /*  24 */
  --space-6: 2rem;     /*  32 */
  --space-7: 3rem;     /*  48 */
  --space-8: 4.5rem;   /*  72 */
  --space-9: 7rem;     /* 112 */

  /* Layout */
  --container: 68rem;  /* 1088px max content width */
  --measure: 68ch;     /* max line length for prose */
  --gutter: var(--space-4);
  --radius: 6px;
}

@media (min-width: 48rem) {
  :root { --gutter: var(--space-6); }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-paper: #121417;
    --color-surface: #1B1E22;
    --color-ink: #F5F6F7;
    --color-muted: #9AA0A8;
    --color-line: #2A2E34;
    --color-accent: #E8552B;
    --color-accent-text: #EF6A42;
    --color-on-accent: #121417;
  }
}