/* ============================================================
   ItsManaswini — Design Tokens
   ------------------------------------------------------------
   Color, type, spacing, radii, shadows.
   Import once and reference everywhere via `var(--token)`.
   ============================================================ */

/* -------- Fonts (Google Fonts — flagged substitutions) ------ */
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Caveat:wght@500;600;700&family=Anton&family=Sacramento&family=Mandali&display=swap");

:root {
  /* ===========================================================
     COLOR
     ----------------------------------------------------------- */

  /* --- Base / canvas --- */
  --cream-50:   #FBF6EC;  /* page background, default surface */
  --cream-100:  #F5EBD6;  /* card on cream, raised tint */
  --cream-200:  #ECDDBE;  /* divider, subtle inset */
  --paper-0:    #FFFCF5;  /* lightest highlight, NEVER pure white */

  /* --- Ink (text + outline) --- */
  --ink-900:    #1F140C;  /* primary text */
  --ink-700:    #3A2A1C;  /* secondary text */
  --ink-500:    #6B5747;  /* tertiary text / placeholder */
  --ink-300:    #A6917D;  /* disabled */

  /* --- Honey (PRIMARY hero — namesake) --- */
  --honey-50:   #FFF6DC;
  --honey-200:  #FBE38A;
  --honey-400:  #F5C242;
  --honey-500:  #E9A800;  /* signature gold */
  --honey-600:  #C58A00;
  --honey-800:  #7A5400;

  /* --- Maroon (anchor / classic elegance) --- */
  --maroon-100: #F2D4D8;
  --maroon-400: #9B2D3A;
  --maroon-600: #6E1C26;  /* signature maroon */
  --maroon-800: #4A121C;
  --maroon-900: #2C0810;

  /* --- Marigold (energy) --- */
  --marigold-300:#FFC36E;
  --marigold-500:#F08A1C;
  --marigold-700:#B85F00;

  /* --- Sindoor (pop / feminine) --- */
  --sindoor-300:#FFB3B5;
  --sindoor-500:#E5495E;
  --sindoor-700:#A8243B;

  /* --- Stage pink (brush-script flourish — "thank you") --- */
  --stage-pink-300:#FF8FBE;
  --stage-pink-500:#FF3E8F;
  --stage-pink-700:#C2155C;

  /* --- Stage canvas (true black for cinematic surfaces) --- */
  --stage-bg:    #050302;  /* video-grade black for hero photography */
  --stage-bg-2:  #14100A;  /* slight warm lift for layered surfaces */

  /* --- Mehndi (single leaf green wildcard) --- */
  --mehndi-300: #BCD18F;
  --mehndi-500: #6E8C3A;
  --mehndi-700: #45591F;

  /* --- Jasmine (soft highlight) --- */
  --jasmine-100:#FFFAEC;
  --jasmine-300:#FFEFC2;

  /* --- Semantic --- */
  --bg:         var(--cream-50);
  --bg-raised: var(--cream-100);
  --bg-inset:  var(--cream-200);
  --bg-invert: var(--maroon-800);

  --fg:        var(--ink-900);
  --fg-muted:  var(--ink-500);
  --fg-faint:  var(--ink-300);
  --fg-invert: var(--cream-50);

  --accent:        var(--honey-500);
  --accent-strong: var(--honey-600);
  --accent-soft:   var(--honey-200);

  --anchor:        var(--maroon-600);
  --anchor-strong: var(--maroon-800);
  --anchor-soft:   var(--maroon-100);

  --energy:        var(--marigold-500);
  --pop:           var(--sindoor-500);
  --stage:         var(--stage-pink-500);
  --wild:          var(--mehndi-500);

  --border:        var(--ink-900);
  --border-soft:   rgba(31,20,12,.18);

  --success:       var(--mehndi-500);
  --warning:       var(--marigold-500);
  --danger:        var(--sindoor-700);

  /* ===========================================================
     TYPOGRAPHY
     -----------------------------------------------------------
     Display serif → DM Serif Display (sub for an elegant
       Didone-style face; flag for real brand font.)
     Sans body    → Plus Jakarta Sans (friendly, readable)
     Handwritten  → Caveat (chaos accent — short bursts only)
     Telugu       → Mandali (Telugu script support)
     ----------------------------------------------------------- */

  --font-display:   "DM Serif Display", "Cormorant Garamond", Georgia, serif;
  --font-body:      "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-marker:    "Caveat", "Bradley Hand", cursive;
  --font-script:    "Sacramento", "Allura", cursive;          /* brush-script flourish */
  --font-poster:    "Anton", "Bebas Neue", "Oswald", Impact, sans-serif;  /* chunky thumbnail titles */
  --font-telugu:    "Mandali", "Plus Jakarta Sans", sans-serif;

  /* Type scale (1.25 modular, anchored at 16px) */
  --t-xs:    12px;
  --t-sm:    14px;
  --t-base:  16px;
  --t-md:    18px;
  --t-lg:    22px;
  --t-xl:    28px;
  --t-2xl:   36px;
  --t-3xl:   48px;
  --t-4xl:   64px;
  --t-5xl:   84px;
  --t-hero: 112px;

  --lh-tight: 1.05;
  --lh-snug:  1.20;
  --lh-body:  1.55;
  --lh-loose: 1.75;

  --tracking-tight: -0.02em;
  --tracking-body:  0em;
  --tracking-wide:  0.08em;
  --tracking-shout: 0.18em;

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

  /* ===========================================================
     RADII
     ----------------------------------------------------------- */
  --r-sm:   6px;
  --r-md:  12px;   /* cards */
  --r-lg:  18px;   /* hero panels */
  --r-xl:  28px;
  --r-pill: 999px; /* tags, chips, buttons */

  /* ===========================================================
     SHADOWS (warm, never neutral)
     ----------------------------------------------------------- */
  --sh-1:
    0 1px 0 rgba(74,18,28,.06),
    0 2px 6px -2px rgba(74,18,28,.10);
  --sh-2:
    0 1px 0 rgba(74,18,28,.06),
    0 12px 24px -12px rgba(74,18,28,.18);
  --sh-3:
    0 2px 0 rgba(74,18,28,.08),
    0 24px 40px -18px rgba(74,18,28,.22);
  --sh-press:
    inset 0 2px 0 rgba(74,18,28,.10);
  --sh-glow-honey:
    0 0 0 6px rgba(245,194,66,.20),
    0 12px 28px -10px rgba(233,168,0,.45);

  /* ===========================================================
     MOTION
     ----------------------------------------------------------- */
  --ease-in:    cubic-bezier(.4,0,.6,1);
  --ease-out:   cubic-bezier(.2,.8,.2,1);
  --ease-bounce:cubic-bezier(.2,1.3,.4,1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
}

/* ============================================================
   SEMANTIC TYPE PRIMITIVES
   Use as class hooks OR copy the rules into your component.
   ============================================================ */

body, .body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: "ss01", "cv11";
}

