/* DeAnnaSpeak — Design Tokens
   ---------------------------------------------------------------
   The single source of truth for color, type, spacing, radii,
   shadows, and motion. Import once at the top of any artifact:
     <link rel="stylesheet" href="colors_and_type.css">
*/

/* --- Webfonts (Google-served; flagged substitutions) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  /* === COLORS ================================================ */

  /* Brand core */
  --cream:        #F7F1E5;   /* page ground */
  --cream-warm:   #FBF7F0;   /* alt ground for layered surfaces */
  --sand:         #EBDFCB;   /* card fills, soft bands */
  --sand-deep:    #D9C9AE;   /* hover for sand surfaces */
  --terracotta:   #B0492C;   /* primary accent, CTAs */
  --terracotta-deep: #9B3F26;/* hover state */
  --terracotta-soft: #D8826A;/* tinted accents only */
  --clay:         #8B6F5C;   /* muted earth, secondary text */
  --clay-soft:    #B19A87;
  --ink:          #2A1F1A;   /* warm near-black, body text */
  --ink-soft:     #4A3A30;

  /* Translucent variants (for hairlines, scrims) */
  --clay-30:      rgba(139,111,92,0.30);
  --clay-15:      rgba(139,111,92,0.15);
  --ink-scrim:    rgba(42,31,26,0.45);
  --ink-modal:    rgba(42,31,26,0.55);
  --ink-05:       rgba(42,31,26,0.05);
  --terracotta-focus: rgba(176,73,44,0.25);

  /* Semantic surface + text aliases */
  --bg:           var(--cream);
  --bg-raised:    var(--cream-warm);
  --bg-band:      var(--sand);
  --fg:           var(--ink);
  --fg-soft:      var(--ink-soft);
  --fg-muted:     var(--clay);
  --fg-on-dark:   var(--cream);
  --accent:       var(--terracotta);
  --accent-hover: var(--terracotta-deep);
  --rule:         var(--clay-30);

  /* === TYPOGRAPHY =========================================== */

  --font-display: "Cormorant Garamond", "Cormorant", Garamond, "Adobe Garamond Pro", "EB Garamond", Georgia, serif;
  --font-body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Modular scale (display) */
  --fs-display:   clamp(3.5rem, 6.5vw, 6rem);    /* @kind font */ /* 56–96 hero */
  --fs-h1:        clamp(2.75rem, 4.5vw, 4rem);   /* @kind font */ /* 44–64 page titles */
  --fs-h2:        clamp(2rem, 3vw, 2.75rem);     /* @kind font */ /* 32–44 section heads */
  --fs-h3:        1.5rem;                        /* 24 sub-heads */
  --fs-h4:        1.25rem;                       /* 20 small heads */
  --fs-lead:      1.25rem;                       /* 20 lead paragraphs */
  --fs-body:      1.0625rem;                     /* 17 body */
  --fs-sm:        0.9375rem;                     /* 15 captions */
  --fs-xs:        0.8125rem;                     /* 13 eyebrow / meta */

  /* Line heights */
  --lh-display:   1.05; /* @kind font */
  --lh-heading:   1.15; /* @kind font */
  --lh-body:      1.65; /* @kind font */
  --lh-tight:     1.4; /* @kind font */

  /* Letter spacing */
  --ls-eyebrow:   0.18em;     /* uppercase labels */
  --ls-display:   -0.012em;   /* subtle tightening on huge serif */
  --ls-body:      0em;
  --ls-button:    0.01em;

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

  /* === LAYOUT =============================================== */
  --content-max:  1280px;
  --content-pad:  clamp(20px, 5vw, 80px);
  --gutter:       24px;

  /* === RADII ================================================ */
  --radius-xs:    2px;   /* form inputs */
  --radius-sm:    6px;   /* buttons, chips */
  --radius-md:    10px;  /* image thumbs */
  --radius-lg:    16px;  /* booking card, talk card */
  --radius-pill:  999px; /* tag chips only */

  /* === SHADOWS (used sparingly) ============================= */
  --shadow-card:    0 18px 40px -24px rgba(42,31,26,0.18);
  --shadow-soft:    0 8px 24px -12px rgba(42,31,26,0.12);
  --shadow-focus:   0 0 0 3px var(--terracotta-focus);

  /* === MOTION =============================================== */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);    /* @kind other */ /* entry / fades */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:    180ms; /* @kind other */
  --dur-base:    260ms; /* @kind other */
  --dur-slow:    600ms; /* @kind other */
}

/* === BASE ==================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: 400;
}

/* === SEMANTIC TYPE STYLES ==================================== */

.t-eyebrow,
[data-type="eyebrow"] {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--terracotta);
  line-height: 1.2;
}

.t-display,
h1.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

h2, .t-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

h3, .t-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--ink);
  margin: 0;
}

h4, .t-h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--ink);
  margin: 0;
}

.t-lead,
p.t-lead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 400;
}

p {
  margin: 0 0 1em;
  color: var(--ink-soft);
}

.t-quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}

.t-meta {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--clay);
  letter-spacing: 0.02em;
}

a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
a:hover { border-color: var(--terracotta); color: var(--terracotta); }

hr.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-8) 0;
}

.ornament {
  font-family: var(--font-display);
  color: var(--clay);
  text-align: center;
  letter-spacing: 0.5em;
  font-size: 1.25rem;
  user-select: none;
}

/* === REDUCED MOTION ========================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}