/* ============================================================================
   THE RENZO'S DESIGN TOKENS  ·  v1  ·  June 2026
   The single source of truth. Every property reads from here.
   Change a value once → it updates everywhere. No hunting, no drift.

   ── HOW TO EDIT & EXPAND WITHOUT DRIFTING ──────────────────────────────────
   1. NEVER write a raw hex or font name inside a page or component.
      Always use a token:  color: var(--ink);   ← right
                           color: #1B1917;        ← drift. don't.
   2. Only edit raw VALUES in LAYER 1 (Primitives). Everything else points
      at Layer 1, so one change cascades safely to the whole system.
   3. Components use LAYER 2 (Semantic) names — --bg, --ink, --accent —
      never Layer 1 directly. A semantic name says the JOB, not the color.
      (So you can re-skin a property without touching a single component.)
   4. To ADD a color: (a) add it to Layer 1, then (b) give it a Layer 2 job.
      Two steps, always in that order. A primitive with no job is just paint.
   5. A child property overrides ONLY Layer 2 (semantic) tokens — never
      Layer 1. See the property blocks at the bottom.
   6. GREEN is an EXCEPTION (nature/foliage only). It has NO semantic role
      on purpose — call --x-pasture / --x-sage directly, sparingly, never
      as a background or a UI color.

   FONT LOADING (separate from tokens — tokens only NAME the fonts):
   • Manrope, Gilda Display, Cormorant Garamond → free Google Fonts <link>.
   • Chalet Comprimé → @font-face from woff2 COPIES of Claudio's OTFs
     (generated at build; originals untouched). It is PEPPERED on display
     only and always falls back to Manrope, so text never breaks.
   ============================================================================ */

:root {

  /* ════ LAYER 1 · PRIMITIVES — the locked raw values ════════════════════ */

  /* — Brand (cool / objective) — */
  --c-red:            #D81E24;   /* Renzo's Red · the hero */
  --c-stone-black:    #1B1917;   /* near-black ink */
  --c-stone-700:      #33302B;
  --c-stone-500:      #78736B;
  --c-stone-200:      #ECE9E3;
  --c-paper:          #F5F3EF;   /* primary page paper */
  --c-white:          #FFFFFF;

  /* — Space · The Renzo's Room (warm / ethereal) — */
  --c-lime-white:     #F2EEE6;   /* sun-washed base */
  --c-balasto-stone:  #C8B49F;   /* Garzón stone */
  --c-celeste:        #7FB2DD;   /* Rioplatense sky / light */
  --c-balasto-steel:  #695C4D;   /* matte stone-steel structure */
  --c-brass:          #B89455;   /* warmth */
  --c-sunlit-brass:   #E3C97B;   /* filete glow */
  --c-pinstripe-gold: #D0A93E;   /* filete line */

  /* — Nature EXCEPTION (foliage only · never a field) — */
  --c-pasture-green:  #568A39;   /* Maldonado chacras */
  --c-succulent-sage: #909C7E;   /* Punta del Este shore rocks */

  /* — Type families — */
  --f-script:       'Renzos Script', cursive;                 /* logo wordmark only */
  --f-body:         'Manrope', system-ui, -apple-system, sans-serif;          /* universal workhorse */
  --f-display:      'Chalet Comprime', 'Manrope', system-ui, sans-serif;      /* restaurant + bar */
  --f-foods:        'Gilda Display', Georgia, serif;          /* foods + market display */
  --f-foods-accent: 'Cormorant Garamond', Georgia, serif;     /* "Hecho a mano" italics */

  /* — Type scale — */
  --fs-eyebrow: 0.70rem;
  --fs-small:   0.85rem;
  --fs-body:    1rem;
  --fs-lead:    1.18rem;
  --fs-h3:      clamp(1.3rem, 2vw, 1.6rem);
  --fs-h2:      clamp(2rem, 4vw, 3rem);
  --fs-h1:      clamp(2.3rem, 5.5vw, 4rem);

  --fw-light: 300;  --fw-regular: 400;  --fw-semibold: 600;  --fw-bold: 700;
  --ls-eyebrow: 3px;            /* letter-spacing for caps eyebrows */

  /* — Spacing scale — */
  --sp-1: 0.5rem;  --sp-2: 1rem;  --sp-3: 1.5rem;  --sp-4: 2.5rem;
  --sp-5: 4rem;    --sp-6: 6rem;
  --pad-x: clamp(1.25rem, 5vw, 4rem);
  --pad-y: clamp(3.5rem, 9vw, 7.5rem);
  --max-w: 1200px;

  /* — Form / motion — */
  --radius: 3px;
  --dur: 0.2s;
  --ease: ease;


  /* ════ LAYER 2 · SEMANTIC — the JOB each token does ════════════════════ */
  /* PARENT THEME = Restaurant & Bar default. Children re-point these. */

  --bg:         var(--c-paper);        /* page background */
  --surface:    var(--c-white);        /* cards, panels */
  --ink:        var(--c-stone-black);  /* primary text */
  --muted:      var(--c-stone-500);    /* secondary text */
  --line:       var(--c-stone-200);    /* borders, dividers */
  --brand:      var(--c-red);          /* CTAs, hero pop, links */
  --on-brand:   var(--c-white);        /* text/icons on red */
  --accent:     var(--c-brass);        /* warm metal accent */
  --accent-line:var(--c-pinstripe-gold);/* filete hairline */

  --font-display: var(--f-display);    /* parent display = Chalet (→Manrope) */
  --font-body:    var(--f-body);

  /* — Room tokens (for immersive "Renzo's Room" sections) — */
  --room-base:      var(--c-lime-white);
  --room-stone:     var(--c-balasto-stone);
  --room-ink:       var(--c-stone-black);
  --room-sky:       var(--c-celeste);
  --room-structure: var(--c-balasto-steel);
  --room-warmth:    var(--c-brass);
  --room-glow:      var(--c-sunlit-brass);
  --room-line:      var(--c-pinstripe-gold);

  /* — Exception (call directly, sparingly; no UI role) — */
  --x-pasture: var(--c-pasture-green);
  --x-sage:    var(--c-succulent-sage);
}


