/* See You Again — design tokens v3 — Logo Theme (cyan + white + pastels)
   PRIMARY: cyan from logo dot (#22C9DC) + white
   PASTELS: peach, sage, rose — soft secondary colors
   Variable names retained for back-compat across all pages. */
:root {
  /* Ink — navy-blue for body text (softer than pure black, complements cyan) */
  --ink-950: #0E2A47;  /* Deep navy-blue — primary text */
  --ink-900: #143456;
  --ink-800: #1E3F66;
  --ink-700: #4A6685;  /* muted body */
  --ink-500: #7A8EA8;
  --ink-300: #B5C2D2;
  --charcoal: #1D1D1D;

  /* Surface — white + soft cyan-tinted neutrals */
  --sand-50:  #FFFFFF;   /* pure white — page bg */
  --sand-100: #F5FBFC;   /* very pale cyan tint — card/section bg */
  --sand-200: #D9EEF1;   /* pale cyan — border / divider */
  --sand-300: #22C9DC;   /* logo cyan — emphasis (replaces gold) */

  /* Brand cyan (from logo dot) */
  --cyan-500: #22C9DC;
  --cyan-600: #15A5B5;
  --cyan-700: #0E7E8D;
  --cyan-50:  #E6F8FB;
  --cyan-100: #C5EFF4;

  /* PRIMARY CTA — warm coral pop on blue/white palette */
  --copper-500: #E04E2C;  /* coral — primary CTA */
  --copper-600: #C53D1E;
  --copper-50:  #FFE8DE;

  /* Pastel secondaries (2-3 supporting colors) */
  --pastel-peach: #FFE0CC;  /* warm peach */
  --pastel-sage:  #DDEEDA;  /* soft sage green */
  --pastel-rose:  #FFE2EB;  /* soft rose */
  --pastel-peach-dark: #E6A37C;
  --pastel-sage-dark:  #6FA664;
  --pastel-rose-dark:  #E08DA8;

  /* Raw semantic aliases */
  --navy:      #0E2A47;
  --sky:       #22C9DC;
  --coral:     #E04E2C;
  --white:     #FFFFFF;
  --pale-cyan: #D9EEF1;
  --muted:     #4A6685;

  /* Semantic */
  --ok:    #2E8B57;
  --warn:  #E0A832;
  --danger:#D04A3C;

  /* Type */
  --font-display: "Prompt", "IBM Plex Sans Thai Looped", "Sarabun", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-display-serif: "Trirong", "Noto Serif Thai", Georgia, serif;
  --font-body:    "Sarabun", "IBM Plex Sans Thai Looped", "IBM Plex Sans Thai", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Radius */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
}

html { font-family: var(--font-body); color: var(--ink-950); background: var(--sand-50); }
body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; line-height: 1.7; }
.font-display { font-family: var(--font-display); }
.font-mono    { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cyan-600);
}

.th-body { line-height: 1.85; word-break: break-word; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:.6rem; font-weight:500; transition: all .2s ease; }
.btn-copper { background: var(--copper-500); color:#fff; padding:14px 28px; border-radius:999px; }
.btn-copper:hover { background: var(--copper-600); transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(224,78,44,.5); }
.btn-outline-white { border:1.5px solid rgba(255,255,255,.7); color:#fff; padding:14px 28px; border-radius:999px; }
.btn-outline-white:hover { background:#fff; color: var(--ink-950); }
.btn-outline-ink { border:1.5px solid var(--ink-950); color: var(--ink-950); padding:12px 24px; border-radius:999px; }
.btn-outline-ink:hover { background: var(--ink-950); color:#fff; }
.btn-ghost { color: var(--ink-950); padding:10px 14px; border-radius:8px; }
.btn-ghost:hover { background: var(--sand-100); }

.card { background:#fff; border:1px solid var(--sand-200); border-radius: var(--r-lg); }
.hairline { border-top:1px solid var(--sand-200); }
.hairline-dark { border-top:1px solid rgba(255,255,255,.08); }
.numeral { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; }

@keyframes scrollPulse { 0%,100% { transform: translateY(0); opacity:.6; } 50% { transform: translateY(6px); opacity: 1; } }
.scroll-cue { animation: scrollPulse 2.2s ease-in-out infinite; }

/* Pulse dot for live indicator */
.dot-cyan {
  display:inline-block; width:8px; height:8px; border-radius:999px; background:var(--cyan-500);
  box-shadow: 0 0 0 0 rgba(34,201,220,.55);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,201,220,.55); }
  100% { box-shadow: 0 0 0 14px rgba(34,201,220,0); }
}

::selection { background: var(--cyan-500); color: white; }