/* Layer 3 — COMPONENT tokens. Bind semantic tokens to component slots. */
:root,[data-theme]{
--button-radius:var(--qg-radius-pill);--button-height-sm:36px;/* @kind spacing */--button-height-md:44px;/* @kind spacing */--button-height-lg:54px;/* @kind spacing */
--button-primary-bg:var(--color-text);--button-primary-fg:var(--color-bg);--button-primary-bg-hover:var(--qg-ink-800);
--button-accent-bg:var(--color-accent);--button-accent-fg:var(--color-on-accent);--button-accent-bg-hover:var(--color-accent-hover);
--button-secondary-bg:var(--color-surface);--button-secondary-fg:var(--color-text);--button-secondary-border:var(--color-border-strong);
--button-ghost-fg:var(--color-text);--button-ghost-bg-hover:var(--qg-ink-a6);
--input-height:48px;/* @kind spacing */--input-radius:var(--qg-radius-md);--input-bg:var(--color-surface);--input-border:var(--color-border-strong);--input-border-hover:var(--color-border-interactive);--input-border-focus:var(--color-accent);
--card-radius:var(--qg-radius-xl);--card-bg:var(--color-surface);--card-border:var(--color-border);--card-shadow:var(--shadow-sm);--card-shadow-hover:var(--shadow-lg);
--tab-radius:var(--qg-radius-pill);--tab-track-bg:var(--color-surface-2);--tab-indicator-bg:var(--color-surface);
--badge-radius:var(--qg-radius-pill);
--frame-radius:var(--qg-radius-2xl);--frame-edge:var(--gradient-iris);
--nav-height:72px;/* @kind spacing */--nav-bg:var(--color-surface-glass);
--player-bg:var(--color-surface);--player-wave-idle:var(--color-border-strong);--player-wave-played:var(--color-accent);
}
[data-theme="dark"]{--button-primary-bg:var(--qg-ink-25);--button-primary-fg:var(--qg-ink-950);--button-primary-bg-hover:#FFFFFF;--button-ghost-bg-hover:var(--qg-white-a8);--card-shadow:none;--card-shadow-hover:0 24px 56px -16px rgba(0,0,0,.6)}