:root{
/* Core brand */
--yellow-500:#f8f948;--yellow-400:#fbfb7a;--yellow-600:#e2e330;--yellow-700:#b8b91f;
--white:#ffffff;--black:#000000;
/* Neutrals — pulled from the video-frame grade (warm, slightly desaturated) */
--ink-900:#0d0c0a;--ink-800:#1a1815;--ink-700:#2b2823;--ink-600:#463f37;--ink-500:#6b6157;
--ink-400:#9b8e85;--ink-300:#c4bab1;--ink-200:#e3ddd6;--ink-100:#f4f1ec;--ink-050:#faf8f5;
/* Semantic surfaces */
--surface-page:var(--ink-900);--surface-card:var(--ink-800);--surface-raised:var(--ink-700);
--surface-invert:var(--ink-050);--surface-accent:var(--yellow-500);
/* Semantic text */
--text-primary:var(--white);--text-secondary:var(--ink-300);--text-muted:var(--ink-400);
--text-accent:var(--yellow-500);--text-on-accent:var(--black);--text-on-light:var(--ink-900);
/* Lines */
--border-subtle:rgba(255,255,255,.12);--border-strong:rgba(255,255,255,.28);
--border-accent:var(--yellow-500);--border-on-light:rgba(13,12,10,.14);
/* Caption system (the hook frame) */
--caption-base:var(--white);--caption-accent:var(--yellow-500);
--caption-glow:rgba(248,249,72,.55);--caption-shadow:rgba(0,0,0,.45);
/* States */
--state-hover-veil:rgba(255,255,255,.08);--state-press-veil:rgba(0,0,0,.18);
--focus-ring:var(--yellow-500);
}