/* Design tokens for the facelift. Source: Figma "Portfolio" (file lbs8meLZHAwIDU0NGLVbpu).
   Not linked from any page yet. Names mirror the Figma variables (color/page -> --color-page). */

:root {
  /* Color */
  --color-page: #0A0A0A;
  --color-primary: #FFFFFF;
  --color-secondary: #CCCCCC;
  --color-tertiary: #999999;
  --color-border: #323232;
  --color-card-start: #141414;
  --color-card-end: #0A0A0A;
  --gradient-card: linear-gradient(180deg, var(--color-card-start), var(--color-card-end));

  /* Spacing (8px system). Only the steps defined in Figma so far. */
  --space-16: 16px;
  --space-24: 24px;
  --space-48: 48px;
  --space-96: 96px; /* section padding, hero top and bottom padding, illustration size */

  /* Shape */
  --radius-card: var(--space-16);
  --radius-pill: 9999px;
  --border-width: 1px;

  /* Fonts */
  --font-serif: 'Libre Baskerville', Georgia, serif;
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, monospace;

  /* Text styles: use as `font: var(--text-hero-title);`
     Figma line height "100" is auto, so those styles use normal. */
  --text-hero-title: 700 48px/normal var(--font-serif);
  --text-hero-body: 400 24px/48px var(--font-sans);
  --text-h1: 700 24px/normal var(--font-serif);
  --text-h2: 700 16px/normal var(--font-serif);
  --text-card-title: 700 18px/normal var(--font-serif);
  --text-card-body: 400 18px/32px var(--font-sans);
  --text-card-small-body: 400 14px/normal var(--font-sans);
  --text-impact: 700 48px/normal var(--font-sans);
  --text-label: 400 14px/normal var(--font-mono);
  --text-link: 400 16px/normal var(--font-sans);
  --text-brand: 700 16px/normal var(--font-sans); /* nav and footer brand name; not yet a named Figma style */

  /* Layout grid: desktop (from 1200px). 12 columns x 78px + 24px gutters = 1200px container. */
  --container-max: 1200px;
  --grid-columns: 12;
  --grid-gutter: 24px;
  --page-margin: 32px; /* minimum side margin; at a 1440px viewport the centered container leaves 120px */
}

/* Breakpoints: tablet 768px to 1199px, mobile below 768px (media queries cannot use variables) */
@media (max-width: 1199px) {
  :root {
    --grid-columns: 8;
    --page-margin: 32px;
  }
}

@media (max-width: 767px) {
  :root {
    --grid-columns: 4;
    --grid-gutter: 16px;
    --page-margin: 16px;
  }
}