/* ============================================================
   Zindagi Stories with GK — Design Tokens
   Modern literary. Colorful but classy. Story-like.
   ============================================================ */

/* ---------- Web fonts ---------- */
/* Display: Fraunces — modern slab/serif with literary character but a sharper, more contemporary feel than a classic newspaper face. Newspaper/slab direction was chosen, but Fraunces brings the "modern" lift the user asked for. */
/* Text:    Source Serif 4 — refined book serif; sits nicely under Fraunces */
/* Accent:  Caveat — a subtle handwritten note, used VERY sparingly for "letter from the host" moments */
/* UI:      Inter — neutral UI sans for chrome only (nav meta, captions, form labels) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400;1,8..60,600&family=Caveat:wght@500;600&family=Inter:wght@400;500;600&display=swap');

:root {
  /* ============================================================
     COLORS — Lively but classy.
     Core: deep aubergine-ink (primary surface for darks),
           warm cream paper (primary light surface),
           saffron-gold (warm accent, India-coded),
           indigo/violet (story / literary accent),
           teal (calm secondary).
     The vibe: a leather-bound novel printed with rich modern inks.
     ============================================================ */

  /* — Brand palette — */
  --ink:           #1a1330;  /* deep ink violet (almost-black with a plum cast) */
  --ink-soft:      #2d2247;
  --paper:         #faf5ec;  /* warm cream / paper */
  --paper-deep:    #f1e8d4;  /* aged page */
  --paper-edge:    #e6d9bc;

  --plum:          #4a1f6b;  /* rich plum/aubergine — primary brand */
  --plum-deep:     #2e1248;
  --plum-soft:     #6a3a92;

  --indigo:        #3047d6;  /* lively indigo — links, accents */
  --indigo-deep:   #1f2a8f;
  --indigo-soft:   #6b7df0;

  --saffron:       #e8a13a;  /* warm gold/saffron — highlights */
  --saffron-deep:  #b87520;
  --saffron-soft:  #f4c97a;

  --crimson:       #b23a48;  /* bookmark red, used sparingly */
  --crimson-deep:  #7a2330;

  --teal:          #1f7a72;  /* calm secondary */
  --teal-soft:     #4ea69e;

  /* — Neutrals on cream — */
  --fg-1:          #1a1330;  /* primary text on paper */
  --fg-2:          #4a3f5e;  /* secondary text */
  --fg-3:          #786d8a;  /* tertiary / meta */
  --fg-4:          #a89db5;  /* dim / hint */
  --rule:          #d6c9a8;  /* hairline rule on paper */
  --rule-soft:     #ece0c5;

  /* — Neutrals on ink (dark mode surfaces) — */
  --on-ink-1:      #faf5ec;
  --on-ink-2:      #d8cfdf;
  --on-ink-3:      #998daf;
  --on-ink-rule:   #3a2d58;

  /* — Semantic — */
  --bg:            var(--paper);
  --bg-elevated:   #ffffff;
  --bg-deep:       var(--paper-deep);
  --bg-ink:        var(--ink);
  --link:          var(--indigo);
  --link-hover:    var(--indigo-deep);
  --accent:        var(--saffron);
  --primary:       var(--plum);
  --primary-deep:  var(--plum-deep);
  --danger:        var(--crimson);
  --success:       var(--teal);

  /* Selection & focus */
  --selection-bg:  #f4c97a;
  --selection-fg:  var(--ink);
  --focus-ring:    0 0 0 3px rgba(48, 71, 214, 0.35);

  /* ============================================================
     TYPOGRAPHY — base scale
     Display: Fraunces (modern slab serif with literary character)
     Text:    Source Serif 4 (refined book serif)
     UI:      Inter (chrome only)
     Hand:    Caveat (rare, for "GK's note" moments)
     ============================================================ */
  --font-display: 'Fraunces', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-serif:   'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-ui:      'Inter', system-ui, -apple-system, sans-serif;
  --font-hand:    'Caveat', 'Source Serif 4', cursive;

  /* Modular scale — fluid */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-80: 5rem;
  --fs-96: 6rem;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-mega:   0.18em; /* eyebrow caps */

  /* ============================================================
     SPACING — 4pt grid
     ============================================================ */
  --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;
  --space-32: 128px;

  /* ============================================================
     RADII — soft, book-page corners
     ============================================================ */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ============================================================
     SHADOWS — printed paper / subtle ink
     Two systems: paper (soft warm) and ink (deeper, cooler)
     ============================================================ */
  --shadow-1: 0 1px 2px rgba(26, 19, 48, 0.06), 0 1px 1px rgba(26, 19, 48, 0.04);
  --shadow-2: 0 4px 12px rgba(26, 19, 48, 0.08), 0 2px 4px rgba(26, 19, 48, 0.04);
  --shadow-3: 0 12px 28px rgba(26, 19, 48, 0.12), 0 4px 8px rgba(26, 19, 48, 0.06);
  --shadow-4: 0 24px 60px rgba(26, 19, 48, 0.18), 0 8px 16px rgba(26, 19, 48, 0.08);
  --shadow-book: 0 14px 32px rgba(46, 18, 72, 0.22), 0 2px 6px rgba(46, 18, 72, 0.12); /* for hero cards */
  --shadow-inset-page: inset 0 0 0 1px rgba(214, 201, 168, 0.6);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Use these as classes OR copy the rules onto your elements.
   ============================================================ */

