/* ============================================================
   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/
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,400&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=DM+Mono:wght@400;500&display=swap');

/* —— Recoleta (display serif) —— */
@font-face { font-family: 'Recoleta'; font-weight: 100; font-style: normal; font-display: swap;
  src: 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.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta'; font-weight: 400; font-style: normal; font-display: swap;
  src: 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.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta'; font-weight: 600; font-style: normal; font-display: swap;
  src: 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.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta'; font-weight: 900; font-style: normal; font-display: swap;
  src: 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.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta Alt'; font-weight: 300; font-style: normal; font-display: swap;
  src: 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.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta Alt'; font-weight: 500; font-style: normal; font-display: swap;
  src: 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.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta Alt'; font-weight: 700; font-style: normal; font-display: swap;
  src: 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.TTF') format('truetype'); }

/* —— Rooftop (body sans) —— */
@font-face { font-family: 'Rooftop'; font-weight: 100; font-style: normal; font-display: swap;
  src: url('../fonts/TRIAL_ROOFTOP-THIN.OTF') format('opentype'); }
@font-face { font-family: 'Rooftop'; font-weight: 100; font-style: italic; font-display: swap;
  src: url('../fonts/TRIAL_ROOFTOP-THINITALIC.OTF') format('opentype'); }
@font-face { font-family: 'Rooftop'; font-weight: 200; font-style: normal; font-display: swap;
  src: url('../fonts/TRIAL_ROOFTOP-EXTRALIGHT.OTF') format('opentype'); }
@font-face { font-family: 'Rooftop'; font-weight: 200; font-style: italic; font-display: swap;
  src: url('../fonts/TRIAL_ROOFTOP-EXTRALIGHTITALIC.OTF') format('opentype'); }
@font-face { font-family: 'Rooftop'; font-weight: 300; font-style: normal; font-display: swap;
  src: url('../fonts/TRIAL_ROOFTOP-LIGHT.OTF') format('opentype'); }
@font-face { font-family: 'Rooftop'; font-weight: 300; font-style: italic; font-display: swap;
  src: url('../fonts/TRIAL_ROOFTOP-LIGHTITALIC.OTF') format('opentype'); }
@font-face { font-family: 'Rooftop'; font-weight: 350; font-style: normal; font-display: swap;
  src: url('../fonts/TRIAL_ROOFTOP-BOOK.OTF') format('opentype'); }
@font-face { font-family: 'Rooftop'; font-weight: 350; font-style: italic; font-display: swap;
  src: url('../fonts/TRIAL_ROOFTOP-BOOKITALIC.OTF') format('opentype'); }
@font-face { font-family: 'Rooftop'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('../fonts/TRIAL_ROOFTOP-REGULAR.OTF') format('opentype'); }
@font-face { font-family: 'Rooftop'; font-weight: 400; font-style: italic; font-display: swap;
  src: url('../fonts/TRIAL_ROOFTOP-REGULARITALIC.OTF') format('opentype'); }
@font-face { font-family: 'Rooftop'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('../fonts/TRIAL_ROOFTOP-MEDIUM.OTF') format('opentype'); }
@font-face { font-family: 'Rooftop'; font-weight: 500; font-style: italic; font-display: swap;
  src: url('../fonts/TRIAL_ROOFTOP-MEDIUMITALIC.OTF') format('opentype'); }
@font-face { font-family: 'Rooftop'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('../fonts/TRIAL_ROOFTOP-BOLD.OTF') format('opentype'); }
@font-face { font-family: 'Rooftop'; font-weight: 700; font-style: italic; font-display: swap;
  src: url('../fonts/TRIAL_ROOFTOP-BOLDITALIC.OTF') format('opentype'); }
@font-face { font-family: 'Rooftop'; font-weight: 800; font-style: normal; font-display: swap;
  src: url('../fonts/TRIAL_ROOFTOP-EXTRABOLD.OTF') format('opentype'); }
@font-face { font-family: 'Rooftop'; font-weight: 800; font-style: italic; font-display: swap;
  src: url('../fonts/TRIAL_ROOFTOP-EXTRABOLDITALIC.OTF') format('opentype'); }

/* —— Rooftop Mono (technical labels / eyebrows) —— */
@font-face { font-family: 'Rooftop Mono'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('../fonts/TRIAL_ROOFTOPMONO-REGULAR.OTF') format('opentype'); }
@font-face { font-family: 'Rooftop Mono'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('../fonts/TRIAL_ROOFTOPMONO-MEDIUM.OTF') format('opentype'); }
@font-face { font-family: 'Rooftop Mono'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('../fonts/TRIAL_ROOFTOPMONO-BOLD.OTF') format('opentype'); }

:root {
  /* ============================================================
     COLOUR — "pastel earth tones" (canonical Figma brand).
     Five palette families; monotone approach — pick one base,
     layer its lighter/darker shades. Never mix more than two
     palettes in the same composition.
     ============================================================ */

  /* —— OLIVE (signature — most-used colour in the brand) —— */
  --renera-olive-900:  #232f1f;
  --renera-olive-800:  #35412e;
  --renera-olive-700:  #3d4231;   /* dominant brand fill — primary CTA, headers */
  --renera-olive-600:  #464f39;
  --renera-olive-500:  #5b7e50;   /* leaf accent — current prod placeholder primary */
  --renera-olive-400:  #767b68;
  --renera-olive-300:  #aedc91;   /* light sage pop */
  --renera-olive-200:  #bcd7a5;
  --renera-olive-100:  #f1ffed;

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

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

  /* —— SKY (cool counterpoint) —— */
  --renera-sky-700:    #425663;   /* deep slate — currently used as text colour in prod */
  --renera-sky-500:    #cdd9e4;   /* powder blue */

  /* —— NEUTRALS —— */
  --renera-ink:        #1B1B1B;
  --renera-ink-soft:   #202020;
  --renera-mute:       #766C60;
  --renera-mute-2:     #c7c7c7;
  --renera-paper:      #FFFFFF;
  --renera-line:       rgba(27, 27, 27, 0.10);

  /* —— SEMANTIC ROLES —— */
  --renera-bg:         var(--renera-sand-300);
  --renera-fg:         var(--renera-ink);
  --renera-accent:     var(--renera-olive-700);
  --renera-accent-2:   var(--renera-clay-700);
  --renera-success:    var(--renera-olive-500);

  /* ============================================================
     TYPOGRAPHY
     Recoleta (display serif) + Rooftop (body sans) +
     Rooftop Mono (technical labels / eyebrows).
     Google Fonts fallbacks: Newsreader / DM Sans / DM Mono.
     ============================================================ */
  --renera-font-serif:     'Recoleta', 'Newsreader', 'Cormorant Garamond', Georgia, serif;
  --renera-font-serif-alt: 'Recoleta Alt', 'Recoleta', 'Newsreader', Georgia, serif;
  --renera-font-sans:      'Rooftop', 'DM Sans', system-ui, -apple-system, sans-serif;
  --renera-font-mono:      'Rooftop 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;
}