/* ==========================================================================
   Pavoni1975 — Design Tokens
   Single source of truth. Portable across static HTML, Shopify Dawn,
   and any subdomain build (shop.*, business.*). Do not fork.
   ========================================================================== */

:root {
  /* --- Color: Verde Bosco palette ------------------------------------ */
  --color-forest:        #172a1f; /* PRIMARY  — Verde Bosco Notturno    */
  --color-forest-light:  #2d4a35; /* secondary — alt sections, accents */
  --color-cream:         #faf8f3; /* secondary — default page surface  */
  --color-tan:           #c8a882; /* accent   — hairlines, marks       */
  --color-ink:           #1e2e22; /* text on cream                     */
  --color-sage:          #eef0e8; /* alt surface — section breaks      */
  --color-ash:           #6b6560; /* secondary text, meta              */
  --color-night:         #162032; /* eval-only — Blu Notte hero option */

  /* Semantic aliases — use these in components, not raw values        */
  --surface:             var(--color-cream);
  --surface-alt:         var(--color-sage);
  --surface-inverse:     var(--color-forest);
  --text:                var(--color-ink);
  --text-muted:          var(--color-ash);
  --text-on-inverse:     var(--color-cream);
  --rule:                var(--color-tan);
  --rule-faint:          color-mix(in oklab, var(--color-ink) 14%, transparent);
  --rule-faint-inverse:  color-mix(in oklab, var(--color-cream) 22%, transparent);

  /* --- Typography ----------------------------------------------------
     Definitive system (May 2026): two families, Cormorant + Inter.
     Fraunces and Geist/Jost have been retired. Token names are role-based
     so application code reads cleanly; legacy aliases below are repointed
     for back-compat with any selector still referencing them.
     ------------------------------------------------------------------ */
  --font-logo:   "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", serif;
  --font-title:  "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", serif;
  --font-body:   "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Legacy aliases — repointed onto the new system. Kept so older selectors
     in shared CSS (site.css, business.css, design-system.html, brand-book.html)
     keep resolving without needing a global rename. */
  --font-display: var(--font-title);
  --font-sans:    var(--font-body);
  --font-mono:    var(--font-body);

  /* Modular scale — 1.200 minor third, anchored at 16px ------------- */
  --text-xs:    0.75rem;   /* 12  — meta, eyebrows                    */
  --text-sm:    0.875rem;  /* 14  — captions, footnotes               */
  --text-base:  1rem;      /* 16  — body                              */
  --text-md:    1.125rem;  /* 18  — lead body                         */
  --text-lg:    1.375rem;  /* 22  — sub-display                       */
  --text-xl:    1.875rem;  /* 30                                       */
  --text-2xl:   2.625rem;  /* 42                                       */
  --text-3xl:   3.75rem;   /* 60                                       */
  --text-4xl:   5.5rem;    /* 88                                       */
  --text-5xl:   8rem;      /* 128 — wordmark desktop                  */

  /* Weights — only what we use                                       */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;

  /* Line heights                                                     */
  --lh-tight:   1.05;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  /* Letterspacing                                                    */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.18em;  /* eyebrows, label uppercase            */

  /* --- Spacing — 4px base ------------------------------------------ */
  --space-1:  0.25rem;   /*  4  */
  --space-2:  0.5rem;    /*  8  */
  --space-3:  0.75rem;   /* 12  */
  --space-4:  1rem;      /* 16  */
  --space-5:  1.5rem;    /* 24  */
  --space-6:  2rem;      /* 32  */
  --space-7:  3rem;      /* 48  */
  --space-8:  4rem;      /* 64  */
  --space-9:  6rem;      /* 96  */
  --space-10: 8rem;      /* 128 */
  --space-11: 12rem;     /* 192 */

  /* --- Layout ------------------------------------------------------- */
  --container-max:  1440px;
  --gutter:         clamp(1.25rem, 4vw, 3rem);

  /* --- Lines & motion ---------------------------------------------- */
  --hairline:    1px;
  --rule-weight: 1px;

  --ease:        cubic-bezier(0.2, 0.6, 0.2, 1);
  --duration-1:  160ms;
  --duration-2:  280ms;
  --duration-3:  520ms;

  /* No shadows, no radii by design. Edges are precise.              */
  --radius-0:    0;
}

