/* ==========================================================================
   Design tokens — the single source of truth for the design system.
   Change values here; components only reference these variables.
   ========================================================================== */

@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-Variable.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-VariableItalic.woff2") format("woff2");
  font-weight: 200 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/InstrumentSerif-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/InstrumentSerif-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/* Departure Mono (SIL OFL): annotations only — hover labels, build labels,
   transition meta. Drawn on an 11px pixel grid: use it at 11px. */
@font-face {
  font-family: "Departure Mono";
  src: url("../fonts/DepartureMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour — soft black on soft white, one accent. At rest the site is
     black and white; the accent appears where people interact. */
  --color-bg: #eeeeee;
  --color-text: #1b1b1b;         /* 14.8:1 */
  --color-text-body: #2d2d2d;    /* long-form prose — 11.9:1, comfortable at reading sizes */
  --color-text-muted: #666666;   /* labels, captions, meta — 5:1, not for body copy */
  --color-text-subtle: #8a8a8a;  /* decorative only (3:1) */
  --color-text-dimmed: #808783;  /* Figma primitive, re-tuned for the grey; locked projects in lists (3.2:1, display sizes only) */
  --color-border: #d6d6d6;
  --color-border-strong: #c8c8c8;
  --color-placeholder: #dcdcdc;
  --color-inverse: #eeeeee;
  --color-primary: #1b1b1b;
  --color-available: #2a8f52;    /* availability dot only — 3.5:1 */
  --color-primary-hover: #2d2d2d;
  /* Hot sauce. 3.8:1 on the background: marks, outlines, cursors, underlines,
     large type and the hover label — never small reading text. */
  --color-accent: #e33310;
  --color-on-accent: #eeeeee;

  color-scheme: light;

  /* Type families */
  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;
  --font-sans: "General Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "Departure Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-mono: 11px; /* the font's own pixel grid; not fluid */

  /* Type scale — fluid: min at ~375px viewport, max at ~1440px.
     Formula: clamp(min, intercept + slope·vw, max) */
  --text-caption:   clamp(0.75rem,  0.728rem + 0.094vw, 0.8125rem);  /* 12 → 13  */
  --text-body:      clamp(0.9375rem, 0.915rem + 0.094vw, 1rem);      /* 15 → 16  */
  --text-body-lg:   clamp(1.125rem, 1.081rem + 0.188vw, 1.25rem);    /* 18 → 20  */
  --text-reading:   clamp(1rem,     0.956rem + 0.188vw, 1.125rem);   /* 16 → 18  */
  --text-h3:        clamp(1.125rem, 1.081rem + 0.188vw, 1.25rem);    /* 18 → 20  */
  --text-lead:      clamp(1.25rem,  1.162rem + 0.376vw, 1.5rem);     /* 20 → 24  */
  --text-logo:      clamp(1.75rem,  1.486rem + 1.127vw, 2.5rem);     /* 28 → 40  */
  --text-h2:        clamp(2.25rem,  2.074rem + 0.751vw, 2.75rem);    /* 36 → 44  */
  --text-quote:     clamp(1.875rem, 1.567rem + 1.315vw, 2.75rem);    /* 30 → 44  */
  --text-metric:    clamp(3rem,     2.296rem + 3.005vw, 5rem);       /* 48 → 80  */
  --text-display-m: clamp(2.25rem,  1.106rem + 4.883vw, 5.5rem);     /* 36 → 88  */
  --text-display-l: clamp(5rem,     3.239rem + 7.512vw, 10rem);      /* 80 → 160 */

  --leading-tight: 1;
  --leading-heading: 1.1;
  --leading-body: 1.375;      /* UI: controls, meta, captions */
  --leading-reading: 1.55;    /* long-form prose at --text-reading */
  --leading-lead: 1.45;

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

  /* Space scale */
  --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: 2.5rem;    /* 40 */
  --space-8: 3rem;      /* 48 */
  --space-9: 4rem;      /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-11: 6rem;     /* 96 */
  --space-12: 8rem;     /* 128 */
  --space-13: 10rem;    /* 160 */

  --space-section: clamp(3.5rem, 2.5rem + 3vw, 5rem);        /* 56 → 80 between content rows */
  --space-section-lg: clamp(5rem, 3rem + 6vw, 8.75rem);      /* 80 → 140 between page sections */

  /* Layout widths */
  --width-wide: 70.375rem;      /* 1126 — header, media */
  --width-content: 55.875rem;   /* 894  — home column, project list */
  --width-text: 41.25rem;       /* 660  — reading column */
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  /* Full-width frame (header, footer, home): the margin grows with the
     screen, content stops at 1800 on very wide monitors */
  --gutter-full: clamp(1.25rem, 0.25rem + 4vw, 4rem);  /* 20 → 64 */
  --width-full: 112.5rem;                               /* 1800 */
  --grid-gap: var(--space-7);
  --gap-media: clamp(0.75rem, 0.4rem + 1vw, 1.5rem); /* 12 → 24, between full-width images */

  /* Editorial spine — every text block on the page shares this placement on the
     12-column grid. Columns 1–3 are the live margin (meta, credits); the text
     column sits left of centre, which is where the asymmetry comes from.
     Media escapes to 1 / -1. Collapses to full width below 768. */
  --spine: 1 / -1;
  --margin-col: 1 / -1;

  /* Paragraph rhythm: one line of the reading leading */
  --space-paragraph: 1.55em;

  /* Shape */
  --radius-media: 1rem;
  --radius-card: 1.5rem;
  --radius-pill: 999px;

  /* Controls */
  --control-height: 3.375rem;   /* 54 */
  --control-height-sm: 3.125rem;/* 50 */
  --control-padding: var(--space-5);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);         /* GSAP expo.out */
  --duration-fast: 150ms;
  --duration-base: 300ms;
}

