/* CSS Variables for Type Scale and Design Tokens
 * Cornerstone uses the shared Connect the Thoughts tokens (src/css/tokens.css)
 * loaded BEFORE this file. The --cs-* aliases below let the existing
 * cornerstone-specific stylesheet read from the arcade palette without
 * a wholesale rewrite. Bump the brand by editing tokens.css.
 */
:root {
    --font-size-32: 2rem;
    --font-size-24: 1.5rem;
    --font-size-18: 1.125rem;
    --font-size-16: 1rem;
    --font-size-14: 0.875rem;
    --font-size-12: 0.75rem;

    /* Legacy fallback values — overridden by the arcade-aliased block below.
     * Kept so that any old override site sees the same shape. */
    --cs-neutral-dark: #212121;
    --cs-neutral-medium: #666666;
    --cs-neutral-light: #9ca3af;
    --cs-neutral: #666666;
    --cs-success: #12b76a;
    --cs-primary: #667eea;
    --cs-primary-soft: #eef2ff;
    --cs-primary-hover: #5a67d8;
    --cs-accent: #2b63d4;
    --cs-background: #ffffff;
    --cs-background-soft: #f8f9fa;
}

/* ============================================================
 * Game tone — amber. Wire the shared --accent to the amber tone
 * so any arcade chrome (topbar brand mark, focus rings) picks up
 * this game's identity colour.
 * ============================================================ */
:root {
    --accent: var(--tone-amber-fg);
    --accent-hover: var(--tone-amber-fg);
}
[data-theme="dark"] {
    --accent: var(--tone-amber-fg);
    --accent-hover: var(--tone-amber-fg);
}

/* ============================================================
 * Token bridge — map the cornerstone-specific --cs-* tokens onto
 * the shared arcade palette so light/dark mode flips for free.
 * Declared after the fallback block so these take precedence in
 * the cascade.
 * ============================================================ */
:root {
    --cs-primary: var(--accent);
    --cs-primary-soft: var(--tone-amber-bg);
    --cs-primary-hover: var(--accent-hover);
    --cs-accent: var(--accent);
    --cs-ink: var(--fg);
    --cs-text: var(--fg);
    --cs-neutral-dark: var(--fg);
    --cs-neutral-medium: var(--fg-muted);
    --cs-neutral: var(--fg-muted);
    --cs-neutral-light: var(--fg-subtle);
    --cs-muted: var(--fg-muted);
    --cs-subtle: var(--fg-subtle);
    --cs-line: var(--border);
    --cs-line-soft: var(--border);
    --cs-bg: var(--bg-elev);
    --cs-bg-soft: var(--bg);
    --cs-page: var(--bg);
    --cs-background: var(--bg-elev);
    --cs-background-soft: var(--bg);
    /* --cs-success stays a true green — semantic, not brand. */
}