/* ============================================================
   MY DAILY BOOK OF THANKSGIVING — Color & Type Foundations
   "Good Heart, Big Feelings" — a gentle daily gratitude book
   ------------------------------------------------------------
   A dreamy, twilight-watercolor storybook brand.
   Palette: parchment cream · twilight indigo · soft lavender
   · dusty rose · antique gold · apricot sunset.
   Type: Cinzel (engraved caps) / Cormorant Garamond (display)
   / EB Garamond (body) / Pinyon Script (signature).
   NOTE: fonts are nearest Google Fonts matches to the source
   artwork — see README "Font substitution".
   ============================================================ */

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

:root {
  /* ---- Brand palette ---------------------------------- */
  --twilight-indigo:  #322E5A;  /* deep night-sky ink — "Good Heart" headings */
  --indigo-soft:      #4A4576;  /* lighter indigo for sub-heads */
  --violet:           #7B6BA3;  /* primary lavender — buttons, links */
  --violet-deep:      #685892;  /* button hover / pressed */
  --violet-mist:      #B7A8D2;  /* lavender band, soft fills */
  --rose:             #A26B77;  /* dusty rose / mauve — "Big Feelings" accent */
  --rose-soft:        #C49AA1;  /* lighter rose for tints */
  --gold:             #BE9B45;  /* antique gold — hearts, flourishes, rules */
  --gold-soft:        #D9BE7E;  /* lighter gold glow */
  --peach:            #E8BD92;  /* apricot sunset glow */
  --peach-soft:       #F2D8BD;  /* pale peach wash */

  /* ---- Surfaces --------------------------------------- */
  --parchment:        #F4EBD9;  /* main page background — warm cream */
  --parchment-deep:   #EADFC8;  /* slightly deeper cream divider band */
  --cream:            #FBF6EC;  /* card / panel surface */
  --lavender-haze:    #E9E2F0;  /* soft lavender section background */
  --candle:           #F8E9C9;  /* warm candlelit highlight */

  /* ---- Text ------------------------------------------- */
  --ink:              #3B3653;  /* primary body text — deep plum-ink */
  --ink-muted:        #6E6781;  /* secondary text, captions */
  --ink-faint:        #9A93A8;  /* tertiary / metadata */
  --on-dark:          #FBF6EC;  /* text on indigo / violet surfaces */
  --on-dark-muted:    #D8CFE6;  /* secondary text on dark */

  /* ---- Lines & borders -------------------------------- */
  --line:             #E0D3BC;  /* hairline on parchment */
  --line-gold:        #D8C28C;  /* gilt hairline */
  --line-lavender:    #D3C7E2;  /* line on lavender surfaces */

  /* ---- Hero / sky gradients --------------------------- */
  --sky-twilight: linear-gradient(170deg, #C9B7DA 0%, #DCC6D2 38%, #F0D3B4 72%, #F6E2C4 100%);
  --sky-band:     linear-gradient(180deg, #B7A8D2 0%, #A695C6 100%);
  --glow-radial:  radial-gradient(60% 70% at 50% 60%, rgba(232,189,146,.55) 0%, rgba(232,189,146,0) 70%);

  /* ---- Shadows (soft, warm, never harsh) -------------- */
  --shadow-sm:   0 1px 2px rgba(50,46,90,.06), 0 1px 3px rgba(50,46,90,.05);
  --shadow-md:   0 4px 14px rgba(50,46,90,.10), 0 2px 6px rgba(50,46,90,.06);
  --shadow-lg:   0 18px 44px rgba(50,46,90,.18), 0 6px 16px rgba(50,46,90,.10);
  --shadow-book: 0 30px 60px rgba(40,30,70,.34), 0 10px 24px rgba(40,30,70,.22);
  --glow-gold:   0 0 24px rgba(217,190,126,.55);

  /* ---- Radii (gentle, rounded — storybook softness) --- */
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   34px;
  --r-pill: 999px;

  /* ---- Spacing scale (8px base) ----------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* ---- Type families ---------------------------------- */
  --font-caps:    'Cinzel', 'Trajan Pro', Georgia, serif;       /* engraved labels & logo */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; /* titles */
  --font-body:    'EB Garamond', Georgia, 'Times New Roman', serif;          /* prose */
  --font-script:  'Pinyon Script', 'Snell Roundhand', cursive;  /* signature accent */

  /* ---- Type scale (rem @16px base) -------------------- */
  --t-display:  clamp(3.2rem, 7vw, 5.6rem);   /* hero title */
  --t-h1:       clamp(2.4rem, 4.5vw, 3.6rem);
  --t-h2:       clamp(1.9rem, 3vw, 2.6rem);
  --t-h3:       1.5rem;
  --t-eyebrow:  0.82rem;   /* Cinzel caps label */
  --t-lead:     1.32rem;   /* intro paragraph */
  --t-body:     1.12rem;
  --t-small:    0.95rem;
  --t-caption:  0.82rem;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply by wrapping content in .tg-prose, or use classes.
   ============================================================ */

.tg-eyebrow {
  font-family: var(--font-caps);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--rose);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
/* decorative gold flourish around eyebrows: use ❧ ♥ ‹‹ ›› via .tg-flourish */
.tg-flourish { color: var(--gold); font-size: 0.9em; }

.tg-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--twilight-indigo);
}
.tg-display .accent { color: var(--rose); font-style: italic; }

h1, .tg-h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 600;
  line-height: 1.08;
  color: var(--twilight-indigo);
}
h2, .tg-h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: 1.14;
  color: var(--twilight-indigo);
}
h3, .tg-h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 600;
  color: var(--indigo-soft);
}

/* Section label, engraved Roman caps — "A PEEK INSIDE" */
.tg-section-label {
  font-family: var(--font-caps);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--twilight-indigo);
}

.tg-lead {
  font-family: var(--font-body);
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-muted);
}

p, .tg-body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--ink);
}

.tg-small   { font-family: var(--font-body); font-size: var(--t-small); color: var(--ink-muted); }
.tg-caption { font-family: var(--font-caps); font-size: var(--t-caption); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }

.tg-signature {
  font-family: var(--font-script);
  font-size: 2.6rem;
  color: var(--on-dark);
  line-height: 1;
}

/* Quote — the brand's gentle, italic voice */
.tg-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1.45;
  color: var(--twilight-indigo);
}