.display-hero {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.h1, h1 {
  font-family: var(--font-display);
  font-size: var(--t-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--sp-4) 0;
  color: var(--fg);
}

.h2, h2 {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--sp-3) 0;
}

.h3, h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  margin: 0 0 var(--sp-2) 0;
}

.h4, h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-2) 0;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-shout);
  text-transform: uppercase;
  color: var(--anchor);
}

.lede {
  font-family: var(--font-body);
  font-size: var(--t-lg);
  line-height: var(--lh-body);
  color: var(--ink-700);
  font-weight: 400;
}

p { margin: 0 0 var(--sp-4) 0; }

small, .small {
  font-size: var(--t-sm);
  color: var(--fg-muted);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.marker {
  font-family: var(--font-marker);
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: 1;
  color: var(--anchor);
  transform: rotate(-3deg);
  display: inline-block;
}

.telugu {
  font-family: var(--font-telugu);
}

/* The iconic thumbnail title:
   chunky yellow condensed sans with thick red drop shadow.
   Reserved for video thumbnails, posters, merch graphics. */
.poster {
  font-family: var(--font-poster);
  font-weight: 400;
  font-size: var(--t-4xl);
  line-height: .88;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--honey-400);
  -webkit-text-stroke: 2px var(--ink-900);
  text-shadow:
    4px 4px 0 var(--maroon-600),
    4px 4px 0 var(--ink-900);
  font-style: italic;
  transform: skewX(-4deg);
  display: inline-block;
}

.script {
  font-family: var(--font-script);
  font-size: var(--t-3xl);
  line-height: 1;
  color: var(--stage-pink-500);
}

.shout {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--t-base);
  letter-spacing: var(--tracking-shout);
  text-transform: uppercase;
}

a {
  color: var(--anchor);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { color: var(--accent-strong); }

/* ============================================================
   THE BRAND MARK
   The unified "it's Manaswini." identity treatment.
   ------------------------------------------------------------
   Usage:
     <span class="brand-mark">
       <span class="brand-its">it&rsquo;s</span><em>Manaswini.</em>
     </span>
   The wrapper sets the size via font-size on the *parent*;
   .brand-its scales relative to it. Always inline,
   always baseline-aligned, always one piece.
   ============================================================ */
.brand-mark {
  font-family: var(--font-display);
  letter-spacing: -.02em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: .12em;
  white-space: nowrap;
}
.brand-mark em {
  font-style: italic;
  color: inherit;
}
.brand-its {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--maroon-600);
  display: inline-block;
  line-height: 1;
  letter-spacing: 0;
  /* default (small surfaces — nav, footer, body):
     near-full size script tucked next to the wordmark */
  font-size: .82em;
  transform: translateY(-.08em) rotate(-4deg);
}

/* Display variant — for hero / cover / large display use.
   "it's" shrinks to ~30% and rises to the cap-height of M,
   so the eye reads "it's | Manaswini." as one logo. */
.brand-mark.display .brand-its {
  font-size: .30em;
  transform: translateY(-2.1em) rotate(-4deg);
}

/* Color contexts. Default is maroon on cream/paper.
   On stage / dark backgrounds, switch to honey for warm contrast. */
.brand-mark.on-stage .brand-its,
.brand-mark.on-dark  .brand-its { color: var(--honey-400); }


/* ============================================================
   UTILITY SURFACES
   ============================================================ */

.surface-cream { background: var(--cream-50); color: var(--fg); }
.surface-paper { background: var(--paper-0); color: var(--fg); }
.surface-honey { background: var(--honey-500); color: var(--ink-900); }
.surface-maroon{ background: var(--maroon-600); color: var(--cream-50); }
.surface-ink   { background: var(--ink-900); color: var(--cream-50); }