/*
 * Bryn ⬩ tokens ⬩ Fable Microsite Exploration v2
 *
 * PROVENANCE MODEL
 *   [INHERITED]  blocks are verbatim from 01-Canonical/03-Brand/tokens.css
 *                (v0.6). Do not edit here; canon owns them.
 *   [EXTENDED]   blocks are this exploration's additions (High Ground
 *                direction, DESIGN-NOTES.md §3). Each carries the canon it
 *                grows from. If the direction wins, these are the port-back
 *                candidates.
 *
 * Token consumers should never read raw values. Always reference these vars.
 */

/* ============================================================
 * [INHERITED] 1. Color ⬩ single dark theme, Civic purple accent
 * ============================================================ */

:root,
[data-theme="watch"] {

  /* ----- Surface ⬩ tinted toward deep violet (Palette D, 2026-06-17),
     so the neutrals read as branded dark, not flat grey slate ----- */
  --bg:             #07050E;
  --bg-alt:         #0C0918;
  --surface:        #191327;
  --surface-alt:    #120C20;

  /* ----- Rules ----- */
  --border:         #2C2444;
  --border-strong:  #3D3360;

  /* ----- Text ----- */
  --text:           #E2E8F0;
  --text-secondary: #94A3B8;
  --text-muted:     #7B8794;
  --text-inverse:   #FFFFFF;

  /* ----- Accent ⬩ Civic purple ⬩ the brand and action color ----- */
  --brand:          #7C3AED;
  --brand-hover:    #6D28D9;
  --brand-soft:     #9993FF;
  --brand-shade:    #3E1973;
  --brand-tint:     #1E1033;
  --brand-glow:     rgba(124, 58, 237, 0.35);
  --brand-pip-halo: rgba(124, 58, 237, 0.18);
  --brand-pill-bg:  rgba(124, 58, 237, 0.18);
  --brand-pill-br:  rgba(124, 58, 237, 0.30);

  /* ----- Semantic hues (Palette D, 2026-06-17). The single-accent
     doctrine is relaxed to a disciplined three-color system: purple is
     the brand and action; teal is the live signal (watched, scored,
     caught); coral is the lost minute and cost. Each hue means something;
     none is decoration. ----- */
  --signal:         #2FD9C2;
  --signal-soft:    #7FF0E2;
  --signal-glow:    rgba(47, 217, 194, 0.35);
  --signal-halo:    rgba(47, 217, 194, 0.18);
  --signal-tint:    rgba(47, 217, 194, 0.10);
  --warn:           #FF7E5F;
  --warn-tint:      rgba(255, 126, 95, 0.10);

  /* ----- Inverse text on the drench ----- */
  --on-brand:       #FFFFFF;
  --on-brand-dim:   rgba(255, 255, 255, 0.7);
  --on-brand-quiet: rgba(255, 255, 255, 0.18);

  /* ----- Outcome labels ⬩ audit + pattern-detail only ----- */
  --outcome-good:   oklch(0.62 0.07 155);
  --outcome-risk:   oklch(0.6  0.10 25);

  /* ----- Drench shadow + card elevation tokens ----- */
  --shadow-elev: 0 1px 2px rgba(0, 0, 0, 0.4),
                 0 20px 60px -24px rgba(124, 58, 237, 0.45);
  --shadow-tier-lead: 0 1px 2px rgba(10, 9, 16, 0.04),
                      0 20px 40px -20px rgba(124, 58, 237, 0.35);

  /* Drench band ambient sheen ⬩ the one documented gradient exception. */
  --drench-sheen:
    radial-gradient(circle at 85% 80%, rgba(255,255,255,0.18), transparent 50%),
    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.08), transparent 40%);
}

/* ============================================================
 * [EXTENDED] E2. Elevation ladder ⬩ DESIGN-NOTES §3
 * Grown from: v0.6 brand-tinted seam bands (DESIGN.md §4) and the five
 * hard bands of the stones gradient. Aliases only: no new color values.
 * Sections declare an elevation; pages descend toward the drench.
 * Constraints carried: max one elev-3 (tint) band and one elev-4
 * (drench) per page.
 * ============================================================ */

:root {
  --elev-0: var(--bg);          /* sky ⬩ hero, open sections */
  --elev-1: var(--bg-alt);      /* high band */
  --elev-2: var(--surface-alt); /* mid band ⬩ proof, ledgers */
  --elev-3: var(--brand-tint);  /* tint band ⬩ one per page */
  --elev-4: var(--brand);       /* the drench ⬩ one per page */
}

/* ============================================================
 * [INHERITED] 2. Type ⬩ families, scale, weights, tracking
 * ============================================================ */

:root {
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.78rem, 0.74rem + 0.20vw, 0.92rem);
  --step-0:  clamp(0.95rem, 0.90rem + 0.25vw, 1.05rem);
  --step-1:  clamp(1.05rem, 0.98rem + 0.35vw, 1.20rem);
  --step-2:  clamp(1.40rem, 1.15rem + 1.10vw, 1.90rem);
  --step-3:  clamp(2.00rem, 1.20rem + 2.60vw, 3.40rem);
  --step-4:  clamp(2.60rem, 1.40rem + 4.40vw, 5.50rem);
  --step-5:  clamp(3.50rem, 2.60rem + 4.00vw, 6.40rem);

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-strong:   700;
  --weight-heavy:    800;
  --weight-black:    900;

  --track-tight:      -0.035em;
  --track-snug:       -0.030em;
  --track-default:    -0.020em;
  --track-body:       -0.005em;
  --track-loose:       0;
  --track-mono-meta:   0.02em;
  --track-stamp:       0.06em;
  --track-stamp-wide:  0.12em;
  --track-stamp-max:   0.14em;

  --leading-display:  1.02;
  --leading-tight:    1.05;
  --leading-snug:     1.20;
  --leading-body:     1.55;
  --leading-loose:    1.60;
}

