/* =============================================================
   AI Safe Lens — Foundations
   Colors + Type tokens. Single source of truth.
   ============================================================= */

/* Fraunces — loaded from Google Fonts ------------------------
   Used ONLY as a warm italic display accent. Reserved for:
   - the ampersand glyph in hero "A & B" titles
   - a single emphasized word inside a display headline
   - large pull-quote glyphs and end-of-section dingbats
   Never used for body, never used for UI labels, never used
   upright. If you find yourself reaching for it for anything
   other than warmth/personality, use Raleway instead.
   ----------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@1,9..144,300;1,9..144,400;1,9..144,500&display=swap");

/* Raleway — loaded from local font files ---------------------
   Provided files: Raleway-Regular (400), Raleway-Italic (400 italic),
   Raleway-Bold (700). Weights 500/600 fall back to Bold (700) per
   the CSS font-matching algorithm; weight 300 falls back to Regular.
   If a wider weight range is needed, add more .ttf files and
   declare them here.
   ----------------------------------------------------------- */
@font-face {
  font-family: "Raleway";
  src: url("fonts/Raleway-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("fonts/Raleway-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("fonts/Raleway-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ----------------------------------------------------------
     COLOR — BASE
     Warm cream background with white cards; muted, calm.
     ---------------------------------------------------------- */

  /* Surfaces */
  --surface-page:    #FAF8F5;   /* page background — warm cream */
  --surface-card:    #FFFFFF;   /* cards, panels */
  --surface-sunken:  #F2EFE9;   /* subtle inset / muted bg */
  --surface-overlay: rgba(26, 26, 26, 0.40);

  /* Dusk surfaces — opt-in dark theme for hero posters, event covers,
     social tiles, and other "draw attention" moments. NOT a full second
     theme for the product/marketing site; activate per-section by setting
     data-theme="dusk" on an ancestor element. */
  --surface-dusk:        #07383a;   /* deep teal — page bg in dusk */
  --surface-dusk-card:   #0E5557;   /* slightly raised teal card */
  --surface-dusk-sunken: #052A2C;   /* inset / inkier */
  --fg-on-dusk:          #ECF4F2;   /* off-white text on dusk */
  --fg-on-dusk-muted:    rgba(236, 244, 242, 0.72);
  --fg-on-dusk-subtle:   rgba(236, 244, 242, 0.50);
  --border-on-dusk:      rgba(236, 244, 242, 0.16);

  /* Ink (text + neutral) — warm-tinted greyscale */
  --ink-900: #1A1A1A;   /* primary text */
  --ink-700: #2D2D2D;   /* headings on light */
  --ink-500: #5C5C5C;   /* body / secondary text */
  --ink-400: #7A7A7A;   /* muted text */
  --ink-300: #A6A6A6;   /* placeholders, disabled */
  --ink-200: #D4D0C9;   /* dividers, borders (warm) */
  --ink-100: #ECE8E1;   /* subtle borders, hairlines */
  --ink-50:  #FAF8F5;   /* alias for page */

  /* Primary — Teal hsl(185 100% 30%) */
  --teal-900: #003C42;
  --teal-800: #005761;
  --teal-700: #006B73;
  --teal-600: #008C99;   /* PRIMARY — interactive, borders, accent */
  --teal-500: #00A8B0;
  --teal-300: #7FD1D6;
  --teal-100: #D9F0F2;
  --teal-50:  #EEF8F9;

  /* Accent — Coral / warm terracotta.
     Promoted from a buried accent to a visible co-star alongside teal.
     Teal stays dominant; coral provides the warmth — one or two moments
     per surface, never as a primary action color. Used for: italic
     ampersands, host/status dots, hand-drawn flourishes, end-of-section
     dingbats, hover halos. */
  --coral-900: #6B2E14;
  --coral-800: #8A3F1F;
  --coral-700: #A8542F;   /* deep terracotta — ink-on-coral text */
  --coral-600: #C0653B;   /* hover / pressed */
  --coral-500: #DB7A57;   /* PRIMARY CORAL — the warm hit */
  --coral-400: #E4906F;
  --coral-300: #EFB7A0;
  --coral-100: #F6DDD0;
  --coral-50:  #FBEEE6;

  /* Back-compat: existing components referenced --accent-*; aliased to coral. */
  --accent-700: var(--coral-700);
  --accent-600: var(--coral-600);
  --accent-500: var(--coral-500);
  --accent-100: var(--coral-100);
  --accent-50:  var(--coral-50);

  /* Semantic (muted, NOT vivid) */
  --success-700: #2F6B4F;
  --success-100: #DDEBE3;
  --warning-700: #B5651D;   /* warm amber / honey */
  --warning-100: #F8E8D0;
  --danger-700:  #B83B3B;   /* refined brick red, not flashy */
  --danger-100:  #F4D9D6;
  --info-700:    var(--teal-700);
  --info-100:    var(--teal-100);

  /* ----------------------------------------------------------
     COLOR — SEMANTIC ALIASES
     Use these in components; the base tokens above are foundation only.
     ---------------------------------------------------------- */
  --fg-default:   var(--ink-900);
  --fg-muted:     var(--ink-500);
  --fg-subtle:    var(--ink-400);
  --fg-on-brand:  #FFFFFF;
  --fg-brand:     var(--teal-700);
  --fg-link:      var(--teal-700);

  --bg-default:   var(--surface-page);
  --bg-card:      var(--surface-card);
  --bg-sunken:    var(--surface-sunken);
  --bg-brand:     var(--teal-600);
  --bg-brand-soft:var(--teal-50);
  --fg-accent:    var(--accent-700);
  --bg-accent-soft: var(--accent-50);

  --border-default: var(--ink-200);
  --border-subtle:  var(--ink-100);
  --border-strong:  var(--ink-400);
  --border-brand:   var(--teal-600);
  --focus-ring:     var(--teal-600);

  /* Accent semantic aliases — coral as the warm accent. Promoted to a
     documented co-star (teal still dominant for primary actions). */
  --fg-warm:         var(--coral-700);
  --fg-on-warm:      #FFFFFF;
  --bg-warm:         var(--coral-500);
  --bg-warm-soft:    var(--coral-50);
  --border-warm:     var(--coral-500);

  /* ----------------------------------------------------------
     TYPOGRAPHY — two families:
       Raleway   — workhorse for everything (UI, headings, body)
       Fraunces  — italic-only display accent for warmth (see top)
     ---------------------------------------------------------- */
  --font-sans:    "Raleway", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Type scale — calm, generous, not flashy */
  --fs-display: 56px;   /* hero */
  --fs-h1:      40px;
  --fs-h2:      30px;
  --fs-h3:      22px;
  --fs-h4:      18px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-micro:   12px;

  /* Line heights */
  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.6;
  --lh-loose: 1.75;

  /* Letter spacing */
  --ls-tight:  -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-eyebrow: 0.14em;   /* ALL-CAPS eyebrow labels */

  /* ----------------------------------------------------------
     SPACING — 4px base
     ---------------------------------------------------------- */
  --space-0:  0;
  --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: 128px;

  /* ----------------------------------------------------------
     RADII — restrained; cards are squared with a hint of curve
     ---------------------------------------------------------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;   /* default for buttons, inputs */
  --radius-lg:   10px;  /* cards */
  --radius-xl:   16px;  /* large surfaces */
  --radius-pill: 999px;

  /* ----------------------------------------------------------
     SHADOWS — soft, low-contrast; nothing dramatic
     ---------------------------------------------------------- */
  --shadow-none:  none;
  --shadow-xs:    0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-sm:    0 1px 3px rgba(26, 26, 26, 0.06), 0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-md:    0 4px 12px rgba(26, 26, 26, 0.06), 0 1px 3px rgba(26, 26, 26, 0.04);
  --shadow-lg:    0 12px 32px rgba(26, 26, 26, 0.08), 0 2px 6px rgba(26, 26, 26, 0.04);
  --shadow-focus: 0 0 0 3px rgba(0, 140, 153, 0.25);

  /* ----------------------------------------------------------
     MOTION — gentle, no bounces
     ---------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --max-content: 1120px;
  --max-prose:   680px;
}

/* =============================================================
   ELEMENT DEFAULTS
   ============================================================= */
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-default);
  color: var(--fg-default);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--ink-900);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-4) 0;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); letter-spacing: var(--ls-normal); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: var(--ls-normal); }

