/* ==========================================================================
   Design tokens — values taken directly from the Ezousa Winery Figma file
   Design canvas: 1920 x 14479 (Home - Page, node 461:16270)
   ========================================================================== */
:root {
  /* ---- Colour ---------------------------------------------------------- */
  --c-page:          #fcfcfc;  /* page background */
  --c-white:         #ffffff;  /* Giannoudi slide background */
  --c-black:         #000000;
  --c-ink:           #313131;  /* primary text */
  --c-ink-soft:      #5f5f5f;  /* Territory statement text */
  --c-grey-500:      #a7a7a7;  /* Territory display heading */
  --c-grey-300:      #d9d9d9;  /* Journal post titles */
  --c-grey-200:      #eaeaea;  /* Experience display heading */
  --c-grey-150:      #ececec;  /* Slider wine names */
  /* #313131 on the menu's own ground — black under a dark film — measured
     1.38-1.58:1 across the seven items, against a floor of 3:1 for type this
     size.  They were not subdued, they were unreadable.  #6a6a6a measures
     3.55:1 there — clear of the floor at every item, with the darkest of them
     still at 3.3 — while the current item at white stays at 19:1, five times
     its neighbours, so the selection reads at a glance.  #7a7a7a was tried
     first and read as too bright for a menu that is meant to recede. */
  --c-menu-idle:     #6a6a6a;  /* Menu item, resting */
  --c-menu-active:   #ffffff;  /* Menu item, hover */

  /* Wine slide backgrounds */
  --c-giannoudi:     #ffffff;
  --c-xynisteri:     #64bdb9;
  --c-viognier:      #d0b047;
  --c-slide-end:     #000000;

  /* Gallery colour-blend overlays */
  --c-blend-teal:    #7cceca;
  --c-blend-gold:    #e3ca3a;

  /* ---- Typography ------------------------------------------------------ */
  /* CF Din Condensed is the licensed brand face used in Figma. Drop the
     licensed webfonts into assets/fonts/ (see css/fonts.css) and every
     rule below picks them up automatically; Barlow Condensed stands in
     until then. */
  --f-ui:        'CF Din Condensed', 'CF Din Fallback', 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-display:   'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-editorial: 'Bricolage Grotesque', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-body:      '42dot Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Tracking correction for the CF Din stand-in. Set to 0 once the licensed
     CF Din Condensed webfonts are installed. */
  --ls-ui:       -0.06em;
  --wine-squeeze:   0.948;      /* CF Din Condensed Bold stand-in: width  */
  --wine-nudge-x:  -1.3rem;     /* …and its side bearings                  */
  --wine-nudge-y:  -7.6rem;     /* …and its taller ascent at 526px         */

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Type scale (rem — 1rem = 10px at the 1920 design width) */
  --fs-display-xxl: 20rem;      /* 200px — Wine collection page title */
  --fs-display-xl:  15rem;      /* 150px — Territory / Experience statements */
  --fs-display-lg:  8rem;       /* 80px  — Journal post titles */
  --fs-display-md:  7rem;       /* 70px  — JOURNAL label, editorial paragraphs */
  --fs-editorial:   7rem;

  /* Section headings had been sharing --fs-editorial with body copy, which is
     fine at the design width — both are 7rem there — and wrong on a phone,
     where editorial shrinks to 2rem to stay readable as a paragraph and drags
     the headings down with it.  Measured on About at 390: heading 20px against
     19px of body, a ratio of 1.05.  Desktop's is 2.33.  Separate token, same
     value here, its own values on the small tiers. */
  --fs-heading:     7rem;
  --lh-heading:     8rem;       /* 70px  — animated manifesto paragraphs */
  --fs-slide-title: 6rem;       /* 60px  — wine slide heading */
  --fs-wine-name:   52.6222rem; /* 526.222px — slider wine names */
  --fs-menu:        6.8113rem;  /* 68.113px — overlay menu items */
  --fs-close:       4rem;       /* 40px  — CLOSE */
  --fs-ui-lg:       3rem;       /* 30px  — nav, buttons, eyebrows */
  --fs-lead:        3rem;       /* 30px  — lead paragraphs */
  --fs-body:        2rem;       /* 20px  — body copy, meta */
  --fs-legal:       1.7954rem;  /* 17.954px — footer copyright */

  --lh-display-xxl: 18rem;      /* 180px */
  --lh-display-xl:  14rem;      /* 140px */
  --lh-editorial:   8.4rem;     /* 84px */
  --lh-statement:   8rem;       /* 80px  — Territory statement */
  --lh-slide-title: 7rem;       /* 70px */
  --lh-lead:        4rem;       /* 40px */
  --lh-body:        3rem;       /* 30px */
  --lh-legal:       2.5648rem;  /* 25.648px */

  /* The gap under the icon in a fact point — the icon-label-sentence block the
     home map, the Terrain frog and the sustainability marks all use.  One
     token so the three scenes cannot drift apart again: they were at 16, at
     16/10/5 hand-set per icon, and at 14. */
  --fact-gap:       1.6rem;     /* 16px */
  --fact-w:         36rem;      /* 360px — the column a fact point's sentence
                                   wraps in.  Was 27, 36.5 and 36 across the
                                   three scenes, so the same sentence broke
                                   into a different number of lines on each. */
  --ring-d:         70.6rem;    /* 706px — the dotted focus ring, on all three
                                   scenes.  Home and Terrain already shared it;
                                   sustainability drew a 57.5rem one. */

  --ls-display-xxl: -1rem;      /* -10px */
  --ls-display-xl: -0.75rem;    /* -7.5px */
  --ls-display-lg: -0.4rem;     /* -4px */
  --ls-display-md: -0.21rem;    /* -2.1px */

  /* ---- Layout ---------------------------------------------------------- */
  --design-width: 192rem;       /* 1920px */
  --page-x:       6.5rem;       /* 65px — outer gutter */
  --nav-x:        6.3rem;       /* 63px — header gutter */
  --gallery-x:    8.5rem;       /* 85px — gallery gutter */

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   0.32s;
  --dur-base:   0.6s;
  --dur-slow:   1s;

  /* ---- Elevation ------------------------------------------------------- */
  --shadow-bottle: -3rem 2.5rem 4rem 0 rgba(0, 0, 0, 0.3);

  /* ---- Z-index --------------------------------------------------------- */
  --z-hero-media: 1;
  --z-hero-mark:  2;
  --z-content:    3;
  --z-header:     80;
  --z-menu:       90;
}