/* ============================================================
 * [INHERITED] 3. Spacing ⬩ 4px base
 * ============================================================ */

:root {
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  44px;
  --sp-9:  64px;
  --sp-10: 96px;
  --sp-11: 144px;

  --rhythm-row:     var(--sp-5);
  --rhythm-block:   var(--sp-8);
  --rhythm-section: clamp(calc(var(--sp-10) / 2), 6vh, calc(var(--sp-11) / 2));

  --frame-max:      1200px;
  --frame-pad:      clamp(20px, 4vw, 32px);
  --topbar-h:       64px;
}

/* ============================================================
 * [INHERITED] 4. Radius
 * ============================================================ */

:root {
  --radius-none:   0;
  --radius-soft:   6px;
  --radius-card:   8px;
  --radius-tab:   10px;
  --radius-panel: 12px;
  --radius-shot:  14px;
  --radius-block: 16px;
  --radius-pip:   50%;
  --radius-pill:  9999px;
}

/* ============================================================
 * [INHERITED] 5. Borders
 * ============================================================ */

:root {
  --border-hairline:  1px solid var(--border);
  --border-soft:      1px solid var(--border);
  --border-strong-l:  1px solid var(--border-strong);
  --border-brand:     1px solid var(--brand);
  --border-dashed:    1px dashed var(--border);
}

/* ============================================================
 * [INHERITED] 6. Motion ⬩ easing, durations, keyframes
 * ============================================================ */

:root {
  --ease:           cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-ring:      cubic-bezier(0.2, 0.4, 0.4, 1);
  --ease-fall:      cubic-bezier(0.75, 0, 1, 1);
  --ease-rise:      cubic-bezier(0, 0, 0.25, 1);

  --dur-instant:    80ms;
  --dur-fast:       180ms;
  --dur-base:       200ms;
  --dur-toggle:     200ms;
  --dur-mark:       240ms;
  --dur-reveal:     700ms;
  --dur-seg-in:     480ms;
  --dur-pulse:      1800ms;
  --dur-bounce:     2000ms;
  --dur-hill-pulse: 2600ms;
  --dur-hero-dot:   4000ms;
  --dur-sweep:      6000ms;
  --dur-hero-ring:  6500ms;

  --stagger-1:      50ms;
  --stagger-2:     180ms;
  --stagger-3:     320ms;
  --stagger-4:     460ms;
}

@keyframes hero-dot-breathe {
  0%, 100% { opacity: 0.18; transform: scale(1); }
  50%      { opacity: 0.32; transform: scale(1.06); }
}
@keyframes hero-ring {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.55; border-width: 2px; }
  70%  {                                              opacity: 0.08; border-width: 1px; }
  100% { transform: translate(-50%, -50%) scale(14);  opacity: 0;    border-width: 0.5px; }
}
@keyframes civic-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--brand-pip-halo); }
  50%      { box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.06); }
}
@keyframes bryn-sweep {
  from { transform: translateX(0); }
  to   { transform: translateX(460px); }
}
@keyframes signal-bounce {
  0%   { transform: translateY(-2px); animation-timing-function: linear; }
  6%   { transform: translateY(-2px); animation-timing-function: var(--ease-fall); }
  50%  { transform: translateY( 2px); animation-timing-function: var(--ease-rise); }
  100% { transform: translateY(-2px); }
}
@keyframes signal-ping {
  0%   { transform: scale(1);   opacity: 0.95; }
  22%  { transform: scale(3.6); opacity: 0; }
  100% { transform: scale(3.6); opacity: 0; }
}
@keyframes hill-pulse {
  0%, 100% { opacity: 0.35; filter: blur(1.2px); }
  50%      { opacity: 0.90; filter: blur(1.25px); }
}
@keyframes seg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes caret-blink {
  50% { opacity: 0; }
}
@keyframes bryn-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
 * [EXTENDED] E1. Survey line motion ⬩ DESIGN-NOTES §3
 * Grown from: the scope sweep (read-head) primitive. A slow tick travels
 * the hero ground line: evidence of watching, not decoration. Percentage
 * transform so one keyframe serves any line width.
 * ============================================================ */

:root {
  --dur-survey: 9000ms; /* 12000 sped up 25%, in step with the two JS cadences (site.js) */
}
@keyframes survey-tick {
  from { left: 0%; }
  to   { left: 100%; }
}

/* ----- [INHERITED] Reduced motion override ----- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
 * [INHERITED] 7. Z-index ⬩ flat. Bryn does not stack.
 * ============================================================ */

:root {
  --z-base:    0;
  --z-raised:  1;
  --z-sticky: 10;
  --z-topbar: 100;
  --z-modal:  200;
}

/* ============================================================
 * [INHERITED] 8. Focus
 * ============================================================ */

:root {
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand);
}

*:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ============================================================
 * [INHERITED] 9. Base reset
 * ============================================================ */

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

html {
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--brand-pill-bg);
  color: var(--brand-soft);
}