p {
  margin: 0 0 var(--space-4) 0;
  color: var(--fg-default);
  max-width: var(--max-prose);
  text-wrap: pretty;
}

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-base) var(--ease-standard);
}
a:hover { color: var(--teal-800); }

small { font-size: var(--fs-small); color: var(--fg-muted); }

::selection { background: var(--teal-100); color: var(--teal-900); }

/* =============================================================
   UTILITY CLASSES — semantic type roles
   ============================================================= */
.t-display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-semibold);
  color: var(--ink-900);
}
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-tight);  letter-spacing: var(--ls-tight); font-weight: var(--fw-semibold); }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-snug);   letter-spacing: var(--ls-tight); font-weight: var(--fw-semibold); }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-snug);   font-weight: var(--fw-semibold); }
.t-h4 { font-size: var(--fs-h4); line-height: var(--lh-snug);   font-weight: var(--fw-semibold); }
.t-body  { font-size: var(--fs-body);  line-height: var(--lh-base); }
.t-body-lg { font-size: 18px; line-height: var(--lh-base); color: var(--fg-muted); font-weight: var(--fw-regular); }
.t-small { font-size: var(--fs-small); line-height: var(--lh-base); }
.t-micro { font-size: var(--fs-micro); line-height: var(--lh-base); }
.t-eyebrow {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--teal-700);
}
.t-muted   { color: var(--fg-muted); }
.t-subtle  { color: var(--fg-subtle); }
.t-mono    { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }

