/*
  DESIGN TOKENS — single source of truth for color, type, and grid.
  Extracted from Sadie's Figma mockups (Oct 2026 "paper" redesign).

  HOW TO EDIT:
  - Change a color/font/grid number here and it updates everywhere that
    references the variable. Never hardcode a hex/px value that already
    has a token below — add a new token instead if you need a new value.
  - Two color-text PAIRS exist because the mockups use two contexts:
    "on dark" (homepage hero: white text on the steel-blue bg) and
    "on light" (project pages: blue text on near-white bg).

  All colors below are now exact, given values — no more eyeballed
  approximations (the hero background was approximated for one turn;
  Sadie gave the real value, #4672A5, and it's now final).
*/

:root {
  /* ---------- color: given exact values from mockup ---------- */
  --color-paper-white: #FCFCFC;   /* "paper" fill color, light UI surfaces */
  --color-blue: #557EAA;          /* primary accent + "on light" text color */
  --color-bg-hero: #4672A5;       /* homepage background, confirmed exact */

  /* ---------- color: still approximated — no exact value given yet ---------- */
  --color-ink: #1D1D1E;           /* near-black, used sparingly for strong contrast */
  --color-paper-gray: #8A8A8A;    /* mid-gray paper (project-category papers) */
  --color-paper-navy: #2F4A68;    /* navy "about" paper card */
  --color-tape: #D9D4C4;          /* masking-tape corners on paper cards */

  /* ---------- color: semantic aliases (change these, not raw colors, in components) ---------- */
  --color-text-on-dark: var(--color-paper-white);
  --color-text-on-light: var(--color-blue);
  --color-surface-hero: var(--color-bg-hero);
  --color-surface-paper: var(--color-paper-white);

  /* ---------- type: font families ---------- */
  /* Syne Mono is loaded via Google Fonts in <head>; Helvetica Neue is a
     system font (no load needed) with the usual cross-platform fallbacks. */
  --font-mono: 'Syne Mono', 'Courier New', monospace;
  --font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* ---------- type: scale (exact values from the mockup's type guide) ---------- */
  /* Title — Helvetica Neue Bold 98pt, 90% line-height, bottom-aligned */
  --text-title-size: 98pt;
  --text-title-weight: 700;
  --text-title-line-height: 0.9;

  /* Header 1 — Helvetica Neue Regular 34pt, 90% line-height, top-aligned */
  --text-h1-size: 34pt;
  --text-h1-weight: 400;
  --text-h1-line-height: 0.9;

  /* Header 2 — Syne Mono Regular 24pt */
  --text-h2-size: 24pt;
  --text-h2-weight: 400;

  /* Subheader — Syne Mono Regular 18pt (homepage) / 16pt (project page) */
  --text-subheader-size: 18pt;
  --text-subheader-size-project: 16pt;
  --text-subheader-weight: 400;

  /* Subheader Section — Helvetica Neue Light 24pt, 90% line-height, 6% tracking */
  --text-subheader-section-size: 24pt;
  --text-subheader-section-weight: 300;
  --text-subheader-section-line-height: 0.9;
  --text-subheader-section-tracking: 0.06em;

  /* Body 1 — Syne Mono Regular 12pt */
  --text-body1-size: 12pt;
  --text-body1-weight: 400;

  /* Project Body — Helvetica Neue Light 24pt, 120% line-height */
  --text-project-body-size: 24pt;
  --text-project-body-weight: 300;
  --text-project-body-line-height: 1.2;

  /* Nav Text 1 (on dark) / Nav Text 2 (on light) — Syne Mono, 24pt / 12pt */
  --text-nav1-size: 24pt;
  --text-nav2-size: 12pt;

  /* ---------- grid: from the Figma "Columns" layout-grid panel ---------- */
  --grid-columns: 8;
  --grid-margin: 16px;
  --grid-gutter: 24px;

  /* ---------- motion: shared easing/duration tokens ---------- */
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);   /* calm settle, used for most UI motion */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot, used for playful hover */
  --duration-fast: 200ms;
  --duration-base: 450ms;
  --duration-slow: 900ms;

  /* ---------- z-space: named layers so "front/back" is never a guess ---------- */
  /* Higher = closer to the viewer. Components should reference these
     names (via inline style or a modifier class) rather than inventing
     new z-index numbers, so the whole stack stays reasoneable about. */
  --z-bg-logo-mark: -1;  /* giant faint logo watermark — behind the paper texture, in front of the solid bg color */
  --z-bg-paper: 0;       /* full-bleed background paper texture, behind everything else */
  --z-bg-decoration: 1;
  --z-paper-back: 20;    /* papers 3 & 4, rise in behind papers 1 & 2 */
  --z-paper-front: 30;   /* papers 1 & 2 at rest */
  --z-paper-active: 100; /* whichever paper was last clicked, brought to front */
  --z-title: 200;        /* title + eyebrow sit IN FRONT of all papers (even a clicked one), behind the nav */
  --z-nav: 600;
  --z-dragging: 800; /* an actively-dragged image box — above nav/everything per spec */
  --z-modal: 1000;
  --z-cursor-label: 1100; /* the cursor itself sits above absolutely everything, including the modal */
}

/* ---------- the 8-column grid, as a reusable layout primitive ---------- */
/* Usage: <div class="grid"> ... <div style="grid-column: 2 / span 4;">...
   Any element can opt into the grid without caring how many columns the
   SITE has — change --grid-columns once, every .grid reflows. */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  column-gap: var(--grid-gutter);
  padding-left: var(--grid-margin);
  padding-right: var(--grid-margin);
}