/* =========================================================
   PANTRY tokens v0.1
   Source: Figma "Design Foundations" frame (node 82:168)
   Change a value here and the whole site follows.
   Values marked PLACEHOLDER are not decided yet.
   Part of the design system (pantry-ds.html). Rules: DESIGN-SYSTEM.md.
   ========================================================= */

:root {
  /* ---------- Color ---------- */
  --color-canvas: #FFFFFF;
  --color-surface-subtle: #F3F3F3;
  --color-ink: #121212;
  --color-text-secondary: #626262;
  --color-rule: #D4D4D4;
  --color-guide: #EBEBEB;

  --color-red-signal: #FF3B2D;
  --color-red-text: #C6261C;
  --color-red-hover: #C6261C;

  --color-accent-signal: #0047FF;
  --color-accent-text: #0036C4;
  --color-accent-hover: #0036C4;

  /* ---------- Font families ---------- */
  --font-sans: "Libre Franklin", system-ui, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, monospace;

  /* ---------- Type scale ----------
     Desktop sizes come from Figma. Large sizes shrink on mobile with clamp().
     Letter spacing: Figma % written as em (-4% = -0.04em). */

  /* Display / Hero: 104 / 0.98 / -4% */
  --text-display-size: clamp(48px, 7.2vw, 104px);
  --text-display-weight: 900;
  --text-display-lh: 0.98;
  --text-display-ls: -0.04em;

  /* Heading / Section: 56 / 1.04 / -3% */
  --text-section-size: clamp(34px, 3.9vw, 56px);
  --text-section-weight: 800;
  --text-section-lh: 1.04;
  --text-section-ls: -0.03em;

  /* Heading / Item: 28 / 1.12 / -2% */
  --text-item-size: clamp(22px, 1.95vw, 28px);
  --text-item-weight: 700;
  --text-item-lh: 1.12;
  --text-item-ls: -0.02em;

  /* Body / Lead: 20 / 1.45 / -1% */
  --text-lead-size: clamp(17px, 1.4vw, 20px);
  --text-lead-weight: 400;
  --text-lead-lh: 1.45;
  --text-lead-ls: -0.01em;

  /* Body / Default: 16 / 1.5 / 0 */
  --text-body-size: 16px;
  --text-body-weight: 400;
  --text-body-lh: 1.5;
  --text-body-ls: 0;

  /* UI / Nav: 14 / 1.3 / 0 */
  --text-nav-size: 14px;
  --text-nav-weight: 500;
  --text-nav-lh: 1.3;

  /* Mono / Label: 12 / 1.4 / +2%, uppercase */
  --text-label-size: 12px;
  --text-label-weight: 200;
  --text-label-lh: 1.4;
  --text-label-ls: 0.02em;

  /* Mono / Caption: 12 / 1.5 / 0 */
  --text-caption-size: 12px;
  --text-caption-weight: 200;
  --text-caption-lh: 1.5;

  /* Mono / Action: 13 / 1.3 / 0 */
  --text-action-size: 13px;
  --text-action-weight: 200;
  --text-action-lh: 1.3;

  /* ---------- Spacing ---------- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;

  /* ---------- Layout (from the wireframe, 1440 frame) ---------- */
  --container-max: 1312px;
  --gutter: clamp(16px, 4.4vw, 64px);
  --section-pad: clamp(96px, 12vw, 192px);

  /* ---------- Section rhythm (inside a section) ---------- */
  --space-label-title: 24px;
  --space-title-body: 32px;
  --space-body-cta: 48px;

  /* ---------- Grid ----------
     12 columns on desktop, 8 on tablet, 4 on mobile, with no column gap.
     --gutter is the outer margin. The space between columns of text is the
     cell padding (--cell-pad, from --line-gutter-*), see styles/grid.css.
     Breakpoints (1024px / 640px) live in the media queries of grid.css,
     because CSS can't read variables inside @media. */
  --grid-columns: 12;
  --grid-columns-tablet: 8;
  --grid-columns-mobile: 4;

  /* Bays are the lanes between the vertical lines: 4 on desktop, 2 on tablet,
     1 on mobile. Lines sit on the bay edges. */
  --grid-bays: 4;
  --grid-bays-tablet: 2;
  --grid-bays-mobile: 1;
  --grid-overlay-color: color-mix(in srgb, var(--color-red-signal) 10%, transparent);

  /* ---------- Structural lines ---------- */
  --line-width: 1px;

  /* Clear space between a vertical line and any text next to it. Keep it well
     above the line's sideways sway (5px in scripts/lines.js). */
  --line-gutter-desktop: 28px;
  --line-gutter-mobile: 16px;
  --plus-size: 11px;

  /* ---------- Header ---------- */

  /* The header sticks to the top. Its background and bottom hairline only
     show once the page has scrolled. The CTA joins it after the hero CTA
     has scrolled away. */
  --nav-fade-duration: 240ms;
  --nav-cta-duration: 520ms;
  --nav-cta-ease: cubic-bezier(.22, 1.3, .36, 1); /* small overshoot, like a spring */
  --nav-cta-rise: 60%;                            /* start offset, share of its own height */

  /* ---------- Hero: the pantry cabinet (desktop) ---------- */

  /* Text. Headline at display size; the changing lines close to it
     (about 80%), the one long line a step smaller (about 68%). */
  --text-hero-size: clamp(42px, 6.4vw, 96px);
  --text-hero-weight: 900;
  --text-hero-lh: 0.96;
  --text-hero-ls: -0.04em;
  --text-hero-line-size: clamp(36px, 5.1vw, 78px);
  --text-hero-line-size-long: clamp(30px, 3.9vw, 58px);
  --text-hero-line-lh: 1;
  --hero-line-long-chars: 40;    /* lines longer than this use the -long size (read by hero.js) */
  --hero-text-duration: 420ms;   /* crossfades */
  --hero-text-shift: 0.3em;      /* how far text slides as it fades */

  --hero-min-height: 680px;      /* floor for short screens */
  --hero-pad-block: var(--space-96);
  --hero-pad-block-compact: var(--space-48); /* below desktop */
  --hero-gap-title-line: var(--space-16);
  --hero-gap-stack: var(--space-48);   /* below desktop: text, button, cabinet */

  /* Button and note: one bay of the text block (3 of its 6 columns). */
  --hero-action-cols: 3;
  --hero-action-cols-tablet: 4;

  /* Cabinet: a 6 x 3 cubby shelf cut into the page grid (the right two
     bays on desktop, the full width below). The page lines stop at its
     edges; its frame, shelves and walls are drawn with the very same line
     and drift slowly. A compartment is taller than wide: on desktop it
     grows with the screen height between the two ratios below. */
  --cabinet-cols: 6;               /* compartments per shelf */
  --cabinet-rows: 3;               /* shelves */
  --cabinet-cell-min: 1.3;         /* compartment height / width */
  --cabinet-cell-max: 1.75;
  --cabinet-cell-compact: 1.35;    /* below desktop */
  --cabinet-drift: 1.6px;          /* most a line end wanders */
  --cabinet-drift-period: 9000;    /* ms, slowest drift cycle (read by hero.js) */
  --cabinet-dip: 4px;              /* a shelf taking weight (read by hero.js) */

  /* Items: the box an image fits in, as a share of its compartment.
     Images keep their own shape, bottom on the compartment floor. */
  --hero-item-share: 0.84;         /* item width / compartment width */
  --hero-item-width: calc(var(--hero-item-share) * 100cqw);
  --hero-item-height: min(96cqw, 72cqh);
  --hero-item-swap-duration: 520ms; /* raw to clay crossfade */

  /* Item motion. */
  --hero-item-lift: 1.08;          /* scale while held */
  --hero-item-tilt: 5deg;          /* most a held item leans */
  --hero-item-duration: 620ms;     /* snap into a position */
  --hero-item-ease: cubic-bezier(.34, 1.45, .55, 1); /* small overshoot, like a spring */
  --hero-item-lift-duration: 180ms;
  --hero-item-hover-rise: 4px;     /* hover: lift and wobble */
  --hero-item-hover-scale: 1.04;
  --hero-item-wobble: 4deg;
  --hero-item-wobble-duration: 600ms;
  --hero-land-delay: 240;          /* ms into the snap when an item touches down (read by hero.js) */
  --hero-arrange-stagger: 70;      /* ms between items on arrange and return (read by hero.js) */
  --hero-invite-delay: 2000;       /* ms after load before P wiggles and says "Drag me" (read by hero.js) */
  --hero-tidy-delay: 700;          /* ms after the first drop before the button hint shows (read by hero.js) */
  --hero-bubble-duration: 320ms;   /* hint bubbles pop in */

  /* ---------- Menu panel ---------- */
  --menu-pad-block: var(--space-48);
  --menu-open-duration: 420ms;     /* panel reveal */
  --menu-item-stagger: 50ms;       /* links rise one after another */

  /* ---------- Principle section ---------- */

  /* Height of one pinned screen. svh so mobile toolbars don't make it jump. */
  --stage-height: 100svh;

  /* Part 1: image comparison. Scroll length of the pinned stage,
     frame shape, and the space reserved for label, titles and captions
     so the frames always fit on one screen. */
  --compare-scroll: 300vh;
  --compare-frame-ratio: 4 / 3;
  --compare-chrome: 288px;
  --compare-chrome-mobile: 312px;
  --compare-placeholder-count: 5; /* grey slides shown while "images" is empty */

  /* Part 2: column wipe. Scroll length, then for each bay the part of
     that scroll (0 to 1) in which its bar rises: start end. */
  --wipe-scroll: 150vh;
  --wipe-bay-1: 0.3 1;
  --wipe-bay-2: 0.1 0.8;
  --wipe-bay-3: 0 0.6;
  --wipe-bay-4: 0.15 0.9;
  --color-guide-on-ink: color-mix(in srgb, var(--color-canvas) 14%, transparent);

  /* Part 3: statement. Bigger than display. principle.js shrinks it if
     needed so the closing clause ("AI only builds.") fits the grid at rest.
     It starts entering the moment the wipe is complete. The heavy face is
     tracked open, not tight like display, so letters never touch. */
  --text-statement-size: clamp(40px, 13vw, 224px);
  --text-statement-lh: 1;
  --text-statement-ls: 0.02em;
  --text-statement-ws: 0.05em;
  --statement-scatter: 0.55;    /* max vertical offset per letter, in em */
  --statement-tilt: 7;          /* max tilt per letter while entering, in deg */
  --text-statement-still-size: min(var(--text-display-size), 11vw); /* reduced motion: still, stacked */
  --statement-settle-at: 0.6;   /* letters sit on the baseline left of this share of the screen */
  --statement-speed: 0.6;       /* px of scroll per px of horizontal travel */
  --statement-hold: 80vh;       /* scroll the closing sentence rests on screen before the section lets go */

  /* ---------- Contact and footer (one dark block) ---------- */

  /* Type and hairlines on ink. Guide lines reuse --color-guide-on-ink. */
  --color-text-on-ink: var(--color-canvas);
  --color-text-on-ink-secondary: color-mix(in srgb, var(--color-canvas) 62%, transparent);
  --color-rule-on-ink: color-mix(in srgb, var(--color-canvas) 30%, transparent);

  /* Headline: between section title and statement. */
  --text-contact-size: clamp(52px, 8.6vw, 136px);
  --text-contact-lh: 0.94;
  --contact-min-height: 100svh;
  --contact-shelf-gap: clamp(240px, 34svh, 380px); /* open space above the shelf line */
  --footer-pad-top: clamp(128px, 14vw, 224px);
  --footer-pad-bottom: var(--space-48);
  --footer-photo-ratio: 1 / 1;    /* the real shape of the photos (1254 x 1254) */
  --footer-photo-cols: 2;         /* photo width in grid columns (a bay is 3 of 12, 4 of 8, 4 of 4) */
  --footer-human-gap: var(--space-48); /* intro text to photo */

  /* Photo frame (.photo-frame, components.css): a frame that cycles through
     its photos, every change a glitch. Times are read by scripts/photo-cycle.js. */
  --photo-start-delay: 1500ms;    /* after the frame scrolls into view, before the first change */
  --photo-hold: 1100ms;           /* each photo rests this long */
  --photo-glitch-duration: 500ms; /* one slice flicker */
  --photo-glitch-shift: 3%;       /* most a slice slides sideways, share of the frame width */

  /* ASCII image (.ascii-canvas, components.css): an image drawn as mono
     characters, the photo pulsing through in patches while the page
     scrolls. Read by scripts/ascii.js. */
  --ascii-cell: 13px;                       /* character size, one image cell */
  --ascii-cell-mobile: 10px;                /* below 640px: a smaller image, finer cells */
  --ascii-weight: 400;                      /* Martian Mono weight */
  --ascii-color-ink: var(--color-ink);      /* dark cells */
  --ascii-color-mid: var(--color-text-secondary); /* the lightest cells */
  --ascii-color-red: var(--color-red-signal);     /* red cells */
  --ascii-color-red-deep: var(--color-red-text);  /* dark red cells */
  --ascii-reveal-radius: 7;        /* patch radius, in cells */
  --ascii-reveal-duration: 1600ms; /* one patch opens, holds and closes */
  --ascii-reveal-step: 60;         /* px of scroll before the next patch */
  --ascii-reveal-max: 1;           /* patches open at once */

  /* Shapes: shelf animation length in reduced motion, hover label motion. */
  --shape-shelf-duration: 500ms;
  --shape-label-duration: 220ms;

  /* ---------- PLACEHOLDER: not decided yet ---------- */
  --radius: 0px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --duration: 400ms;
}