/* ──────────────────────────────────────────────────────────────
   Natura Líderes — Colors & Type
   Warm earth palette · Whyte Inktrap (sans) · PP Hatton (serif)
   ────────────────────────────────────────────────────────────── */

/* ── Webfonts ─────────────────────────────────────────────────── */
@font-face {
  font-family: "Whyte Inktrap";
  src: url("fonts/WhyteInktrap-Thin.ttf") format("truetype");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Whyte Inktrap";
  src: url("fonts/WhyteInktrap-ExtraLight.ttf") format("truetype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Whyte Inktrap";
  src: url("fonts/WhyteInktrap-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Whyte Inktrap";
  src: url("fonts/WhyteInktrap-Book.ttf") format("truetype");
  font-weight: 380; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Whyte Inktrap";
  src: url("fonts/WhyteInktrap-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Whyte Inktrap";
  src: url("fonts/WhyteInktrap-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Whyte Inktrap";
  src: url("fonts/WhyteInktrap-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Whyte Inktrap";
  src: url("fonts/WhyteInktrap-Heavy.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Whyte Inktrap";
  src: url("fonts/WhyteInktrap-Black.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Whyte Inktrap";
  src: url("fonts/WhyteInktrap-Super.ttf") format("truetype");
  font-weight: 950; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "PP Hatton";
  src: url("fonts/PPHatton-Ultralight.otf") format("opentype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Hatton";
  src: url("fonts/PPHatton-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Hatton";
  src: url("fonts/PPHatton-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ── Tokens ───────────────────────────────────────────────────── */
:root {
  /* Brand orange — pulled directly from natura wordmark (#D55A1A range) */
  --natura-orange:        #D5571A;   /* primary signature */
  --natura-orange-deep:   #B8430C;   /* press / deep accent */
  --natura-orange-soft:   #E97D3F;   /* hover, secondary */
  --natura-orange-tint:   #F4D9C2;   /* surface tint */
  --natura-orange-wash:   #FBEFE3;   /* page wash */

  /* Earth core — terra, clay, sand, cocoa */
  --terracotta:           #C9532E;
  --clay:                 #A0481E;
  --cocoa:                #5C2E15;
  --umber:                #3D1F0E;
  --sand:                 #E8D6BC;
  --sand-light:           #F2E5D0;
  --bone:                 #F7EFE2;
  --cream:                #FAF5EC;

  /* Greens & accents — botanical, used sparingly */
  --moss:                 #5E6B3B;
  --olive:                #8A8C4F;
  --leaf:                 #A8B27A;
  --eucalyptus:           #C9D4B5;
  --ochre:                #C68B3C;
  --honey:                #E5A85B;
  --plum:                 #7B3A4C;

  /* Neutrals (warm-bias) */
  --ink:                  #1F1611;   /* primary text on light */
  --ink-2:                #4A3A30;   /* secondary text */
  --ink-3:                #7A6A5E;   /* tertiary, captions */
  --ink-4:                #B0A294;   /* disabled, hairline */
  --paper:                #FFFFFF;
  --paper-warm:           #FAF5EC;   /* default light bg (cream) */
  --paper-tint:           #F4ECDD;
  --line:                 #E5D9C5;
  --line-strong:          #C9B89C;

  /* Semantic colors (warm-shifted) */
  --success:              #6B8244;
  --warning:              #C68B3C;
  --danger:               #B23B22;
  --info:                 #6F7D5A;

  /* Foreground / background semantic vars */
  --bg:                   var(--paper-warm);
  --bg-elev-1:            var(--paper);
  --bg-elev-2:            var(--paper);
  --bg-inverse:           var(--umber);
  --bg-accent:            var(--natura-orange);
  --bg-accent-soft:       var(--natura-orange-wash);

  --fg:                   var(--ink);
  --fg-1:                 var(--ink);
  --fg-2:                 var(--ink-2);
  --fg-3:                 var(--ink-3);
  --fg-on-accent:         #FFFFFF;
  --fg-on-inverse:        var(--cream);

  /* Type families */
  --font-display:         "PP Hatton", "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-sans:            "Whyte Inktrap", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:            "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (px-style, but rem-friendly) */
  --fs-display-xl:        clamp(60px, 9vw, 128px);
  --fs-display-lg:        clamp(48px, 6.5vw, 96px);
  --fs-display:           clamp(40px, 5vw, 72px);
  --fs-h1:                48px;
  --fs-h2:                36px;
  --fs-h3:                28px;
  --fs-h4:                22px;
  --fs-h5:                18px;
  --fs-body-lg:           18px;
  --fs-body:              16px;
  --fs-body-sm:           14px;
  --fs-caption:           12px;
  --fs-eyebrow:           11px;

  /* Line heights */
  --lh-tight:             1.02;
  --lh-snug:              1.15;
  --lh-normal:            1.35;
  --lh-relaxed:           1.5;
  --lh-loose:             1.7;

  /* Tracking */
  --ls-tight:             -0.02em;
  --ls-normal:            0em;
  --ls-wide:              0.02em;
  --ls-eyebrow:           0.18em;

  /* Spacing scale */
  --space-1:              4px;
  --space-2:              8px;
  --space-3:              12px;
  --space-4:              16px;
  --space-5:              20px;
  --space-6:              24px;
  --space-8:              32px;
  --space-10:             40px;
  --space-12:             48px;
  --space-16:             64px;
  --space-20:             80px;
  --space-24:             96px;

  /* Radii — Natura tends toward soft pills + organic rounded */
  --radius-1:             4px;
  --radius-2:             8px;
  --radius-3:             12px;
  --radius-4:             20px;
  --radius-5:             28px;
  --radius-pill:          999px;
  --radius-blob:          48% 52% 60% 40% / 55% 45% 55% 45%;

  /* Shadows — soft, warm-tinted */
  --shadow-1:             0 1px 2px rgba(60, 30, 10, 0.06);
  --shadow-2:             0 4px 14px rgba(60, 30, 10, 0.08);
  --shadow-3:             0 12px 30px rgba(60, 30, 10, 0.10);
  --shadow-4:             0 24px 60px rgba(60, 30, 10, 0.14);
  --shadow-inset:         inset 0 0 0 1px rgba(60, 30, 10, 0.06);

  /* Borders */
  --border-hair:          1px solid var(--line);
  --border-strong:        1px solid var(--line-strong);

  /* Motion */
  --ease-out:             cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-in-out:          cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft-bounce:     cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-1:                120ms;
  --dur-2:                220ms;
  --dur-3:                360ms;
  --dur-4:                560ms;
}

/* ── Base ─────────────────────────────────────────────────────── */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Semantic typography (use as utility classes) ─────────────── */
.t-display-xl,
.t-display-lg,
.t-display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
.t-display-xl { font-size: var(--fs-display-xl); font-weight: 700; }
.t-display-lg { font-size: var(--fs-display-lg); }
.t-display    { font-size: var(--fs-display); }

.t-h1, .t-h2, .t-h3, .t-h4, .t-h5 {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--fg-1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
.t-h1 { font-size: var(--fs-h1); font-weight: 700; }
.t-h2 { font-size: var(--fs-h2); font-weight: 600; }
.t-h3 { font-size: var(--fs-h3); font-weight: 500; }
.t-h4 { font-size: var(--fs-h4); font-weight: 500; }
.t-h5 { font-size: var(--fs-h5); font-weight: 500; letter-spacing: var(--ls-normal); }

.t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--fg-2); }
.t-body    { font-size: var(--fs-body);    line-height: var(--lh-relaxed); color: var(--fg-2); }
.t-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); color: var(--fg-2); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-normal);  color: var(--fg-3); }

.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

.t-serif { font-family: var(--font-display); font-weight: 500; letter-spacing: var(--ls-tight); }
.t-italic { font-style: italic; }

/* Text in copy that needs the orange accent */
.t-accent { color: var(--natura-orange); }
.t-on-dark { color: var(--cream); }