/* =========================================================================
   ORSEV — Design Tokens
   Premium supplement brand · nature + science · warm, editorial, verified
   ========================================================================= */

/* Webfonts — Google Fonts (free, served by upstream) ----------------------- */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Montserrat:wght@700;800&family=Playfair+Display:ital,wght@1,400;1,500;1,600&display=swap");

:root {
  /* ---------- Color · Primary ------------------------------------------- */
  --iv-gold:           #E89C0D;   /* Or ORSEV — signature, CTA, "9X" badge */
  --iv-cacao:          #451604;   /* Cacao profond — primary text, anchor */

  /* ---------- Color · Secondary ----------------------------------------- */
  --iv-bronze:         #D48121;   /* hover, golden shadow, depth */
  --iv-champagne:      #F4E3BE;   /* label fields, premium sections */
  --iv-cacao-mid:      #7A3B1F;   /* sub-titles, secondary text */

  /* ---------- Color · Neutral ------------------------------------------- */
  --iv-white:          #FFFFFF;   /* primary background */
  --iv-cream:          #FAF6EE;   /* alternating sections */
  --iv-brown-black:    #1A0E07;   /* footer, dark mode (never pure black) */

  /* ---------- Color · Functional / extended ----------------------------- */
  --iv-gold-soft:      #F4B842;   /* top of metallic gradient */
  --iv-gold-deep:      #B5760A;   /* deepest gold, pressed/hover-deep */
  --iv-gold-20:        rgba(232, 156, 13, 0.20);  /* gold/20 borders */
  --iv-gold-10:        rgba(232, 156, 13, 0.10);
  --iv-cacao-65:       rgba(26, 14, 7, 0.65);     /* modal backdrop */
  --iv-success:        #2F7A3A;   /* "VERIFIED" dot (muted forest green) */
  --iv-warn-bg:        #FDF1E1;   /* warning callout fill */
  --iv-warn-fg:        #7A3B1F;   /* warning text */

  /* ---------- Semantic foreground / background -------------------------- */
  --fg-1:              var(--iv-cacao);          /* main text */
  --fg-2:              var(--iv-cacao-mid);      /* secondary text */
  --fg-3:              rgba(69, 22, 4, 0.55);    /* tertiary / captions */
  --fg-on-dark:        var(--iv-cream);          /* text on brown-black */
  --fg-accent:         var(--iv-gold);

  --bg-1:              var(--iv-white);
  --bg-2:              var(--iv-cream);
  --bg-premium:        var(--iv-champagne);
  --bg-dark:           var(--iv-brown-black);

  --border-1:          rgba(69, 22, 4, 0.10);
  --border-gold:       var(--iv-gold-20);

  /* ---------- Gradients ------------------------------------------------- */
  --grad-gold-metallic: linear-gradient(180deg,
                          #F4B842 0%,
                          #E89C0D 50%,
                          #D48121 100%);
  --grad-card-premium: linear-gradient(135deg,
                          rgba(244, 227, 190, 0.40) 0%,
                          var(--iv-cream) 100%);
  --grad-hero-warm:    linear-gradient(180deg,
                          var(--iv-cream) 0%,
                          var(--iv-white) 100%);

  /* ---------- Type · Families ------------------------------------------- */
  --font-display:      "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --font-headline:     "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:         "Manrope", "Inter", system-ui, sans-serif;

  /* ---------- Type · Scale (mobile-first, 1.250 ratio) ------------------ */
  --t-xs:      0.75rem;    /* 12 — micro labels, asterisk footnote */
  --t-sm:      0.875rem;   /* 14 — captions, FAQ body */
  --t-base:    1rem;       /* 16 — body */
  --t-md:      1.125rem;   /* 18 — lead paragraph */
  --t-lg:      1.375rem;   /* 22 — card title */
  --t-xl:      1.75rem;    /* 28 — section title (mobile) */
  --t-2xl:     2.25rem;    /* 36 — H1 (mobile) */
  --t-3xl:     3rem;       /* 48 — editorial H1 (≥sm) */
  --t-4xl:     4rem;       /* 64 — section number "01" */
  --t-5xl:     5.5rem;     /* 88 — display / hero numeral */

  /* ---------- Type · Tracking / Leading --------------------------------- */
  --tr-tight:   -0.02em;   /* Montserrat headlines */
  --tr-snug:    -0.01em;
  --tr-normal:  0;
  --tr-wide:    0.08em;    /* small uppercase eyebrows */
  --tr-widest:  0.18em;    /* "VERIFIED" badge, trust bar */

  --lh-tight:   1.05;      /* display */
  --lh-snug:    1.2;       /* headlines */
  --lh-normal:  1.55;      /* body */
  --lh-relaxed: 1.7;

  /* ---------- Spacing (4px base) ---------------------------------------- */
  --s-1:  0.25rem;  /*  4 */
  --s-2:  0.5rem;   /*  8 */
  --s-3:  0.75rem;  /* 12 */
  --s-4:  1rem;     /* 16 */
  --s-5:  1.5rem;   /* 24 */
  --s-6:  2rem;     /* 32 */
  --s-7:  3rem;     /* 48 */
  --s-8:  4rem;     /* 64 */
  --s-9:  6rem;     /* 96 — section gutter on desktop */

  /* ---------- Radii ----------------------------------------------------- */
  --r-xs:  0.25rem;
  --r-sm:  0.5rem;
  --r-md:  0.75rem;
  --r-lg:  1rem;     /* default card */
  --r-xl:  1.5rem;   /* premium card / modal */
  --r-pill: 999px;

  /* ---------- Shadows --------------------------------------------------- */
  --sh-1:  0 1px 2px rgba(69, 22, 4, 0.06);
  --sh-2:  0 4px 12px rgba(69, 22, 4, 0.08);
  --sh-3:  0 12px 32px rgba(69, 22, 4, 0.12);                /* card lift */
  --sh-gold: 0 8px 24px rgba(232, 156, 13, 0.28);            /* CTA glow */
  --sh-inset-gold: inset 0 1px 0 rgba(255, 255, 255, 0.35),  /* metallic */
                   inset 0 -2px 0 rgba(181, 118, 10, 0.35);

  /* ---------- Layout ---------------------------------------------------- */
  --container-mobile: 28rem;   /* 448px — mobile-first cap */
  --container-prose:  42rem;
  --container-wide:   72rem;

  /* ---------- Motion ---------------------------------------------------- */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:      160ms;
  --dur-base:      280ms;
  --dur-slow:      400ms;   /* modal open */

  /* ---------- Signature texture: dorée poussière ------------------------ */
  --texture-gold-dust:
    radial-gradient(circle, var(--iv-gold) 1px, transparent 1.2px) 0 0 / 8px 8px;
}

/* =========================================================================
   Semantic element styles (cascade defaults)
   ========================================================================= */

html { color-scheme: light; }

body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ----- Logo / brand wordmark -------------------------------------------- */
.iv-logo {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--iv-gold);
  letter-spacing: 0;
  line-height: 1;
}

