/* ============================================================
   Tatyana Vrazhnova — Design Tokens
   Color + Type system. Inspired by warm modern editorial
   (Jenna Kutcher direction) with Tatyana's signature pink
   blazer + gold + deep navy.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Outfit:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Signature blush — drawn from Tatyana's pink blazer.
     Desaturated -20% from original for softer, more editorial feel. */
  --tv-blush-50:  #FAF0F2;
  --tv-blush-100: #F6E0E5;
  --tv-blush-200: #EEC8D3;
  --tv-blush-300: #E7AEBE;   /* primary blush */
  --tv-blush-400: #DC8EA5;
  --tv-blush-500: #CB708A;   /* deep rose */
  --tv-blush-600: #A6556F;

  /* Terracotta / clay — warm bright accent (Jenna Kutcher direction).
     Used for primary CTAs, accents, link underlines. */
  --tv-clay-50:   #FBEEE6;
  --tv-clay-100:  #F5D7C4;
  --tv-clay-300:  #E8A988;
  --tv-clay-500:  #D87A56;   /* primary clay */
  --tv-clay-600:  #C56039;
  --tv-clay-700:  #9C4A2A;

  /* Sage — muted herbal green. Soft third accent. */
  --tv-sage-100: #E2E5DA;
  --tv-sage-300: #B5BBA2;
  --tv-sage-500: #8A9277;
  --tv-sage-700: #5A624A;

  /* Cocoa — warm dark brown anchor for dark sections + footer.
     Replaces the previous navy. Pulled from Jenna Kutcher direction. */
  --tv-cocoa-50:  #F0E8DE;
  --tv-cocoa-100: #D8C7B5;
  --tv-cocoa-300: #8C7560;
  --tv-cocoa-500: #5A4533;
  --tv-cocoa-700: #3B2A1C;
  --tv-cocoa-900: #2A1C12;

  /* Gold — necklace accent. Used sparingly. */
  --tv-gold-300: #E4CB9F;
  --tv-gold-500: #C9A86A;
  --tv-gold-700: #8E7344;

  /* Warm neutrals — backgrounds + paper feel.
     Pulled warmer (more peach) for the Jenna Kutcher mood. */
  --tv-cream:     #FAF1E5;   /* primary canvas */
  --tv-paper:     #FDF8F0;
  --tv-peach:     #F6E4D2;   /* warmer alt background */
  --tv-bone:      #EEE2CE;
  --tv-stone-200: #DACFB9;
  --tv-stone-400: #A89D86;
  --tv-stone-600: #6F6450;

  /* Ink — warm cocoa brown rather than pure black, sits on cream. */
  --tv-ink-900: #221913;
  --tv-ink-700: #3D2E22;
  --tv-ink-500: #6B5A4A;
  --tv-ink-300: #998875;

  /* Pure */
  --tv-white: #FFFFFF;
  --tv-black: #000000;

  /* ---------- SEMANTIC ---------- */
  --bg:           var(--tv-cream);
  --bg-paper:     var(--tv-paper);
  --bg-peach:     var(--tv-peach);
  --bg-contrast:  var(--tv-cocoa-900);
  --bg-accent:    var(--tv-blush-100);
  --bg-clay:      var(--tv-clay-100);

  --fg:           var(--tv-ink-900);
  --fg-1:         var(--tv-ink-900);
  --fg-2:         var(--tv-ink-500);
  --fg-3:         var(--tv-ink-300);
  --fg-on-dark:   var(--tv-cream);

  --accent:       var(--tv-clay-500);   /* primary brand accent → clay */
  --accent-warm:  var(--tv-clay-500);
  --accent-soft:  var(--tv-blush-200);
  --accent-rose:  var(--tv-blush-500);
  --accent-deep:  var(--tv-cocoa-700);
  --accent-sage:  var(--tv-sage-500);
  --accent-gold:  var(--tv-gold-500);

  --border:       rgba(34,25,19,0.10);
  --border-soft:  rgba(34,25,19,0.06);
  --border-strong:rgba(34,25,19,0.22);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body:    "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "DM Mono", ui-monospace, monospace;

  /* ---------- TYPE SCALE ---------- */
  --fs-display:   clamp(56px, 7vw, 112px);
  --fs-h1:        clamp(40px, 5vw, 72px);
  --fs-h2:        clamp(32px, 3.6vw, 52px);
  --fs-h3:        clamp(24px, 2.2vw, 32px);
  --fs-h4:        20px;
  --fs-lead:      20px;
  --fs-body:      17px;
  --fs-small:     14px;
  --fs-tiny:      12px;
  --fs-eyebrow:   12px;

  /* ---------- SPACING ---------- */
  --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-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-soft:   0 1px 2px rgba(34,25,19,0.04), 0 4px 16px rgba(34,25,19,0.06);
  --shadow-card:   0 2px 4px rgba(34,25,19,0.05), 0 12px 32px rgba(34,25,19,0.08);
  --shadow-lifted: 0 6px 12px rgba(34,25,19,0.07), 0 24px 60px rgba(34,25,19,0.15);
  --shadow-inner:  inset 0 0 0 1px rgba(34,25,19,0.06);

  /* ---------- MOTION ---------- */
  /* Tuned to mirror Jenna Kutcher's slow, editorial reveals.
     Keep --ease-out for entrance, --ease-in-out for sliding state changes. */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft:      cubic-bezier(0.4, 0, 0.2, 1);
  --dur-quick:      180ms;
  --dur-base:       280ms;
  --dur-slow:       520ms;
  --dur-deliberate: 900ms;
  --dur-reveal:     1100ms;
}

/* ============================================================
   Element defaults — apply when this stylesheet is included
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .display, .h1, .h2, .h3 {
  font-family: var(--font-display);
  color: var(--fg-1);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.04;
  text-wrap: balance;
}

.display { font-size: var(--fs-display); font-weight: 400; letter-spacing: -0.025em; }
h1, .h1  { font-size: var(--fs-h1);  font-weight: 500; letter-spacing: -0.02em; }
h2, .h2  { font-size: var(--fs-h2);  font-weight: 500; letter-spacing: -0.015em; }
h3, .h3  { font-size: var(--fs-h3);  font-weight: 600; }
h4, .h4  { font-size: var(--fs-h4);  font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }

p, .body { font-size: var(--fs-body); line-height: 1.6; color: var(--fg-1); text-wrap: pretty; }
.lead    { font-size: var(--fs-lead); line-height: 1.55; color: var(--fg-2); }
.small   { font-size: var(--fs-small); }
.tiny    { font-size: var(--fs-tiny); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.italic-display, em.display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

.serif { font-family: var(--font-display); }
.sans  { font-family: var(--font-body); }
.mono  { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0; }

a { color: var(--fg-1); text-decoration: none; border-bottom: 1px solid currentColor; transition: opacity var(--dur-quick) var(--ease-out); }
a:hover { opacity: 0.6; }