/* ─────────────────────────────────────────────────────────────
   The Smallest Ambassador — Design Tokens
   v1.0 · cold geometry, warm signal
   ───────────────────────────────────────────────────────────── */

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

:root {
  /* ── ICE — primary surface (the night palette) ──────────── */
  --ice-abyss:  #050f1c;
  --ice-deep:   #061827;
  --ice-night:  #082238;
  --ice-cave:   #0b2d44;
  --ice-mid:    #11476a;
  --ice-bright: #2a8bbf;
  --ice-glow:   #66c8e6;
  --ice-frost:  #b8dcec;

  /* ── GOLD — signal accent (the single warm note) ─────────── */
  --gold-deep:    #b27a2a;
  --gold:         #f0c66b;
  --gold-bright:  #ffe6a8;
  --gold-soft:    rgba(240, 198, 107, 0.25);

  /* ── PAPER & INK — print interior (KDP black-ink safe) ───── */
  --paper-cover: #f0e6d2;
  --paper-book:  #f7f3ec;
  --ink:         #1a1814;
  --ink-soft:    #4a463f;

  /* ── DISSONANCE — twenty-second star (use once, ever) ──── */
  --green-22nd: #3aa884;

  /* ── Semantic surfaces ─────────────────────────────────── */
  --surface-hero:        var(--ice-abyss);
  --surface-atmospheric: var(--ice-night);
  --surface-paper:       var(--paper-book);
  --fg-on-ice:           var(--ice-frost);
  --fg-on-ice-quiet:     #7d9bb3;
  --fg-on-paper:         var(--ink);
  --fg-on-paper-quiet:   var(--ink-soft);
  --signal:              var(--gold-bright);
  --signal-deep:         var(--gold-deep);
  --rule:                var(--gold);

  /* ── Type families ─────────────────────────────────────── */
  --font-display: "Cinzel", "Trajan Pro", serif;            /* caps only, ceremonial */
  --font-pull:    "Cormorant Garamond", "Garamond", serif;  /* italic lyric */
  --font-cover:   "EB Garamond", "Garamond", serif;         /* cover/marketing body */
  --font-body:    Georgia, "EB Garamond", serif;            /* print interior body */
  --font-mono:    ui-monospace, "SF Mono", "Menlo", monospace;

  /* ── Type scale (web px equivalents) ───────────────────── */
  --t-spine-author: 11px;        /* Cinzel 8pt 0.32em */
  --t-spine-title:  15px;        /* Cinzel 11pt 0.18em */
  --t-tagline:      12px;        /* Cinzel 9pt 0.42em */
  --t-frame:        16px;        /* Georgia bold 12pt 0.18em */
  --t-caption:      11px;        /* EB Garamond 8.5pt small caps 0.22em */
  --t-body:         15px;        /* Georgia 11/15pt */
  --t-blurb:        14px;        /* EB Garamond 10.2pt 1.55 */
  --t-pull:         24px;        /* Cormorant italic 18pt */
  --t-chapter:      24px;        /* Georgia italic 18pt */
  --t-title:        40px;        /* Cinzel 30pt 0.03em */
  --t-display:      72px;        /* hero display */

  /* ── Tracking ──────────────────────────────────────────── */
  --tr-tagline:    0.42em;
  --tr-spine-auth: 0.32em;
  --tr-cap-attrib: 0.22em;
  --tr-frame:      0.18em;
  --tr-spine:      0.18em;
  --tr-title:      0.04em;
  --tr-body:       0;

  /* ── Leading ───────────────────────────────────────────── */
  --lh-display: 1.05;
  --lh-title:   1.15;
  --lh-pull:    1.35;
  --lh-body:    1.55;
  --lh-print:   1.36;     /* 11/15pt */

  /* ── Spacing (tight; the system breathes through tracking, not gaps) ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  40px;
  --sp-7:  64px;
  --sp-8:  96px;
  --sp-9:  144px;

  /* ── Hairline rules — three lengths only ───────────────── */
  --rule-short:  40px;
  --rule-mid:    72px;
  --rule-long:  120px;
  --rule-weight: 1px;     /* never thicker; 2pt is forbidden */

  /* ── Radii — zero, by guardrail ────────────────────────── */
  --radius: 0;

  /* ── Easing — slow in, slow out ────────────────────────── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   240ms;
  --dur-mid:    480ms;
  --dur-slow:   800ms;
  --dur-pulse: 4000ms;    /* probe glow; hero only */

  /* ── Shadows — none, except the probe-glow text-shadow ─── */
  --glow-text: 0 0 12px rgba(255, 230, 168, 0.55), 0 0 32px rgba(240, 198, 107, 0.25);
  --glow-halo: radial-gradient(ellipse at 50% 38%, rgba(255,230,168,0.35) 0%, rgba(240,198,107,0.12) 18%, transparent 55%);
}

/* ─────────────────────────────────────────────────────────────
   Semantic primitives (use these in components)
   ───────────────────────────────────────────────────────────── */

.tsa-display,
.tsa-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-title);
  line-height: var(--lh-display);
  color: var(--gold-bright);
  text-shadow: var(--glow-text);
  font-size: var(--t-display);
  margin: 0;
}

.tsa-title {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-title);
  line-height: var(--lh-title);
  font-size: var(--t-title);
  margin: 0;
}

.tsa-tagline {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tr-tagline);
  font-size: var(--t-tagline);
  color: var(--gold-bright);
  text-shadow: 0 0 8px rgba(255,230,168,0.45);
}

.tsa-frame {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-frame);
  font-size: var(--t-frame);
}

.tsa-pull {
  font-family: var(--font-pull);
  font-style: italic;
  font-weight: 500;
  font-size: var(--t-pull);
  line-height: var(--lh-pull);
  color: var(--gold-bright);
  text-shadow: var(--glow-text);
  text-wrap: balance;
}

.tsa-attribution {
  font-family: var(--font-cover);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tr-cap-attrib);
  font-size: var(--t-caption);
  font-variant: small-caps;
  color: var(--gold);
}

.tsa-blurb {
  font-family: var(--font-cover);
  font-weight: 400;
  font-size: var(--t-blurb);
  line-height: var(--lh-body);
  color: var(--paper-cover);
}

.tsa-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-print);
  color: var(--ink);
}

.tsa-chapter-title {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-chapter);
  color: var(--ink);
}

.tsa-mono,
.tsa-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ice-frost);
  opacity: 0.7;
}

/* Hairline rule — three lengths, gold-gradient masked at ends */
.tsa-rule {
  display: block;
  height: var(--rule-weight);
  width: var(--rule-mid);
  margin: var(--sp-5) auto;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--gold) 20%,
    var(--gold-bright) 50%,
    var(--gold) 80%,
    transparent 100%
  );
  border: 0;
}
.tsa-rule--short { width: var(--rule-short); }
.tsa-rule--long  { width: var(--rule-long); }

/* Paper variant: solid ink, no gradient */
.tsa-rule--paper {
  background: var(--ink);
  opacity: 0.6;
}

/* Probe halo — for hero surfaces only */
.tsa-halo {
  position: absolute;
  inset: 0;
  background: var(--glow-halo);
  pointer-events: none;
}

/* Surface presets */
.tsa-surface-ice {
  background: linear-gradient(180deg, var(--ice-abyss) 0%, var(--ice-deep) 40%, var(--ice-night) 100%);
  color: var(--fg-on-ice);
}
.tsa-surface-paper {
  background: var(--paper-book);
  color: var(--ink);
}