/* ============================================================
   Renéra Design System — Colors & Type
   ───────────────────────────────────────────────────────────
   Source of truth: Renéra brand guidelines (Figma canonical).
   Enqueued globally via functions.php (reneranutrition_enqueue_design_system).
   Font paths are relative to this CSS file: ../fonts/
   ============================================================ */

/* —— Fallback families (self-hosted, perf 1.3) ——
   Newsreader / DM Sans / DM Mono — named fallbacks in the type stacks, and
   genuinely rendered on the auth pages (wp-login.css). Self-hosted (subsetted
   woff2 in ../fonts/google/) to drop the render-blocking external Google @import
   while keeping rendering identical. unicode-range = browsers fetch only the
   subset they need (latin for English). */
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/google/aFTU7PB1QTsUX8KYthSQBK6PYK3EXw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/google/aFTU7PB1QTsUX8KYthqQBK6PYK0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/google/aFTR7PB1QTsUX8KYvumzEY2tbYf-Vlh3uA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/google/aFTR7PB1QTsUX8KYvumzEYOtbYf-Vlg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/google/rP2Hp2ywxg089UriCZ2IHTWEBlwu8Q.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/google/rP2Hp2ywxg089UriCZOIHTWEBlw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/google/rP2Hp2ywxg089UriCZ2IHTWEBlwu8Q.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/google/rP2Hp2ywxg089UriCZOIHTWEBlw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/google/rP2Hp2ywxg089UriCZ2IHTWEBlwu8Q.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/google/rP2Hp2ywxg089UriCZOIHTWEBlw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/google/cY9XfjOCX1hbuyalUrK439vogqCz_goCYw7oRd6JFYkzbARA_n8IsQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/google/cY9XfjOCX1hbuyalUrK439vogqCz_goCYw7oRd6JFYgzbARA_n8IsQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/google/cY9XfjOCX1hbuyalUrK439vogqCz_goCYw7oRd6JFYYzbARA_n8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/google/cY9AfjOCX1hbuyalUrK439HyjIJFJpeBZQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/google/cY9AfjOCX1hbuyalUrK439DyjIJFJpeBZQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/google/cY9AfjOCX1hbuyalUrK4397yjIJFJpc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/google/cY9AfjOCX1hbuyalUrK439HyjIJFJpeBZQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/google/cY9AfjOCX1hbuyalUrK439DyjIJFJpeBZQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/google/cY9AfjOCX1hbuyalUrK4397yjIJFJpc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/google/cY9AfjOCX1hbuyalUrK439HyjIJFJpeBZQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/google/cY9AfjOCX1hbuyalUrK439DyjIJFJpeBZQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/google/cY9AfjOCX1hbuyalUrK4397yjIJFJpc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* —— Recoleta (display serif) —— */
@font-face { font-family: 'Recoleta'; font-weight: 100; font-style: normal; font-display: swap;
  src: url('../fonts/RECOLETA-THIN.woff2') format('woff2'), url('../fonts/RECOLETA-THIN.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta'; font-weight: 300; font-style: normal; font-display: swap;
  src: url('../fonts/RECOLETA-LIGHT.woff2') format('woff2'), url('../fonts/RECOLETA-LIGHT.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('../fonts/RECOLETA-REGULAR.woff2') format('woff2'), url('../fonts/RECOLETA-REGULAR.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('../fonts/RECOLETA-MEDIUM.woff2') format('woff2'), url('../fonts/RECOLETA-MEDIUM.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('../fonts/RECOLETA-SEMIBOLD.woff2') format('woff2'), url('../fonts/RECOLETA-SEMIBOLD.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('../fonts/RECOLETA-BOLD.woff2') format('woff2'), url('../fonts/RECOLETA-BOLD.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta'; font-weight: 900; font-style: normal; font-display: swap;
  src: url('../fonts/RECOLETA-BLACK.woff2') format('woff2'), url('../fonts/RECOLETA-BLACK.TTF') format('truetype'); }

/* —— Recoleta Alt (wordmark variant) —— */
@font-face { font-family: 'Recoleta Alt'; font-weight: 100; font-style: normal; font-display: swap;
  src: url('../fonts/RECOLETAALT-THIN.woff2') format('woff2'), url('../fonts/RECOLETAALT-THIN.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta Alt'; font-weight: 300; font-style: normal; font-display: swap;
  src: url('../fonts/RECOLETAALT-LIGHT.woff2') format('woff2'), url('../fonts/RECOLETAALT-LIGHT.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta Alt'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('../fonts/RECOLETAALT-REGULAR.woff2') format('woff2'), url('../fonts/RECOLETAALT-REGULAR.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta Alt'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('../fonts/RECOLETAALT-MEDIUM.woff2') format('woff2'), url('../fonts/RECOLETAALT-MEDIUM.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta Alt'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('../fonts/RECOLETAALT-SEMIBOLD.woff2') format('woff2'), url('../fonts/RECOLETAALT-SEMIBOLD.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta Alt'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('../fonts/RECOLETAALT-BOLD.woff2') format('woff2'), url('../fonts/RECOLETAALT-BOLD.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta Alt'; font-weight: 900; font-style: normal; font-display: swap;
  src: url('../fonts/RECOLETAALT-BLACK.woff2') format('woff2'), url('../fonts/RECOLETAALT-BLACK.TTF') format('truetype'); }


:root {
  /* ============================================================
     COLOUR — canonical per the brand color guide (Jul 2026).
     PRIMARY: 4 families (Woodland Green, Cherry Blossom, Dune,
     Cadet Grey) — each = main colour + light/dark support shades.
     SECONDARY: Seashell, Pure White, Pure Black.
     Monotone approach — pick one base, layer its shades; never
     mix more than two palettes in the same composition.
     The legacy ramp tokens (olive-*/clay-*/sand-*/sky-*) below
     are a frozen compatibility table for pre-existing page CSS —
     every entry is a literal hex; '= name' comments mark which
     guide colour it duplicates. Change a guide colour → update
     the matching ramp literals here too.

     CHANGING A COLOUR? This file is the only CSS source; other
     surfaces sync from it — full registry in the header of
     includes/brand-colors.php (PHP palette for Stripe/emails,
     e2e rgb oracles, claude.ai design-project mirror).
     ============================================================ */

  /* —— BRAND GUIDE · PRIMARY COLORS —— */
  /* 1 — Woodland Green */
  --renera-woodland-green:       #5b7e50;   /* PMS 2265 C — main */
  --renera-woodland-green-light: #aedc91;   /* PMS 358 C */
  --renera-woodland-green-dark:  #354133;   /* PMS 350 C */
  /* 2 — Cherry Blossom */
  --renera-cherry-blossom:       #e9bba8;   /* PMS 489 C — main */
  --renera-cherry-blossom-light: #ffe8df;   /* PMS 9244 U */
  --renera-cherry-blossom-dark:  #bb8470;   /* PMS 10411 C — Terracotta */
  /* 3 — Dune */
  --renera-dune:                 #d6cdbc;   /* PMS 7534 C — main */
  --renera-dune-light:           #f3e9d5;   /* PMS 9224 C — warm parchment */
  --renera-dune-dark:            #7d776d;   /* Warm Gray 9 C */
  /* 4 — Cadet Grey */
  --renera-cadet-grey:           #cdd9e4;   /* PMS 650 C — main */
  --renera-cadet-grey-dark:      #425663;   /* PMS 2379 C — deep slate */

  /* —— BRAND GUIDE · SECONDARY COLORS —— */
  --renera-seashell:             #f6eee8;   /* default page surface */
  --renera-pure-white:           #ffffff;
  --renera-pure-black:           #000000;

  /* —— OLIVE (signature — most-used colour in the brand) —— */
  --renera-olive-900:  #232f1f;
  --renera-olive-800:  #354133;   /* = woodland-green-dark */
  --renera-olive-700:  #354133;   /* = woodland-green-dark — dominant brand fill (CTA, headers) */
  --renera-olive-600:  #464f39;
  --renera-olive-500:  #5b7e50;   /* = woodland-green — leaf accent */
  --renera-olive-400:  #767b68;
  --renera-olive-300:  #aedc91;   /* = woodland-green-light — light sage pop */
  --renera-olive-200:  #bcd7a5;
  --renera-olive-100:  #f1ffed;

  /* —— TERRACOTTA / CLAY (warm complement) —— */
  --renera-clay-700:   #bb8470;   /* = cherry-blossom-dark — terracotta accent fill */
  --renera-clay-500:   #e9bba8;   /* = cherry-blossom — pale terracotta */
  --renera-clay-300:   #e0ccbe;   /* warm sand hairline stroke */
  --renera-clay-200:   #ffe8df;   /* = cherry-blossom-light — palest peach */
  --renera-clay-100:   #fff6ef;   /* warm cream paper */

  /* —— SAND / CREAM (canonical page surface — not white) —— */
  --renera-sand-500:   #d6cdbc;   /* = dune */
  --renera-sand-400:   #f3e9d5;   /* = dune-light — warm parchment */
  --renera-sand-300:   #f6eee8;   /* = seashell — THE page background */
  --renera-sand-200:   #faf5ed;
  --renera-sand-100:   #fffaf3;

  /* —— SKY (cool counterpoint) —— */
  --renera-sky-700:    #425663;   /* = cadet-grey-dark — deep slate */
  --renera-sky-500:    #cdd9e4;   /* = cadet-grey — powder blue */

  /* —— NEUTRALS —— */
  --renera-ink:        #000000;   /* = pure-black */
  --renera-ink-soft:   #1B1B1B;   /* old ink, demoted — per colors_and_type.css in the design project */
  --renera-mute:       #7d776d;   /* = dune-dark */
  --renera-mute-2:     #c7c7c7;
  --renera-paper:      #ffffff;   /* = pure-white */
  --renera-line:       rgba(27, 27, 27, 0.10);

  /* —— THIRD-PARTY BRAND & OVERLAY (outside the five core palettes) —— */
  --renera-amazon-smile:  #f59e2c;                 /* Amazon store-badge swoosh — THIRD-PARTY brand colour, do NOT recolour in a Renéra rebrand */
  --renera-overlay-scrim: rgba(43, 38, 33, 0.55);  /* warm-dark wash over imagery (e.g. carousel caption chips) */

  /* —— SEMANTIC ROLES —— bound directly to the guide primitives above
     (no numbered-ramp bridge). Ramp tokens appear only where the shade
     has no guide name. */
  --renera-bg:         var(--renera-seashell);
  --renera-fg:         var(--renera-pure-black);
  --renera-accent:     var(--renera-woodland-green-dark);   /* #354133 */
  --renera-accent-2:   var(--renera-cherry-blossom-dark);
  --renera-success:    var(--renera-woodland-green);

  /* —— CLICKABLE ROLES —— single source of truth for buttons & links.
     Change these to restyle every primary button / action link site-wide. */
  --renera-btn-bg:         var(--renera-woodland-green-dark);    /* primary button, rest  */
  --renera-btn-fg:         var(--renera-sand-200);               /* no guide name for this cream */
  --renera-btn-bg-hover:   var(--renera-cherry-blossom-dark);    /* primary button, hover */
  --renera-btn-fg-hover:   var(--renera-olive-900);              /* no guide name for this shade */
  --renera-link:           var(--renera-woodland-green-dark);    /* action / UI link      */
  --renera-link-hover:     var(--renera-woodland-green);
  --renera-link-underline: var(--renera-clay-300);               /* no guide name for this shade */

  /* ============================================================
     TYPOGRAPHY
     Recoleta (display serif) + DM Sans (body sans) +
     DM Mono (technical labels / eyebrows).
     Rooftop was removed 2026-07-18: its files were trial-licensed
     (TRIAL_*), unfit for a commercial store. DM Sans/DM Mono were
     already the bundled fallbacks and are now the canonical faces.
     ============================================================ */
  --renera-font-serif:     'Recoleta', 'Newsreader', 'Cormorant Garamond', Georgia, serif;
  --renera-font-serif-alt: 'Recoleta Alt', 'Recoleta', 'Newsreader', Georgia, serif;
  --renera-font-sans:      'DM Sans', system-ui, -apple-system, sans-serif;
  --renera-font-mono:      'DM Mono', ui-monospace, Menlo, monospace;

  --renera-fs-eyebrow: 11px;
  --renera-fs-xs:      12px;
  --renera-fs-sm:      14px;
  --renera-fs-base:    16px;
  --renera-fs-md:      18px;
  --renera-fs-lg:      22px;
  --renera-fs-xl:      28px;
  --renera-fs-2xl:     40px;
  --renera-fs-3xl:     56px;
  --renera-fs-4xl:     80px;
  --renera-fs-5xl:     128px;

  --renera-lh-tight:   1.05;
  --renera-lh-snug:    1.2;
  --renera-lh-normal:  1.55;
  --renera-lh-loose:   1.75;

  --renera-track-serif:   -0.012em;
  --renera-track-sans:     0.01em;
  --renera-track-eyebrow:  0.18em;

  /* ============================================================
     SPACING — 4-step base-4 scale
     ============================================================ */
  --renera-sp-1:   4px;
  --renera-sp-2:   8px;
  --renera-sp-3:   12px;
  --renera-sp-4:   16px;
  --renera-sp-5:   24px;
  --renera-sp-6:   32px;
  --renera-sp-7:   48px;
  --renera-sp-8:   64px;
  --renera-sp-9:   96px;
  --renera-sp-10:  128px;

  /* ============================================================
     RADII — squircle (22%) is the brand signature shape
     ============================================================ */
  --renera-r-sm:       4px;
  --renera-r-md:       10px;
  --renera-r-lg:       16px;
  --renera-r-xl:       24px;
  --renera-r-squircle: 22%;
  --renera-r-pill:     999px;

  /* ============================================================
     SHADOWS — minimal; brand is print-derived. Use hairline
     borders first; shadow only for floating product cards.
     ============================================================ */
  --renera-shadow-card: 0 1px 2px rgba(27,27,27,0.04), 0 8px 24px rgba(27,27,27,0.06);
  --renera-shadow-lift: 0 12px 40px rgba(35,47,31,0.10);

  /* ============================================================
     MOTION — restrained, paper-like
     ============================================================ */
  --renera-ease:      cubic-bezier(0.32, 0.04, 0.21, 1);
  --renera-dur-fast:  160ms;
  --renera-dur-base:  240ms;
  --renera-dur-slow:  400ms;
}