.zs-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-12);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mega);
  color: var(--plum);
}

.zs-h1, h1.zs {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 5vw + 1rem, var(--fs-96));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 50;
  text-wrap: balance;
}

.zs-h2, h2.zs {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 3vw + 0.5rem, var(--fs-64));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  font-variation-settings: "opsz" 96, "SOFT" 50;
  text-wrap: balance;
}

.zs-h3, h3.zs {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-30);
  line-height: var(--lh-snug);
  color: var(--ink);
  font-variation-settings: "opsz" 48;
  text-wrap: balance;
}

.zs-h4, h4.zs {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--ink);
}

.zs-lede {
  font-family: var(--font-serif);
  font-size: var(--fs-24);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  font-style: italic;
  text-wrap: pretty;
}

.zs-body, p.zs {
  font-family: var(--font-serif);
  font-size: var(--fs-18);
  line-height: var(--lh-loose);
  color: var(--fg-1);
  text-wrap: pretty;
}

.zs-body-sm {
  font-family: var(--font-serif);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.zs-pull {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-36);
  line-height: var(--lh-snug);
  color: var(--plum);
  letter-spacing: var(--tracking-tight);
}

.zs-meta, .zs-caption {
  font-family: var(--font-ui);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--fg-3);
  letter-spacing: 0.01em;
}

.zs-tag {
  font-family: var(--font-ui);
  font-size: var(--fs-12);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.zs-hand {
  font-family: var(--font-hand);
  font-size: var(--fs-30);
  color: var(--saffron-deep);
  line-height: 1;
}

/* Drop cap — for opening paragraphs of episode pages, "story" pages */
.zs-dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 5em;
  float: left;
  line-height: 0.85;
  margin: 0.05em 0.08em 0 -0.04em;
  color: var(--plum);
  font-style: normal;
}

/* ============================================================
   GLOBAL ELEMENT DEFAULTS (opt-in via .zs-prose wrapper)
   ============================================================ */
.zs-prose {
  font-family: var(--font-serif);
  color: var(--fg-1);
  font-size: var(--fs-18);
  line-height: var(--lh-loose);
}
.zs-prose h1 { font: 600 var(--fs-64)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-6); color: var(--ink); }
.zs-prose h2 { font: 600 var(--fs-36)/var(--lh-snug) var(--font-display); margin: var(--space-12) 0 var(--space-4); color: var(--ink); }
.zs-prose h3 { font: 600 var(--fs-24)/var(--lh-snug) var(--font-display); margin: var(--space-8) 0 var(--space-3); color: var(--ink); }
.zs-prose p  { margin: 0 0 var(--space-5); }
.zs-prose a  { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.zs-prose a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
.zs-prose blockquote {
  border-left: 3px solid var(--saffron);
  padding: var(--space-2) var(--space-6);
  margin: var(--space-8) 0;
  font-style: italic;
  color: var(--plum);
  font-family: var(--font-display);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
}
.zs-prose hr {
  border: 0;
  text-align: center;
  margin: var(--space-12) 0;
}
.zs-prose hr::before {
  content: "❦";  /* will be replaced w/ SVG ornament in production; placeholder */
  color: var(--saffron-deep);
  font-size: var(--fs-24);
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }