/*
 * tokens.css — Lightweight design-token layer (QW9 foundation)
 *
 * Extends the existing theme variables in styles.css (--bg-container, --text-primary,
 * --border-color, --accent-color, ...) with a consistent scale for spacing, radius,
 * elevation, typography and semantic accents. New UI (move list, game-over card,
 * stats, leaderboard) builds on these so the look stays coherent.
 */

:root {
    /* Spacing scale (4px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* Corner radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* Elevation (shadows) */
    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.10);
    --elev-2: 0 4px 14px rgba(0, 0, 0, 0.16);
    --elev-3: 0 12px 32px rgba(0, 0, 0, 0.24);

    /* Typographic scale */
    --font-xs: 11px;
    --font-sm: 13px;
    --font-md: 15px;
    --font-lg: 18px;
    --font-xl: 24px;
    --font-2xl: 32px;
    --lh-tight: 1.2;
    --lh-normal: 1.5;

    /* Semantic accents (harmonised with the board palette) */
    --hx-accent: #2ea043;
    --hx-accent-hover: #2c974b;
    --hx-accent-soft: rgba(46, 160, 67, 0.14);
    --hx-danger: #dc4034;
    --hx-danger-hover: #c0362c;
    --hx-info: #2d77c4;
    --hx-gold: #e0a93b;

    /* Minimum comfortable touch target */
    --touch-min: 44px;
}

/* ---- Shared button variants (opt-in via .hx-btn) ---- */
.hx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--touch-min);
    padding: var(--space-2) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--font-md);
    font-weight: 600;
    line-height: var(--lh-tight);
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    -webkit-user-select: none;
    user-select: none;
}

.hx-btn:active {
    transform: translateY(1px);
}

.hx-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.hx-btn--primary {
    background: var(--hx-accent);
    color: #fff;
}

.hx-btn--primary:hover:not(:disabled) {
    background: var(--hx-accent-hover);
}

.hx-btn--secondary {
    background: var(--bg-container, #fff);
    color: var(--text-primary, #1a1a1a);
    border-color: var(--border-color, #d0d0d0);
}

.hx-btn--secondary:hover:not(:disabled) {
    border-color: var(--accent-color, var(--hx-accent));
}

.hx-btn--danger {
    background: var(--hx-danger);
    color: #fff;
}

.hx-btn--danger:hover:not(:disabled) {
    background: var(--hx-danger-hover);
}

.hx-btn--ghost {
    background: transparent;
    color: var(--text-secondary, #555);
}

.hx-btn--ghost:hover:not(:disabled) {
    background: var(--hx-accent-soft);
    color: var(--text-primary, #1a1a1a);
}