/* Fraunces italic — display accent only. See @import block at top of file
   for the strict usage rules; if you reach for these classes for anything
   other than warmth, you are using them wrong.
   ----------------------------------------------------------- */
.t-italic-display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-optical-sizing: auto;
  letter-spacing: -0.005em;
}
.t-amp {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-optical-sizing: auto;
  color: var(--coral-500);
  margin: 0 0.04em;
  /* Slight optical lift — the italic ampersand sits a touch low next to
     Raleway's geometric caps. */
  display: inline-block;
  transform: translateY(-0.02em);
}
.t-warm  { color: var(--coral-700); }
.t-warm-strong { color: var(--coral-500); }

/* =============================================================
   THEME — DUSK
   Opt-in dark mode for hero posters, event covers, podcast art, social
   tiles, anywhere that needs atmosphere instead of clarity. NOT the full
   site dark mode — apply per-section by setting data-theme="dusk" on a
   container, or to <html> for a whole-page dusk surface.
   ============================================================= */
[data-theme="dusk"] {
  --bg-default:   var(--surface-dusk);
  --bg-card:      var(--surface-dusk-card);
  --bg-sunken:    var(--surface-dusk-sunken);
  --bg-brand:     var(--teal-500);
  --bg-brand-soft:rgba(127, 209, 214, 0.10);
  --bg-warm:      var(--coral-500);
  --bg-warm-soft: rgba(219, 122, 87, 0.12);

  --fg-default:   var(--fg-on-dusk);
  --fg-muted:     var(--fg-on-dusk-muted);
  --fg-subtle:    var(--fg-on-dusk-subtle);
  --fg-brand:     var(--teal-300);
  --fg-link:      var(--teal-300);
  --fg-warm:      var(--coral-400);

  --border-default: var(--border-on-dusk);
  --border-subtle:  rgba(236, 244, 242, 0.08);
  --border-strong:  rgba(236, 244, 242, 0.32);
  --border-brand:   var(--teal-500);
  --focus-ring:     var(--teal-500);

  color: var(--fg-on-dusk);
  background: var(--surface-dusk);
}
[data-theme="dusk"] h1,
[data-theme="dusk"] h2,
[data-theme="dusk"] h3,
[data-theme="dusk"] h4,
[data-theme="dusk"] h5,
[data-theme="dusk"] h6 { color: var(--fg-on-dusk); }
[data-theme="dusk"] p  { color: var(--fg-on-dusk); }
[data-theme="dusk"] small { color: var(--fg-on-dusk-muted); }
[data-theme="dusk"] .t-eyebrow { color: var(--teal-300); }
[data-theme="dusk"] a { color: var(--teal-300); }
[data-theme="dusk"] a:hover { color: var(--teal-100); }
[data-theme="dusk"] ::selection { background: rgba(127, 209, 214, 0.35); color: var(--fg-on-dusk); }

/* =============================================================
   DECORATIONS — small "life" elements that warm a surface up.
   Each is optional, scoped, and opt-in via class. They are the
   pieces that distinguish a "calm" page from a "calm but alive"
   one. Use no more than two per surface.
   ============================================================= */

/* Paper grain — faint warm-noise overlay. Sits above background, below
   content. Add `.grain` to a positioned ancestor. */
.deco-grain {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(26, 26, 26, 0.045) 1px, transparent 1px);
  background-size: 3px 3px;
  pointer-events: none;
  z-index: 1;
}
[data-theme="dusk"] .deco-grain {
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  mix-blend-mode: overlay;
  opacity: 0.5;
}

