/**
 * CSS Custom Properties (Variables)
 *
 * Design tokens for colors, spacing, and component sizing.
 * Import this first in main.css.
 *
 * THEME HISTORY
 *   Classic (original): see [data-theme="classic"] block below
 *   Deep    (current):  :root block -- premium dark casino palette
 */

:root {
    /* Backgrounds -- deep navy with visible indigo tint */
    --bg-dark:     #09091e;
    --bg-card:     #0f0f28;
    --bg-sidebar:  #06061a;
    --bg-tooltip:  #161636;
    --bg-dropdown: #0d0d26;

    /* Accent -- vivid magenta-red */
    --accent:     #ff1a5e;
    --accent-rgb: 255, 26, 94;
    --accent-hover: #ff4080;

    /* Text */
    --text:       #f0f0f0;
    --text-muted: #8080a8;
    --muted:      #8080a8; /* alias for --text-muted; prefer --text-muted in new code */

    /* Borders */
    --border:     #18183a;

    /* Card (playing card) colors -- unchanged across themes */
    --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:  #00e676;
    --loser-red:     #ff1744;
    --loser-red-rgb: 255, 23, 68;

    /* Label colors */
    --label-street:  #82b1ff;
    --label-lesson:  #00e676;
    --label-villain: #ff1a5e;

    /* Status / Semantic */
    --success:       #00e676;
    --success-rgb:   0, 230, 118;
    --success-alt:   #00c853;
    --success-light: #69f0ae;
    --error:         #ff1744;
    --error-rgb:     255, 23, 68;
    --error-light:   #ff5252;
    --error-light-rgb: 255, 82, 82;
    --warning:       #ffca28;
    --warning-rgb:   255, 202, 40;
    --warning-alt:   #ffa000;
    --warning-alt-rgb: 255, 160, 0;
    --info:          #2979ff;
    --info-rgb:      41, 121, 255;

    /* Poker action colors */
    --action-raise:       #aa00ff;
    --action-raise-rgb:   170, 0, 255;
    --action-raise-hover: #cc44ff;
    --action-call:        #00e676;
    --action-call-rgb:    0, 230, 118;
    --action-check:       #2979ff;
    --action-check-rgb:   41, 121, 255;
    --action-fold:        #646464;
    --action-fold-rgb:    100, 100, 100;
    --range-fold-rgb:     80, 80, 95;
    --range-custom-rgb:   99, 102, 241;

    /* Premium / upgrade UI */
    --premium:      #d500f9;
    --premium-dark: #aa00ff;
    --premium-rgb:  213, 0, 249;

    /* Tag colors */
    --tag-blue:   #6b8aff;
    --tag-green:  #00853a;
    --tag-orange: #ffa000;
    --tag-purple: #d500f9;
    --tag-cyan:   #00e5ff;
    --tag-pink:   #ff4081;
    --tag-yellow: #ffca28;

    /* UI states */
    --disabled-bg:   #2a2a4a;
    --disabled-text: #5a5a8a;

    /* Danger action button (end/delete) -- matches accent */
    --danger-btn:           #ff1a5e;
    --danger-btn-rgb:       255, 26, 94;
    --danger-btn-hover:     #ff4080;
    --danger-btn-hover-rgb: 255, 64, 128;

    /* Promo / special UI */
    --promo-gold:     #ffd740;
    --promo-gold-rgb: 255, 215, 64;

    /* Chart / data viz */
    --chart-profit:     #00e676;
    --chart-sessions:   #2979ff;
    --chart-hours:      #ffa000;
    --chart-hours-rgb:  255, 160, 0;
    --chart-hourly:     #aa00ff;
    --chart-grid:       rgba(255, 255, 255, 0.05);
    --chart-tick:       rgba(255, 255, 255, 0.6);
    --chart-tooltip-bg: rgba(0, 0, 0, 0.8);

    /* ===========================================
       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;
}

/* ==========================================================================
   THEME: High Contrast (accessibility alternative)
   Opt-in via data-theme="high-contrast" on <html>.
   Goal: brighten text, define borders, and bump the base font one step for
   readers who find the default muted palette hard to see. Keeps the brand
   navy + magenta identity; only legibility-critical tokens change.
   ========================================================================== */
:root[data-theme="high-contrast"] {
    /* Backgrounds intentionally left at the default deep-navy palette -- the
       brand blue is kept; the brighter text/borders below carry the contrast. */

    /* Text -- pure white body, bright legible muted (was #8080a8, ~4:1) */
    --text:       #ffffff;
    --text-muted: #d2d2ee;   /* ~10.5:1 on the default --bg-card, clears WCAG AAA */
    --muted:      #d2d2ee;

    /* Borders -- clearly visible card/panel edges (was #18183a) */
    --border:     #3d3d6b;

    /* Result / semantic -- lift the dimmer ones off the background */
    --info:          #4d94ff;
    --info-rgb:      77, 148, 255;

    /* Tag colors -- brighten the dark greens/blues that read as near-black */
    --tag-green:  #26c281;
    --tag-blue:   #8aa4ff;

    /* UI states -- disabled text still muted but actually visible */
    --disabled-text: #9a9ac4;

    /* Chart ticks/grid -- stronger axis labels */
    --chart-tick:  rgba(255, 255, 255, 0.85);
    --chart-grid:  rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   ACCESSIBILITY: Larger Text (independent of the palette above)
   Opt-in via data-text-size="large" on <html>. Lifts the root font ~1pt
   (16px -> 17px) so every rem-based size scales up. Toggled separately from
   high-contrast so users can pick either lever on its own.
   ========================================================================== */
:root[data-text-size="large"] {
    font-size: 17px;
}

/* ==========================================================================
   THEME: Classic (original palette -- backup)
   Restore by setting data-theme="classic" on <html>
   ========================================================================== */
[data-theme="classic"] {
    --bg-dark:     #1a1a2e;
    --bg-card:     #16213e;
    --bg-sidebar:  #0f0f1a;
    --bg-tooltip:  #2a2a3e;
    --bg-dropdown: #1a2035;

    --accent:     #e94560;
    --accent-rgb: 233, 69, 96;
    --accent-hover: #ff6b6b;

    --text:       #eaeaea;
    --text-muted: #888;

    --border:     #333;

    --winner-green:  #4caf50;
    --loser-red:     #f44336;
    --loser-red-rgb: 244, 67, 54;

    --label-street:  #64b5f6;
    --label-lesson:  #4caf50;
    --label-villain: #e94560;

    --success:       #22c55e;
    --success-rgb:   34, 197, 94;
    --success-alt:   #4caf50;
    --success-light: #81c784;
    --error:         #ef4444;
    --error-rgb:     239, 68, 68;
    --error-light:   #f87171;
    --error-light-rgb: 248, 113, 113;
    --warning:       #eab308;
    --warning-rgb:   234, 179, 8;
    --warning-alt:   #fbbf24;
    --warning-alt-rgb: 251, 191, 36;
    --info:          #3b82f6;
    --info-rgb:      59, 130, 246;

    --action-raise:       #9c27b0;
    --action-raise-rgb:   156, 39, 176;
    --action-raise-hover: #ab47bc;
    --action-call:        #4caf50;
    --action-call-rgb:    76, 175, 80;
    --action-check:       #2196f3;
    --action-check-rgb:   33, 150, 243;

    --premium:      #8b5cf6;
    --premium-dark: #7c3aed;
    --premium-rgb:  139, 92, 246;

    --tag-blue:   #6b8aff;
    --tag-green:  #22c55e;
    --tag-orange: #f97316;
    --tag-purple: #8b5cf6;
    --tag-cyan:   #06b6d4;
    --tag-pink:   #ec4899;
    --tag-yellow: #ca8a04;

    --disabled-bg:   #555;
    --disabled-text: #999;

    --danger-btn:           #c0392b;
    --danger-btn-rgb:       192, 57, 43;
    --danger-btn-hover:     #e74c3c;
    --danger-btn-hover-rgb: 231, 76, 60;

    --promo-gold:     #f0c674;
    --promo-gold-rgb: 240, 198, 116;

    --chart-profit:    #4caf50;
    --chart-sessions:  #2196f3;
    --chart-hours:     #ff9800;
    --chart-hours-rgb: 255, 152, 0;
    --chart-hourly:    #9c27b0;
}