/**
 * CSS Custom Properties (Variables)
 *
 * Design tokens for colors, spacing, and component sizing.
 * Import this first in main.css.
 */

:root {
    /* Background colors */
    --bg-dark: #1a1a2e;
    --bg-card: #16213e;
    --bg-sidebar: #0f0f1a;

    /* Accent colors */
    --accent: #e94560;
    --accent-rgb: 233, 69, 96;
    --accent-hover: #ff6b6b;

    /* Text colors */
    --text: #eaeaea;
    --text-muted: #888;

    /* Borders */
    --border: #333;

    /* Card (playing card) colors */
    --card-bg: #fff;
    --card-border: #ccc;
    --suit-red: #d32f2f;
    --suit-black: #222;

    /* Street backgrounds */
    --street-bg: rgba(255,255,255,0.03);

    /* Result colors */
    --winner-green: #4caf50;
    --loser-red: #f44336;

    /* Label colors */
    --label-street: #64b5f6;
    --label-lesson: #4caf50;
    --label-villain: #e94560;

    /* ===========================================
       CALCULATOR CARD SIZES - 3 Standard Tiers
       Maintains ~8% padding ratio across all sizes
       =========================================== */

    /* Small (sm): Card picker grid */
    --card-sm-width: 46px;
    --card-sm-height: 59px;
    --card-sm-font: 18px;
    --card-sm-padding: 4px;

    /* Medium (md): Player hole cards */
    --card-md-width: 52px;
    --card-md-height: 67px;
    --card-md-font: 20px;
    --card-md-padding: 4px;

    /* Large (lg): Board/community cards */
    --card-lg-width: 69px;
    --card-lg-height: 89px;
    --card-lg-font: 29px;
    --card-lg-padding: 8px;

    /* Legacy alias - maps to medium */
    --calc-card-width: var(--card-md-width);
    --calc-card-height: var(--card-md-height);
    --calc-card-font: var(--card-md-font);

    /* Base card sizing - used by .playing-card elsewhere */
    --card-width: 35px;
    --card-height: 45px;
    --card-font: 14px;

    /* Canonical reference size for transform-based scaling */
    --card-ref-width: 60px;
    --card-ref-height: 77px;
    --card-ref-font: 24px;
}