/* =====================================================================
   Listo — Design Tokens (v2: "software product" system)
   ---------------------------------------------------------------------
   Derived from the Listo Hotels Investment Deck design system.
   Reference vibe: Linear (structural type, near-monochrome, sharp grids)
   crossed with Anthropic (warm minimalism, whitespace, restrained motion).

   Non-negotiables encoded here:
   - White background. No cream, no gradients, no glass.
   - Blue is the dominant brand colour. Terracotta is a sparing accent (~5:1).
   - One type system: Inter (everything) + JetBrains Mono (metadata/labels).
   - Tabular numerals everywhere a number appears.

   NOTE (production follow-up): the source system asks for self-hosted WOFF2
   (Inter + JetBrains Mono, latin subset). For local design iteration we load
   them from Google Fonts. Self-host before shipping for fewer requests / no FOUT.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

:root {
  /* ---------- Blue family (dominant) ---------- */
  --blue:            #21698F;   /* Mediterráneo — primary brand blue (new house colour) */
  --blue-deep:       #1A5575;   /* hover/active on primary CTAs */
  --blue-light:      #4F97B7;   /* supporting accent, sparing */
  --blue-pale:       #E8F0F4;   /* chip / pill backgrounds, "yes" cells */
  --blue-pale-2:     #F2F7F9;   /* card hover background tint */
  --navy:            #1E3A5F;   /* large numerals — kept dark navy (structural anchor) */

  /* ---------- Terracotta (strategic accent, sparing) ---------- */
  --terracotta:      #E35336;   /* warm red-orange — accent moment (trying as the accent) */
  --terracotta-soft: #FBDED7;   /* chip / highlighted-row cells */
  --terracotta-pale: #FDEFEB;   /* contrast-card hover background */
  --terracotta-deep: #C13F23;   /* hover on the accent */

  /* ---------- Special-purpose ---------- */
  --antler-red:      #A8423A;   /* the word "Antler" only */

  /* ---------- Neutrals ---------- */
  --bg:              #FFFFFF;   /* page background */
  --page:            #F2F2F0;   /* surrounding chrome (rare) */
  --ink:             #0F1419;   /* primary text — cooler than pure black */
  --ink-soft:        #5A6470;   /* secondary text — body / descriptive */
  --ink-mute:        #8A93A0;   /* tertiary — labels, axes, counters */
  --ink-faint:       #B6BCC6;   /* placeholders, "no" dashes, sep characters */
  --hairline:        #E6E8EC;   /* all dividers, card borders */
  --hairline-strong: #D0D4DB;   /* stronger dividers (rare) */
  --surface:         #F7F9FB;   /* faint surface (strips, inputs, photo frames) */
  --track:           #F0F2F5;   /* chart-bar track */

  /* ---------- Backward-compatible aliases ----------
     The JSX still references some legacy token names inline. Remap them onto
     the v2 system so nothing renders the old cream/serif look. */
  --blue-navy:       var(--navy);
  --cream:           var(--bg);
  --cream-soft:      var(--surface);
  --cream-deep:      #EFF1F4;
  --paper:           var(--bg);
  --paper-tint:      var(--surface);
  --accent:          var(--blue);
  --accent-deep:     var(--navy);

  /* ---------- Typography ---------- */
  --display:         "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;  /* titles */
  --sans:            "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;       /* body / subtitles */
  --mono:            "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;                          /* labels / detail */
  --sans-ui:         var(--sans);
  --serif-display:   var(--display);

  /* Type scale — desktop targets translated from the deck's cqw units */
  --fs-hero:    clamp(40px, 5.6vw, 70px);   /* hero h1 */
  --fs-h1:      clamp(36px, 5vw, 63px);     /* section headline */
  --fs-h2:      clamp(30px, 3.4vw, 46px);   /* sub-section headline */
  --fs-h3:      clamp(24px, 2.2vw, 29px);   /* card title */
  --fs-h4:      19px;
  --fs-lead:    clamp(18px, 1.5vw, 21px);
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-caption: 13px;
  --fs-eyebrow: 13px;

  /* Big numerals */
  --fs-stat:    clamp(56px, 7.2vw, 104px);  /* massive hero stats */
  --fs-stat-md: clamp(40px, 4vw, 55px);     /* large stats */

  --lh-display: 1.02;
  --lh-headline: 1.04;
  --lh-lead: 1.45;
  --lh-body: 1.6;

  --ls-display: -0.03em;
  --ls-headline: -0.025em;
  --ls-eyebrow: 0.2em;

  /* Tabular figures — applied wherever numbers appear. Non-negotiable. */
  --tnum: "tnum" 1, "lnum" 1;

  /* ---------- Spacing (deck rhythm → web px) ---------- */
  --s-1: 8px;
  --s-2: 14px;
  --s-3: 22px;
  --s-4: 28px;
  --s-5: 38px;
  --s-6: 44px;
  --s-7: 64px;
  --s-8: 96px;
  --s-9: 128px;

  /* ---------- Radii ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 10px;    /* cards */
  --r-lg: 12px;    /* primary buttons */
  --r-pill: 999px;

  /* ---------- Elevation — soft, neutral or accent-tinted ---------- */
  --shadow-sm: 0 1px 2px rgba(15, 20, 25, 0.05), 0 0 0 1px var(--hairline);
  --shadow-md: 0 14px 30px -18px rgba(15, 20, 25, 0.22);
  --shadow-blue: 0 14px 30px -18px rgba(33, 105, 143, 0.30);
  --shadow-terracotta: 0 14px 30px -18px rgba(227, 83, 54, 0.32);

  /* ---------- Motion ---------- */
  --ease-out:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:       cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast: 180ms;
  --dur-base: 220ms;
  --dur-slow: 720ms;

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-wide: 1440px;
}