/* ════ CHILD PROPERTY OVERRIDES ════════════════════════════════════════════
   Each child re-points a FEW semantic tokens only. Components never change —
   they already read --bg, --accent, etc. This is the parent → child system.
   Usage: <body data-property="stpete"> … </body>
   ========================================================================== */

/* — St. Pete · the pelican coast: more celeste — */
[data-property="stpete"] {
  --accent:    var(--c-celeste);   /* accent leans to the sky */
  --room-sky:  #6FA8DA;            /* push celeste forward in rooms */
}

/* — Carrollwood · neighborhood warmth: lean brass — */
[data-property="carrollwood"] {
  --accent:    var(--c-brass);
  --bg:        var(--c-lime-white); /* a touch warmer paper */
}

/* — Bar Renzo's · after dark: invert to a dark room, steel + brass — */
[data-property="bar"] {
  --bg:        var(--c-stone-black);
  --surface:   #232019;
  --ink:       var(--c-paper);
  --muted:     var(--c-stone-500);
  --line:      rgba(255,255,255,0.08);
  --accent:    var(--c-brass);
  --on-brand:  var(--c-white);
}

/* — Foods & Market · warm serif display, lime-white paper — */
[data-property="foods"] {
  --bg:           var(--c-lime-white);
  --accent:       var(--c-brass);
  --font-display: var(--f-foods);   /* display swaps to Gilda */
}


/* ════ USAGE EXAMPLE (delete in production — here to teach) ═════════════════
   .btn        { background: var(--brand); color: var(--on-brand);
                 font-family: var(--font-body); border-radius: var(--radius); }
   .eyebrow    { color: var(--accent); font-family: var(--font-display);
                 letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
   h1          { font-family: var(--font-display); color: var(--ink);
                 font-size: var(--fs-h1); }
   body        { background: var(--bg); color: var(--ink);
                 font-family: var(--font-body); }
   ────────────────────────────────────────────────────────────────────────── */