/* ----- Editorial display (Playfair italic) ------------------------------ */
.iv-display,
h1.iv-editorial,
.iv-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--fg-1);
  letter-spacing: var(--tr-snug);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

/* ----- Headlines (Montserrat ExtraBold UPPERCASE) ----------------------- */
h1, h2, h3,
.iv-h1, .iv-h2, .iv-h3 {
  font-family: var(--font-headline);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}
h1, .iv-h1 { font-size: var(--t-2xl); }
h2, .iv-h2 { font-size: var(--t-xl); }
h3, .iv-h3 { font-size: var(--t-lg); letter-spacing: var(--tr-snug); }

/* ----- Eyebrow (small uppercase, gold or cacao-mid) --------------------- */
.iv-eyebrow {
  font-family: var(--font-headline);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--t-xs);
  letter-spacing: var(--tr-widest);
  color: var(--iv-cacao-mid);
}

/* ----- Section numeral (Playfair italic, large) ------------------------- */
.iv-numeral {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-4xl);
  color: var(--iv-gold);
  line-height: 1;
}

/* ----- Body / paragraph ------------------------------------------------- */
p, .iv-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  text-wrap: pretty;
}
.iv-lead {
  font-size: var(--t-md);
  color: var(--fg-1);
  font-weight: 500;
}
.iv-caption {
  font-size: var(--t-sm);
  color: var(--fg-3);
}

/* ----- Disclaimer (FDA footnote) ---------------------------------------- */
.iv-disclaimer {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  line-height: var(--lh-relaxed);
  color: var(--fg-3);
  font-style: italic;
}
.iv-asterisk { color: var(--iv-gold); }

/* ----- Links ------------------------------------------------------------ */
a {
  color: var(--iv-gold-deep);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--iv-bronze); }