/* ==========================================================================
   Larisel — design tokens
   --------------------------------------------------------------------------
   Direction: a warm, bright room, photographed. Cream ground, espresso ink,
   one copper accent. The 3D cup is the only saturated object on screen, so
   every printed surface stays quiet and lets it carry the colour.

   Two faces, on purpose: a serif for anything meant to be *read as a
   statement* (headlines, the price) and a grotesque for everything that is
   *operated* (labels, chips, body). A single-face page is what makes a site
   look templated; the pairing is most of the difference between "a site
   about coffee" and "a coffee brand".

   Single source of truth: no file below this one may hard-code a raw value.
   ========================================================================== */

:root {
  /* --- Ground ----------------------------------------------------------
     Four steps, not two. A premium page moves between very close values;
     cheap ones jump between white and grey. */
  --c-cream: #f4efe5;
  --c-cream-2: #ece4d6;      /* alternating band */
  --c-card: #fdfaf4;
  --c-card-2: #f8f3ea;       /* wells inside a card */
  --c-espresso: #1e1611;     /* the one dark band */
  --c-night: #0d0907;        /* the intro curtain: a step deeper than the band */
  --c-paper: #fbf7ef;        /* the printed ticket */
  --c-roast: #2c2019;        /* the coffee reading's night: the lit middle ... */
  --c-roast-deep: #160f0b;   /* ... falling off to the edges */

  /* --- Ink -------------------------------------------------------------
     Measured on --c-cream: ink 14.4:1, dim 5.8:1, faint 4.7:1. Nothing
     below --c-ink-faint carries text. */
  --c-ink: #1e1611;
  --c-ink-dim: #6a594c;
  --c-ink-faint: #7c6b5d;
  --c-line: rgba(30, 22, 17, 0.11);
  --c-line-soft: rgba(30, 22, 17, 0.055);
  --c-line-hair: rgba(30, 22, 17, 0.04);
  --c-line-strong: rgba(30, 22, 17, 0.22);   /* the ticket's dashed rules */

  /* --- Accent ----------------------------------------------------------
     Copper, used for rules, prices and focus — never as a large fill. */
  --c-accent: #a8551f;
  --c-accent-deep: #7f3d14;
  --c-accent-wash: rgba(168, 85, 31, 0.08);
  --c-accent-glow: #e8b27a;  /* copper on the dark: the curtain's wordmark */
  --c-open: #7fbf8a;         /* "open now" — a signal, never a brand colour */

  /* --- Type ------------------------------------------------------------ */
  --f-display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Height, not just width. A display size tied to viewport width alone
     overflows a short laptop screen: the hero has to fit one screen the same
     way every other panel does. */
  --t-hero: clamp(2.75rem, min(8.5vw, 11.5vh), 7.5rem);
  --t-h1: clamp(2.1rem, 5vw, 4rem);
  --t-h2: clamp(1.6rem, 3.2vw, 2.6rem);
  --t-h3: clamp(1.05rem, 1.6vw, 1.35rem);
  --t-lead: clamp(1.0625rem, 1.35vw, 1.25rem);
  --t-body: clamp(0.9375rem, 1vw, 1.0625rem);
  --t-small: 0.875rem;
  --t-fine: 0.8125rem;
  --t-label: 0.6875rem;

  --lh-display: 0.98;
  --lh-snug: 1.14;
  --lh-normal: 1.68;
  --ls-display: -0.022em;
  --ls-label: 0.2em;
  --ls-label-tight: 0.14em;   /* long mono lines (steps, a reading's place) */

  /* --- Space ------------------------------------------------------------ */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem;  --s-8: 2rem;    --s-10: 2.5rem;
  --s-12: 3rem;   --s-16: 4rem;   --s-20: 5rem;   --s-24: 6rem;
  --s-32: 8rem;
  --s-section: clamp(5.5rem, 11vw, 10rem);

  --w-page: 1320px;
  --w-text: 58ch;
  --pad-x: clamp(1.25rem, 5vw, 4.5rem);
  --pad-edge: clamp(1.25rem, 4vw, 3rem);   /* the header and the film's chapter bar: hard to the screen's edges */

  --r-sm: 8px; --r-md: 16px; --r-lg: 26px; --r-xl: 34px; --r-pill: 999px;

  /* Layered shadows: a tight contact shadow plus a wide soft one. A single
     large blur is the classic "floating rectangle" look. 12.10 ("everything
     softer, delicate and expensive"): lighter and more diffuse — the card
     rests on the page rather than hovering over it. */
  --shadow-soft:
    0 1px 1px rgba(30, 22, 17, 0.03),
    0 3px 8px rgba(30, 22, 17, 0.035),
    0 18px 40px -22px rgba(30, 22, 17, 0.2);
  --shadow-lift:
    0 1px 1px rgba(30, 22, 17, 0.035),
    0 6px 18px rgba(30, 22, 17, 0.04),
    0 40px 90px -40px rgba(30, 22, 17, 0.3);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.72);

  /* --- Motion -----------------------------------------------------------
     Two curves: --e-out for things arriving, --e-io for things that both
     start and stop on screen (loops, sweeps). */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-io: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 240ms;           /* unhurried: a quick snap reads as cheap */
  --d-base: 520ms;
  --d-slow: 900ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; }
}