/* Aurora — slow drifting warm/cool wash. For dusk hero surfaces only. */
.deco-aurora {
  position: absolute; inset: 0;
  background:
    radial-gradient(55% 55% at 78% 38%, rgba(219, 122, 87, 0.22), transparent 65%),
    radial-gradient(45% 50% at 22% 72%, rgba(127, 227, 212, 0.16), transparent 65%);
  filter: blur(28px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  animation: deco-aurora-drift 16s ease-in-out infinite alternate;
}
@keyframes deco-aurora-drift {
  0%   { transform: translate(0, 0)       scale(1);    opacity: 0.75; }
  100% { transform: translate(-3.5%, 2.5%) scale(1.06); opacity: 1; }
}

/* Pulse dot — for "live", "now recording", "open enrollment" indicators.
   Sized in em so it inherits from its parent. Coral by default. */
.deco-pulse {
  position: relative;
  display: inline-block;
  width: 0.5em; height: 0.5em;
  border-radius: 50%;
  background: var(--coral-500);
  vertical-align: 0.05em;
  margin-right: 0.55em;
  box-shadow: 0 0 8px rgba(219, 122, 87, 0.55);
}
.deco-pulse::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.4px solid var(--coral-500);
  opacity: 0.6;
  animation: deco-pulse-ring 3.6s ease-out infinite;
}
@keyframes deco-pulse-ring {
  0%   { transform: scale(0.6); opacity: 0.55; }
  70%  { opacity: 0.1; }
  100% { transform: scale(2.0); opacity: 0; }
}
.deco-pulse--teal { background: var(--teal-500); box-shadow: 0 0 8px rgba(0, 168, 176, 0.5); }
.deco-pulse--teal::after { border-color: var(--teal-500); }

/* Glow dot — static, soft radial glow. Slower than a pulse, no animation. */
.deco-glow {
  display: inline-block;
  width: 0.72em; height: 0.72em;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(219, 122, 87, 0.95) 0%,
    rgba(219, 122, 87, 0.55) 30%,
    rgba(219, 122, 87, 0)    65%);
  margin-right: 0.45em;
  vertical-align: 0.05em;
}

/* Floating motes — tiny soft sparkles drifting in a hero field. For
   dusk surfaces only. Place inside a positioned container; spans
   inside are auto-positioned via nth-child. */
.deco-motes { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.deco-motes span {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 65%);
  opacity: 0;
  animation: deco-mote-drift 11s ease-in-out infinite;
}
.deco-motes span:nth-child(1) { left: 18%; top: 22%; animation-delay: 0s; }
.deco-motes span:nth-child(2) { left: 32%; top: 64%; animation-delay: 2.2s; width: 4px; height: 4px; }
.deco-motes span:nth-child(3) { left: 58%; top: 30%; animation-delay: 4.0s;
  background: radial-gradient(circle, rgba(219, 122, 87, 0.95), rgba(219, 122, 87, 0) 65%); }
.deco-motes span:nth-child(4) { left: 72%; top: 76%; animation-delay: 6.2s; width: 4px; height: 4px; }
.deco-motes span:nth-child(5) { left: 88%; top: 42%; animation-delay: 1.4s; width: 3px; height: 3px; }
.deco-motes span:nth-child(6) { left: 46%; top: 84%; animation-delay: 3.6s;
  background: radial-gradient(circle, rgba(219, 122, 87, 0.85), rgba(219, 122, 87, 0) 65%); }
.deco-motes span:nth-child(7) { left: 82%; top: 14%; animation-delay: 5.4s; width: 3px; height: 3px; }
.deco-motes span:nth-child(8) { left: 12%; top: 48%; animation-delay: 7.8s; width: 4px; height: 4px; }
@keyframes deco-mote-drift {
  0%, 100% { transform: translate(0, 0);     opacity: 0; }
  20%      { opacity: 0.85; }
  50%      { transform: translate(-10px, -14px); opacity: 0.95; }
  80%      { opacity: 0.4; }
}

/* Flourish — a small hand-drawn coral curl. Inline SVG via background
   image so it can be dropped next to a rule or beneath a headline. */
.deco-flourish {
  display: inline-block;
  width: 78px;
  height: 22px;
  vertical-align: middle;
  background: no-repeat center / contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 24'><path fill='none' stroke='%23DB7A57' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M2 14 C 12 14, 18 4, 28 6 S 44 22, 56 14 S 74 6, 78 10'/><circle cx='78' cy='10' r='2.2' fill='%23DB7A57'/></svg>");
}

/* Coral wash — soft warm radial glow. Drop into a positioned ancestor;
   defaults to top-right. For dusk surfaces; muted on light. */
.deco-coral-wash {
  position: absolute;
  right: -8%; top: 50%;
  width: 60%; height: 130%;
  transform: translateY(-50%);
  background: radial-gradient(closest-side, rgba(219, 122, 87, 0.55), rgba(219, 122, 87, 0) 70%);
  filter: blur(38px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

/* Reduced motion — calm the decorations. */
@media (prefers-reduced-motion: reduce) {
  .deco-aurora,
  .deco-pulse::after,
  .deco-motes span { animation: none; }
  .deco-motes span { opacity: 0.6; }
}