/* ═══════════════════════════════════════════════════════════════════════
reading-echo.tokens.css
─────────────────────────────────────────────────────────────────────
The Reading Echo extension. ONLY adds --ct-* tokens and named
keyframes. Imports the core foundation; never re-defines core values.
In production:
═══════════════════════════════════════════════════════════════════════ */
@import url('./core.tokens.css');
:root {
/* ── BACKGROUNDS (semantic aliases over core) ───────────────────── */
--ct-bg-cosmos: var(--bg-cosmic);
--ct-bg-depth: #050608; /* echo wells, below surface */
--ct-surface-glass: var(--bg-glass);
--ct-surface-raised: var(--bg-surface);
--ct-surface-sunken: rgba(8, 9, 12, 0.55);
/* ── BORDERS (3 new states) ─────────────────────────────────────── */
--ct-border-hairline: var(--border-hairline);
--ct-border-subtle: var(--border-subtle);
--ct-border-active: var(--border-active);
--ct-border-selected: rgba(201, 166, 107, 0.40);
--ct-border-warning: rgba(217, 107, 92, 0.40);
--ct-border-closed: rgba(236, 233, 225, 0.06);
/* ── TEXT ───────────────────────────────────────────────────────── */
--ct-text-primary: var(--text-primary);
--ct-text-secondary: var(--text-secondary);
--ct-text-muted: var(--text-subtle);
--ct-text-mono: var(--text-mono);
/* ── STAR & TRACE ───────────────────────────────────────────────── */
--ct-star-quiet: rgba(236, 233, 225, 0.40);
--ct-star-faint: rgba(236, 233, 225, 0.18);
--ct-tarot-shadow: rgba(0, 0, 0, 0.55);
--ct-celestial-line: rgba(236, 233, 225, 0.10);
/* ── ECHO STATE ─────────────────────────────────────────────────── */
--ct-echo-due: #ECE9E1;
--ct-echo-due-glow: 0 0 12px rgba(236, 233, 225, 0.55), 0 0 28px rgba(236, 233, 225, 0.18);
--ct-echo-waiting: rgba(236, 233, 225, 0.55);
--ct-echo-paused: rgba(236, 233, 225, 0.32);
--ct-echo-closed: rgba(236, 233, 225, 0.18);
--ct-echo-light: var(--accent-signal);
--ct-echo-full: #ECE9E1;
/* ── EVIDENCE LEVEL ─────────────────────────────────────────────── */
--ct-evidence-low: rgba(236, 233, 225, 0.22);
--ct-evidence-medium: rgba(236, 233, 225, 0.55);
--ct-evidence-high: #ECE9E1;
--ct-evidence-low-glow: none;
--ct-evidence-medium-glow: 0 0 8px rgba(236, 233, 225, 0.18);
--ct-evidence-high-glow: 0 0 16px rgba(236, 233, 225, 0.34);
/* ── DOMAIN SIGNAL BAND (luminance only — never hue) ───────────── */
--ct-domain-rel: rgba(236, 233, 225, 0.62);
--ct-domain-work: rgba(236, 233, 225, 0.55);
--ct-domain-inner: rgba(236, 233, 225, 0.46);
--ct-domain-affairs: rgba(236, 233, 225, 0.38);
--ct-domain-other: rgba(236, 233, 225, 0.28);
/* ── INTERNAL DEPLETION (muted brick, never bright red) ─────────── */
--ct-signal-depletion: #8A4B43;
--ct-signal-depletion-glow: 0 0 12px rgba(138, 75, 67, 0.32);
/* ── ACTION SIGNAL ──────────────────────────────────────────────── */
--ct-signal-action: var(--accent-signal);
--ct-signal-action-soft: rgba(201, 166, 107, 0.55);
/* ── FATE THREAD SIGNAL TOGGLE (replaces standalone Daily Bubble) ── */
--ct-toggle-size: 48px;
--ct-toggle-size-mobile: 44px;
--ct-toggle-bg: radial-gradient(circle at 50% 45%, rgba(28,30,38,0.92) 0%, rgba(8,9,12,0.96) 70%);
--ct-toggle-ring: rgba(236, 233, 225, 0.18);
--ct-toggle-ring-active: rgba(236, 233, 225, 0.55);
--ct-toggle-glow-quiet: none;
--ct-toggle-glow-active: 0 0 16px rgba(236, 233, 225, 0.10);
--ct-toggle-glow-due: 0 0 18px rgba(236, 233, 225, 0.18);
--ct-toggle-glow-reward: 0 0 18px rgba(201, 166, 107, 0.32);
--ct-toggle-label-bg: rgba(8, 9, 12, 0.84);
/* ── RAIL GEOMETRY ──────────────────────────────────────────────── */
--ct-rail-thickness: 1px;
--ct-rail-node-sm: 6px;
--ct-rail-node-md: 10px;
--ct-rail-node-lg: 14px;
--ct-rail-node-anchor: 18px;
--ct-rail-track-color: rgba(236, 233, 225, 0.10);
--ct-rail-track-completed: rgba(236, 233, 225, 0.32);
/* ── COMPONENT RADII ────────────────────────────────────────────── */
--ct-radius-control: 2px;
--ct-radius-surface: 4px;
--ct-radius-floating: 12px; /* MAX — reserved for the Fate Thread toggle pill label */
--ct-radius-pill: 999px;
/* ── COMPONENT SHADOWS ──────────────────────────────────────────── */
--ct-shadow-card-ghost: 0 1px 0 rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.5);
--ct-shadow-panel: 0 24px 64px rgba(0, 0, 0, 0.72);
--ct-shadow-fade-closed: inset 0 0 32px rgba(0, 0, 0, 0.6);
/* ── MOTION (extends core, adds 2 explicit names) ───────────────── */
--ct-dur-fast: var(--dur-fast); /* 300ms — hover, focus */
--ct-dur-base: var(--dur-base); /* 400ms — alias kept for compat */
--ct-dur-medium: var(--dur-base); /* 400ms — node select, rail draw */
--ct-dur-slow: var(--dur-slow); /* 700ms — panel rise, sheet rise */
--ct-dur-pulse: 2200ms; /* due-node, signal-toggle pulse */
--ct-dur-rail-draw: 900ms;
--ct-dur-morph: 520ms; /* signal-toggle state morph */
--ct-ease-quiet-out: var(--ease-quiet);
--ct-ease-cinematic: var(--ease-cinematic);
--ct-ease-signal-pulse: cubic-bezier(0.45, 0.05, 0.55, 0.95);
--ct-reduced-fade-dur: 200ms;
}
/* ═════════════════════════════════════════════════════════════════════
NAMED KEYFRAMES
═════════════════════════════════════════════════════════════════════ */
@keyframes ct-signal-toggle-pulse {
0%, 100% { box-shadow: var(--ct-toggle-glow-active); }
50% { box-shadow: var(--ct-toggle-glow-due); }
}
@keyframes ct-signal-toggle-morph {
from { opacity: 0; transform: scale(.85); }
to { opacity: 1; transform: scale(1); }
}
@keyframes ct-signal-toggle-sweep {
0% { stroke-dashoffset: 80; opacity: 0; }
30% { opacity: 1; }
100% { stroke-dashoffset: 0; opacity: 0.55; }
}
@keyframes ct-signal-toggle-reconnect {
0% { box-shadow: var(--ct-toggle-glow-quiet); border-color: var(--ct-toggle-ring); }
50% { box-shadow: var(--ct-toggle-glow-active); border-color: var(--ct-toggle-ring-active); }
100% { box-shadow: var(--ct-toggle-glow-quiet); border-color: var(--ct-toggle-ring); }
}
@keyframes ct-signal-toggle-shimmer {
0% { box-shadow: var(--ct-toggle-glow-quiet); }
40% { box-shadow: var(--ct-toggle-glow-reward); }
100% { box-shadow: var(--ct-toggle-glow-quiet); }
}
@keyframes ct-old-card-anchor-breathe {
0%, 100% { box-shadow: 0 0 0 0 rgba(236,233,225,0); }
50% { box-shadow: 0 0 12px 0 rgba(236,233,225,0.08); }
}
@keyframes ct-signal-rail-draw {
0% { stroke-dashoffset: 200; opacity: 0; }
20% { opacity: 1; }
100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes ct-due-node-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(236,233,225,0.40), 0 0 0 0 rgba(236,233,225,0.16); transform: scale(1); }
50% { box-shadow: 0 0 0 4px rgba(236,233,225,0.10), 0 0 18px 2px rgba(236,233,225,0.28); transform: scale(1.08); }
}
@keyframes ct-rail-node-select {
from { box-shadow: 0 0 0 0 rgba(236,233,225,0); }
to { box-shadow: 0 0 0 2px rgba(236,233,225,0.18), 0 0 14px rgba(236,233,225,0.32); }
}
@keyframes ct-rail-segment-highlight {
from { opacity: 0; transform: scaleX(.6); }
to { opacity: 1; transform: scaleX(1); }
}
@keyframes ct-echo-candle-tick { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes ct-panel-glass-rise {
from { opacity: 0; transform: translateY(8px) scale(0.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ct-mobile-sheet-rise {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
@keyframes ct-closing-fade {
from { opacity: 1; }
to { opacity: 0.32; }
}
/* ═════════════════════════════════════════════════════════════════════
REDUCED MOTION — global fallback for the Reading Echo extension
═════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: var(--ct-reduced-fade-dur) !important;
animation-iteration-count: 1 !important;
transition-duration: var(--ct-reduced-fade-dur) !important;
transition-timing-function: linear !important;
}
}