/* ============================================================
   ORANE INTERNATIONAL — Design System Foundations
   Colors, Type, Radii, Shadows, Spacing
   ============================================================ */

/* ---- Fonts (loaded from Google Fonts — see index) ---- */
/* Poppins: primary UI + body sans (confirmed by client)
   Poppins: display serif w/ romantic italic (inferred match for "Apna skincare" headline)
   Poppins: condensed heavy sans for shout headlines (inferred match for "BRAND BANAO")
   -- Flagged substitutions; awaiting client confirmation of serif/condensed choices. */

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Primary — deep wine burgundy (OFFICIAL Orane brand color) */
  --wine-900: #3E0D1A;   /* darkest, for type on cream */
  --wine-800: #631529;   /* ★ OFFICIAL BRAND — R99 G21 B41 / CMYK 21-99-48-66 / #631529 */
  --wine-700: #7A2438;
  --wine-600: #9A3048;
  --wine-500: #B94764;

  /* Antique gold — secondary accent */
  --gold-900: #6E4E1E;
  --gold-700: #8A6A2E;
  --gold-600: #B08A4A;   /* PRIMARY gold — rule lines, small-caps dividers, accent badges */
  --gold-500: #C9A770;
  --gold-300: #E5D2A8;
  --gold-100: #F4E8CE;

  /* Cream / ivory backgrounds */
  --cream-50:  #FBF6EC;
  --cream-100: #F5EFE4;  /* PRIMARY canvas — most marketing surfaces */
  --cream-200: #EBE3D3;
  --cream-300: #DDD1BB;

  /* Neutral warm — photography shadow tone, body copy on cream */
  --ink-900: #1C1410;    /* near-black, warm */
  --ink-700: #3B2E28;
  --ink-500: #6B584F;    /* secondary body */
  --ink-400: #8E7B71;    /* tertiary / captions */
  --ink-200: #C9BDB3;
  --ink-100: #E6DED4;

  /* Pink accents — festive/Bollywood pink for ads + youth-facing ad surfaces */
  --pink-700: #B0264D;
  --pink-500: #D94872;
  --pink-300: #F19FB4;
  --pink-100: #FADDE3;

  /* Semantic */
  --success: #4A7A3A;    /* muted leaf green, pairs with cream */
  --warning: #C68A2E;
  --danger:  #B0332D;
  --info:    --wine-700;

  /* ---------- SEMANTIC TOKENS ---------- */
  --bg-canvas:        var(--cream-100);
  --bg-surface:       #FFFFFF;
  --bg-surface-warm:  var(--cream-50);
  --bg-inverse:       var(--wine-800);

  --fg-default:       var(--wine-900);
  --fg-muted:         var(--ink-500);
  --fg-subtle:        var(--ink-400);
  --fg-on-wine:       var(--cream-50);
  --fg-on-gold:       var(--wine-900);
  --fg-brand:         var(--wine-800);
  --fg-accent:        var(--gold-600);

  --border-default:   var(--ink-200);
  --border-subtle:    var(--cream-300);
  --border-strong:    var(--wine-800);
  --border-gold:      var(--gold-600);

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans:    'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-serif:   'Poppins', 'Helvetica Neue', Arial, sans-serif;  /* Same family; italic+weight do the display work */
  --font-logo-serif: 'Cinzel', 'Trajan Pro', 'Optima', serif;      /* Only for "INTERNATIONAL" wordmark treatment */
  --font-display: 'Poppins', 'Helvetica Neue', Arial, sans-serif;  /* Use 800/900 weights for shout */
  --font-devanagari: 'Poppins', 'Noto Sans Devanagari', sans-serif;

  /* Type scale — mobile-first; desktop sizes use clamp() */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   40px;
  --text-4xl:   52px;
  --text-5xl:   68px;
  --text-6xl:   88px;
  --text-7xl:   120px; /* BRAND BANAO-style shout */

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.65;

  /* Letter spacing */
  --tracking-shout:  -0.02em;   /* condensed display */
  --tracking-serif:  -0.01em;
  --tracking-normal: 0;
  --tracking-label:  0.14em;    /* small-caps labels like "NEW · 90-DAY CERTIFICATION" */
  --tracking-label-loose: 0.22em;

  /* ---------- SPACING (8px rhythm) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- RADII ---------- */
  --radius-none: 0;
  --radius-xs:   2px;    /* pills in course-module grid */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;   /* stat cards */
  --radius-2xl:  32px;
  --radius-pill: 999px;
  --radius-circle: 50%;  /* the signature circular photo crop */

  /* ---------- SHADOWS (soft, warm) ---------- */
  --shadow-xs:  0 1px 2px rgba(28, 20, 16, 0.04);
  --shadow-sm:  0 2px 6px rgba(58, 30, 28, 0.06);
  --shadow-md:  0 8px 20px rgba(58, 30, 28, 0.08);
  --shadow-lg:  0 18px 40px rgba(58, 30, 28, 0.10);
  --shadow-xl:  0 30px 70px rgba(58, 30, 28, 0.14);

  /* ---------- MOTION ---------- */
  --ease-out-soft:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  /* ---------- LAYOUT ---------- */
  --container-sm:  640px;
  --container-md:  880px;
  --container-lg:  1140px;
  --container-xl:  1320px;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

/* Small-caps eyebrow label — "NEW · 90-DAY CERTIFICATION" */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--wine-800);
}
.eyebrow--gold { color: var(--gold-600); }
.eyebrow--muted { color: var(--ink-400); }

/* Display headline (Poppins) — romantic italic-accented treatment */
.headline-serif {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 72px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-serif);
  color: var(--wine-900);
}
.headline-serif em,
.headline-serif i {
  font-style: italic;
  font-weight: 600;
  /* combine with a gold underline via .gold-rule */
}

/* Shout display — Poppins 800/900 in ALL CAPS for "BRAND BANAO" */
.headline-shout {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(72px, 11vw, 160px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--wine-900);
}

/* Standard H1–H6 (sans, for most web/product UI) */
.h1, h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  color: var(--fg-default);
}
.h2, h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg-default);
}
.h3, h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.25;
  color: var(--fg-default);
}
.h4, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.35;
}

/* Body */
.body, p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-default);
}
.body-lg { font-size: var(--text-md); }
.body-sm { font-size: var(--text-sm); }
.body-muted { color: var(--fg-muted); }
.strong { font-weight: 600; color: var(--wine-800); }

/* Caption / meta */
.caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--fg-subtle);
  letter-spacing: 0.01em;
}

/* Trust-strip — "120+ ACADEMIES · 22 STATES · SINCE 2002" */
.trust-strip {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label-loose);
  color: var(--ink-500);
  text-transform: uppercase;
}

/* Gold rule underline — appears under italic emphasis in serif headlines */
.gold-rule {
  position: relative;
  display: inline-block;
}
.gold-rule::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -0.12em;
  height: 2px;
  background: var(--gold-600);
}

/* ============================================================
   BASE
   ============================================================ */
html, body {
  background: var(--bg-canvas);
  color: var(--fg-default);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--wine-800);
  color: var(--cream-50);
}