/* ==========================================================================
   Winfrey Publishing — Design tokens
   Palette derived from the brand mark: charcoal wordmark, the traveller's
   bronze coat, the amber lantern flame, denim slate and warm earth.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- Brand */
  --ink:            #1c1b19;   /* primary — the WINFREY wordmark            */
  --ink-800:        #2a2723;
  --ink-700:        #3a352f;
  --ink-600:        #4d463e;

  --bronze:         #b9793f;   /* secondary — the traveller's coat          */
  --bronze-700:     #9a6231;
  --bronze-600:     #a86e38;
  --bronze-400:     #cf9c6b;
  --bronze-200:     #e8d0b4;
  --bronze-50:      #f7ede1;

  --lantern:        #e9a13b;   /* accent — the flame and its glow rays      */
  --lantern-600:    #d18d29;
  --lantern-300:    #f4c886;
  --lantern-100:    #fdf1dd;

  --ember:          #8a5423;   /* deep accent — the earth beneath the figure */
  --slate:          #3e4a5c;   /* supporting cool — the denim trousers      */
  --slate-600:      #55637a;
  --slate-200:      #c9d0da;

  /* ------------------------------------------------------------ Neutrals */
  --parchment:      #fbf7f1;   /* warm light background                     */
  --parchment-200:  #f4ede3;   /* muted background                          */
  --line-dark:      rgba(255, 255, 255, .14);
  --text-invert:    #f8f4ee;
  --text-invert-muted: rgba(248, 244, 238, .74);

  /* Light-context literals, defined exactly once.
     `.on-dark` swaps the contextual tokens below for dark-surface values;
     `.on-light` swaps them back, so a light card can sit inside a dark
     section without inheriting the dark palette. Both reference these. */
  --paper-base:       #ffffff;
  --muted-base:       #f6f4f1;
  --line-base:        #e6ded3;
  --line-strong-base: #d5c8b8;
  --text-base:        #241f1a;
  --text-muted-base:  #5f574d;
  --text-soft-base:   #857c71;

  --paper:          var(--paper-base);
  --muted:          var(--muted-base);
  --line:           var(--line-base);
  --line-strong:    var(--line-strong-base);
  --text:           var(--text-base);
  --text-muted:     var(--text-muted-base);
  --text-soft:      var(--text-soft-base);

  /* ------------------------------------------------------------ Semantic */
  --success:        #2f6b4f;
  --success-bg:     #e8f3ec;
  --warning:        #9a6a11;
  --warning-bg:     #fdf3de;
  --danger:         #a33125;
  --danger-bg:      #fbeae8;
  --info:           #2c5670;
  --info-bg:        #e7f0f5;

  /* ------------------------------------------------------------ Gradients */
  --grad-lantern:   linear-gradient(135deg, var(--lantern) 0%, var(--bronze) 100%);
  --grad-ink:       linear-gradient(155deg, #221f1c 0%, #131211 60%, #1d1a17 100%);
  --grad-warm:      linear-gradient(180deg, var(--parchment) 0%, #f3e9dc 100%);
  --grad-glow:      radial-gradient(60% 60% at 50% 40%, rgba(233, 161, 59, .28) 0%, rgba(233, 161, 59, 0) 70%);
  --grad-rule:      linear-gradient(90deg, transparent, var(--bronze-400), transparent);

  /* ------------------------------------------------------------- Type */
  --font-display: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid scale — 360px → 1440px viewport */
  --fs-xs:   clamp(0.75rem, 0.73rem + 0.10vw, 0.813rem);
  --fs-sm:   clamp(0.875rem, 0.85rem + 0.12vw, 0.938rem);
  --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.063rem);
  --fs-md:   clamp(1.063rem, 1.02rem + 0.22vw, 1.188rem);
  --fs-lg:   clamp(1.188rem, 1.11rem + 0.38vw, 1.375rem);
  --fs-xl:   clamp(1.375rem, 1.24rem + 0.64vw, 1.75rem);
  --fs-2xl:  clamp(1.625rem, 1.40rem + 1.05vw, 2.25rem);
  --fs-3xl:  clamp(1.938rem, 1.58rem + 1.68vw, 3rem);
  --fs-4xl:  clamp(2.25rem, 1.72rem + 2.48vw, 3.75rem);
  --fs-5xl:  clamp(2.625rem, 1.83rem + 3.72vw, 4.75rem);

  --lh-tight: 1.12;
  --lh-snug:  1.28;
  --lh-base:  1.65;
  --lh-loose: 1.8;

  --ls-tight: -0.022em;
  --ls-snug:  -0.012em;
  --ls-wide:  0.08em;
  --ls-caps:  0.14em;

  /* ------------------------------------------------------------ Spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.5rem;
  --sp-8:  3rem;
  --sp-9:  4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8rem;

  /* Vertical rhythm for full-bleed sections */
  --section-y:      clamp(3.5rem, 2.4rem + 5vw, 7rem);
  --section-y-lg:   clamp(4.5rem, 3rem + 6.5vw, 9rem);
  --section-y-sm:   clamp(2.5rem, 1.9rem + 3vw, 4.5rem);

  /* --------------------------------------------------------- Containers */
  --container:      1280px;
  --container-wide: 1440px;
  --container-text: 760px;
  --gutter:         clamp(1.125rem, 0.7rem + 1.9vw, 2.5rem);

  /* ------------------------------------------------------------- Radii */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   26px;
  --r-2xl:  36px;
  --r-pill: 999px;

  /* ----------------------------------------------------------- Shadows */
  --sh-xs: 0 1px 2px rgba(28, 27, 25, .05);
  --sh-sm: 0 2px 6px rgba(28, 27, 25, .06), 0 1px 2px rgba(28, 27, 25, .04);
  --sh-md: 0 8px 24px -8px rgba(28, 27, 25, .14), 0 2px 6px rgba(28, 27, 25, .05);
  --sh-lg: 0 22px 48px -18px rgba(28, 27, 25, .22), 0 4px 12px rgba(28, 27, 25, .06);
  --sh-xl: 0 40px 80px -32px rgba(28, 27, 25, .30), 0 8px 20px rgba(28, 27, 25, .08);
  --sh-book: 0 18px 36px -14px rgba(28, 27, 25, .38), 0 2px 6px rgba(28, 27, 25, .12);
  --sh-glow: 0 0 0 1px rgba(233, 161, 59, .35), 0 12px 32px -12px rgba(233, 161, 59, .5);

  /* ----------------------------------------------------------- Motion */
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-in:   cubic-bezier(.7, 0, .84, 0);
  --dur-fast:  140ms;
  --dur:       260ms;
  --dur-slow:  480ms;

  /* ------------------------------------------------------------ Layers */
  --z-base:    1;
  --z-sticky:  40;
  --z-header:  60;
  --z-mega:    70;
  --z-overlay: 90;
  --z-drawer:  100;
  --z-toast:   120;

  /* Raised from 64px now that the header CTA has been removed — it gives the
     wide 3:1 brand lockup enough room to read at a glance. */
  --header-h:  clamp(68px, 5.6vw, 88px);
  --utility-h: 40px;

  /* Focus ring used everywhere — 3:1 against both light and dark surfaces */
  --focus-ring: 0 0 0 3px var(--paper), 0 0 0 5px var(--bronze-700);
  --focus-ring-dark: 0 0 0 3px var(--ink), 0 0 0 5px var(--lantern);
}

/* Light island inside a dark section — restores the light palette so nested
   labels, inputs, hints and borders render correctly. Without this a card
   using `background: var(--paper)` inside `.on-dark` picks up the dark
   context's near-transparent paper and renders as a dark card. */
.on-light {
  --paper: var(--paper-base);
  --muted: var(--muted-base);
  --line: var(--line-base);
  --line-strong: var(--line-strong-base);
  --text: var(--text-base);
  --text-muted: var(--text-muted-base);
  --text-soft: var(--text-soft-base);
  --focus-ring: 0 0 0 3px var(--paper-base), 0 0 0 5px var(--bronze-700);
  color: var(--text);
}

/* Dark section context — components read these instead of hard-coding. */
.on-dark {
  --text: var(--text-invert);
  --text-muted: var(--text-invert-muted);
  --text-soft: rgba(248, 244, 238, .58);
  --line: var(--line-dark);
  --line-strong: rgba(255, 255, 255, .24);
  --paper: rgba(255, 255, 255, .05);
  --muted: rgba(255, 255, 255, .06);
  --focus-ring: var(--focus-ring-dark);
  color: var(--text-invert);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur: 0.01ms;
    --dur-slow: 0.01ms;
  }
}