/* ==========================================================================
   Element resets — shared baseline for every Pavoni1975 surface
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--surface);
  font-weight: var(--w-regular);
  font-feature-settings: "ss01", "kern";
}

img, svg, video { display: block; max-width: 100%; }

a { color: inherit; }

::selection {
  background: var(--color-forest);
  color: var(--color-cream);
}

/* ==========================================================================
   Wordmark — the locked brand asset
   Served as a pre-rendered PNG (assets/logo/pavoni1975-*.png) so the
   lockup is identical on any browser, device, and network condition.

   The previous CSS composite (PAVONI 600 + 1975 300 italic in Cormorant
   Garamond, concatenated with a -0.06em kern) has been retired. When the
   font failed to load — slow CDN, blocked network, import error — the
   browser fell back to Georgia/Times and the mark rendered wrong. The
   PNG asset removes that failure mode entirely.

   Cormorant Garamond remains imported globally — it is still used for
   the "Executive Dining" sub-logo, the claim, and editorial section
   titles. The wordmark itself, however, no longer depends on it.
   ========================================================================== */

.brand-wordmark {
  display: block;
  height: auto;
  max-width: 100%;
  /* PNGs are 2880×880 (2× the declared 1440×440 box) so they stay sharp
     on Retina/HiDPI even when scaled down. */
}

/* ==========================================================================
   Buttons — minimal, only outline + ghost variants
   ========================================================================== */

.btn {
  --btn-fg: var(--text);
  --btn-bg: transparent;
  --btn-bd: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: 1rem; /* +18% from --text-sm — strengthen presence vs wordmark */
  font-weight: var(--w-regular); /* Inter 400 \u2014 UI nav buttons per brief */
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.375rem 2.375rem; /* proportionally raised with type */
  min-height: 64px;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--radius-0);
  cursor: pointer;
  transition:
    background-color var(--duration-2) var(--ease),
    color var(--duration-2) var(--ease),
    border-color var(--duration-2) var(--ease);
}

.btn:hover,
.btn:focus-visible {
  --btn-fg: var(--color-cream);
  --btn-bg: var(--text);
  outline: none;
}

/* On forest surfaces */
.on-forest .btn,
.btn--on-forest {
  --btn-fg: var(--color-cream);
  --btn-bd: var(--color-cream);
}
.on-forest .btn:hover,
.on-forest .btn:focus-visible,
.btn--on-forest:hover,
.btn--on-forest:focus-visible {
  --btn-fg: var(--color-forest);
  --btn-bg: var(--color-cream);
}

/* ==========================================================================
   Link — quiet underline, never bright
   ========================================================================== */

.link {
  color: inherit;
  text-decoration: none;
  border-bottom: var(--hairline) solid currentColor;
  padding-bottom: 2px;
  transition: opacity var(--duration-2) var(--ease);
}
.link:hover { opacity: 0.6; }

/* ==========================================================================
   Hairline rule + eyebrow label
   ========================================================================== */

.hairline {
  display: block;
  width: 100%;
  height: var(--hairline);
  background: var(--rule);
  border: 0;
}
.on-forest .hairline { background: var(--rule-faint-inverse); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--w-regular);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* The Emporio Gastronomico claim — only used on ecommerce surface ---- */
.claim {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--w-light);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

/* ==========================================================================
   Container + section primitives
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(var(--space-8), 10vh, var(--space-10));
}

/* ==========================================================================
   Surface modifiers
   ========================================================================== */

.on-cream  { background: var(--color-cream);  color: var(--color-ink); }
.on-sage   { background: var(--color-sage);   color: var(--color-ink); }
.on-forest { background: var(--color-forest); color: var(--color-cream); }

/* ==========================================================================
   Footer baseline
   ========================================================================== */

.footer {
  border-top: var(--hairline) solid var(--rule-faint);
  padding-block: var(--space-9) var(--space-7);
}
.on-forest .footer { border-top-color: var(--rule-faint-inverse); }