/* ============================================================
   DESIGN TOKENS
   Confirmed values for the Home page, per PROJECT_CONTEXT.md.
   Remaining TODOs are values not yet confirmed by Clara — do not
   approximate them, ask or pull from Figma.
   ============================================================ */

:root {
  /* --- Colour: Home, confirmed --- */
  --color-hero-greeting: #FFF3A8;    /* "Welcome to" text */
  --color-envelope-back: #A59A8A;    /* envelope, back layer */
  --color-envelope-mid: #DFD4C4;     /* envelope, middle layer */
  --color-envelope-front: #EAE2D6;   /* envelope, front layer */
  --color-card: #FFFEF4;             /* card inside the envelope */
  --color-bubble-received: #E9E9E9;  /* chat: received message */
  --color-bubble-sent: #1285FF;      /* chat: sent message */
  --color-paper: #F8F9E4;            /* paper sheet background */
  --color-paper-lines: #E6E7C0;      /* paper sheet ruled lines */
  --color-polaroid-frame: #FFFEF4;   /* polaroid frame */
  --color-postit: #FFF3A8;           /* post-it */

  /* --- Colour: not yet confirmed for Home --- */
  --color-bg: #FFFFFF;               /* page background, confirmed against the design exports */
  --color-ink: #1C1815;              /* TODO: confirm general body/heading text colour */
  --color-accent: #1285FF;           /* TODO: confirm focus/accent colour (using sent-bubble blue for now) */
  --color-line: rgba(28, 24, 21, 0.12);

  /* --- Type --- */
  --font-hero-greeting: 'Mea Culpa', cursive;      /* "Welcome to" */
  --font-hero-portfolio: 'Doto', sans-serif;        /* "my portfolio" */
  --font-headline: 'Instrument Serif', serif;       /* all headings */
  --font-body: 'DM Sans', -apple-system, sans-serif; /* general body copy */
  --font-chat: 'Roboto', -apple-system, sans-serif;  /* chat bubbles */
  --font-mono-label: 'Geist Mono', ui-monospace, monospace; /* labels, contact sheet */

  --fs-hero: clamp(2.5rem, 6vw, 5rem);

  /* --- Title scale ---
     Two sizes. 120px (90pt) was tried for the page title and read
     too big in the browser, so it's 90px — judged on screen at the
     1440 design width rather than converted from the design file.
     That puts the two titles at 3:2, not the 2:1 they were at.
     The vw middles are tuned to land on the cap exactly at 1440
     (6.25vw and 4.2vw), so on a desktop the type matches what was
     approved and below that it scales down from it. */
  --fs-title-page: clamp(2.25rem, 6.25vw, 90px);    /* project h1 */
  --fs-title-section: clamp(1.75rem, 4.2vw, 60px);  /* section h2 */

  /* The display lines set in headline italic that aren't titles —
     the intro quote and the system-card headings. One value, because
     they're one voice on the page and were only ever different by
     accident (they sat at 24px, 25.6px and 20.8px). 2.43vw lands on
     35px at the 1440 design width, matching the titles' setup. */
  --fs-quote: clamp(1.25rem, 2.43vw, 35px);

  /* The rest of the project pages' scale. These are NOT used by the
     home page, which sets its own type — they exist so that every
     project page reads as the same publication: a headline is one
     size across all of them, a pull quote another, body copy another.
     Before these, each page had drifted its own way: titles at 90 and
     84, quotes at 35 and 30, body led at 1.25, 1.5 and 1.55. */
  --lh-body: 1.25;                                  /* body copy leading */
  --lh-title: 0.9;                                  /* project headline leading */

  /* Where a project's headline starts, measured down from the top
     edge of its open folder. One value for every project page: the
     folder always begins at the same height now, so the headline on
     it should too — before this the three pages started at 56, 130
     and 233px and the pages read as unrelated. The tags follow from
     the headline's own height, which is why the leading above is
     shared as well. */
  --project-title-top: 130px;
  /* And where the tags under it start: the headline's top plus the
     two lines it always runs to, plus the gap. Derived rather than
     typed, so moving the headline moves them with it. */
  --project-tags-top: calc(var(--project-title-top) + (2 * var(--fs-title-page) * var(--lh-title)) + 20px);
  --fs-caption: 25px;                               /* image captions */
  --fs-bubble: 17px;                                /* chat bubbles on project pages */

  --fs-h1: clamp(2rem, 4vw, 3.25rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  /* --- Spacing scale --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 144px;

  /* --- Radius --- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 30px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 200ms;
  --dur-medium: 450ms;
  --dur-slow: 700ms;

  /* --- Layout --- */
  --content-max: 1280px;
  --gutter: clamp(24px, 5vw, 80px);
}