/* Dark theme, opt-in: light is the default whatever the OS says. The footer
   switch stores the choice, applied before first paint in layout.php as
   <html data-theme="dark">. The two greys swap; the other roles are re-tuned:
   body text ~11:1, muted ~6:1. The accent is unchanged (3.9:1 on #1b1b1b). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #1b1b1b;
  --color-text: #eeeeee;
  --color-text-body: #cfcfcf;
  --color-text-muted: #9a9a9a;
  --color-text-subtle: #6e6e6e;
  --color-text-dimmed: #707873;
  --color-border: #2e2e2e;
  --color-border-strong: #3a3a3a;
  --color-placeholder: #2a2a2a;
  --color-inverse: #1b1b1b;
  --color-primary: #eeeeee;
  --color-primary-hover: #d6d6d6;
  --color-available: #3fb56c;
}

/* Desktop: the spine engages. 7 of 12 columns ≈ 640px ≈ 71 characters at 18px. */
@media (min-width: 768px) {
  :root {
    --spine: 4 / span 7;
    --margin-col: 1 / span 3;
  }
}

/* Wide screens — second fluid stage, 1440 → 2200.
   The rest of the scale tops out at 1440, which leaves a 27" display showing
   the page as a small island: 56% of the screen is empty and the hero title is
   proportionally smaller than it is on a laptop.

   Only two things grow: the layout widths (so media and the grid breathe) and
   the display type that spans them. Everything measured against the reading
   column — body, section headings, quotes, metrics, captions — stays fixed,
   because the measure itself is capped at --width-text. Growing those would
   only push the line length back past comfortable. */
@media (min-width: 1440px) {
  :root {
    --width-wide:      clamp(70.375rem, 37.93rem + 36.05vw, 87.5rem);   /* 1126 → 1400 */
    --width-content:   clamp(55.875rem, 30.29rem + 28.42vw, 69.375rem); /* 894  → 1110 */
    --text-display-l:  clamp(10rem,     5.2625rem + 5.263vw, 12.5rem);  /* 160  → 200  */
    --text-display-m:  clamp(5.5rem,    3.13rem + 2.632vw, 6.75rem);    /* 88   → 108  */
    --text-logo:       clamp(2.5rem,    1.5525rem + 1.053vw, 3rem);     /* 40   → 48   */
  }
}

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