/*
 * Design Tokens — Single source of truth for the entire UI
 * Load BEFORE all other stylesheets in base.html
 *
 * Phase 1:  Define tokens (this file)
 * Phase 4:  Add :root[data-theme="dark"] overrides for dark mode
 */

:root {
    /* ===== Brand / Gradient ===== */
    --brand-gradient:        linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --brand-gradient-start:  #667eea;
    --brand-gradient-end:    #764ba2;

    /* ===== Primary (action blue) ===== */
    --color-primary:         #007bff;
    --color-primary-hover:   #0056b3;
    --color-primary-alt:     #0066cc;
    --color-primary-bg:      #cce5ff;
    --color-primary-text:    #004085;

    /* ===== Success (green) ===== */
    --color-success:         #28a745;
    --color-success-hover:   #218838;
    --color-success-bg:      #d4edda;
    --color-success-text:    #155724;
    --color-success-border:  #c3e6cb;

    /* ===== Danger (red) ===== */
    --color-danger:          #dc3545;
    --color-danger-hover:    #c82333;
    --color-danger-bg:       #f8d7da;
    --color-danger-text:     #721c24;
    --color-danger-border:   #f5c6cb;

    /* ===== Warning (yellow) ===== */
    --color-warning:         #ffc107;
    --color-warning-bg:      #fff3cd;
    --color-warning-text:    #856404;
    --color-warning-border:  #ffeeba;

    /* ===== Info (teal) ===== */
    --color-info:            #17a2b8;
    --color-info-hover:      #138496;
    --color-info-bg:         #d1ecf1;
    --color-info-text:       #0c5460;
    --color-info-border:     #bee5eb;

    /* ===== Purple (accent) ===== */
    --color-purple:          #6f42c1;
    --color-purple-hover:    #5a32a3;
    --color-purple-bg:       #f3e5f5;

    /* ===== Neutral / Gray scale ===== */
    --color-gray-900:        #212529;   /* headings, strong text         */
    --color-gray-800:        #333;      /* body text, dark headers       */
    --color-gray-700:        #495057;   /* icon buttons, breadcrumb current */
    --color-gray-600:        #555;      /* secondary body text           */
    --color-gray-500:        #666;      /* labels, card paragraphs       */
    --color-gray-400:        #6c757d;   /* muted text, secondary buttons */
    --color-gray-350:        #adb5bd;   /* breadcrumb separators, light borders */
    --color-gray-300:        #dee2e6;   /* most borders                  */
    --color-gray-250:        #e0e0e0;   /* detail row borders            */
    --color-gray-200:        #e9ecef;   /* table hover, progress bg      */
    --color-gray-150:        #f0f0f0;   /* table headers, form bg        */
    --color-gray-100:        #f3f3f3;   /* spinner border                */
    --color-gray-50:         #f5f5f5;   /* page background               */
    --color-gray-25:         #f8f9fa;   /* card background, hover bg     */

    /* Inactive status (stands alone from the gray scale) */
    --color-inactive-bg:     #e2e3e5;
    --color-inactive-text:   #383d41;

    /* ===== Text ===== */
    --text-primary:          var(--color-gray-900);
    --text-body:             var(--color-gray-800);
    --text-secondary:        var(--color-gray-600);
    --text-muted:            var(--color-gray-400);
    --text-label:            var(--color-gray-500);
    --text-white:            #fff;

    /* ===== Backgrounds ===== */
    --bg-page:               var(--color-gray-50);
    --bg-card:               #fff;
    --bg-card-alt:           var(--color-gray-25);
    --bg-table-header:       var(--color-gray-150);
    --bg-table-hover:        var(--color-gray-25);
    --bg-nav:                #000;

    /* ===== Borders ===== */
    --border-color:          var(--color-gray-300);
    --border-color-light:    var(--color-gray-250);
    --border-color-input:    #ddd;
    --border-radius-sm:      4px;
    --border-radius-md:      6px;
    --border-radius-lg:      8px;
    --border-radius-xl:      12px;

    /* ===== Shadows ===== */
    --shadow-sm:             0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md:             0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg:             0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-xl:             0 10px 40px rgba(0, 0, 0, 0.3);
    --shadow-nav:            0 2px 4px rgba(0, 0, 0, 0.1);
    --overlay-bg:            rgba(0, 0, 0, 0.5);

    /* ===== Typography ===== */
    --font-family:           Arial, sans-serif;
    --font-size-2xs:         0.65rem;
    --font-size-xs:          0.75rem;
    --font-size-sm:          0.875rem;
    --font-size-base:        1rem;
    --font-size-lg:          1.125rem;
    --font-size-xl:          1.25rem;
    --font-size-2xl:         1.5rem;
    --font-size-3xl:         1.75rem;
    --font-size-4xl:         2rem;
    --font-size-stat:        2.5rem;

    /* ===== Spacing ===== */
    --space-xs:              0.25rem;
    --space-sm:              0.5rem;
    --space-md:              1rem;
    --space-lg:              1.5rem;
    --space-xl:              2rem;
    --space-2xl:             3rem;

    /* ===== Z-Index ===== */
    --z-nav:                 1000;
    --z-modal:               1000;
    --z-tooltip:             1000;
    --z-toast:               9999;

    /* ===== Transitions ===== */
    --transition-fast:       0.2s ease;
    --transition-base:       0.3s ease;
    --transition-slow:       0.3s ease-in-out;

    /* ===== Button Secondary ===== */
    --color-secondary:       var(--color-gray-400);
    --color-secondary-hover: #545b62;

    /* ===== Expiry-specific (badges on player pages) ===== */
    --expiry-warning-bg:     #fff9db;
    --expiry-warning-border: #ffe066;
    --expiry-warning-text:   #e67700;
    --expiry-urgent-bg:      #fff5f5;
    --expiry-urgent-border:  #ffc9c9;
    --expiry-urgent-text:    #c92a2a;
    --expiry-expired-bg:     #ffe3e3;
    --expiry-expired-text:   #a61e4d;
}

/* =============================================
   DARK THEME
   Activated by <html data-theme="dark">
   ============================================= */
:root[data-theme="dark"] {
    /* ===== Primary (lighter for dark bg) ===== */
    --color-primary:         #4da3ff;
    --color-primary-hover:   #7abcff;
    --color-primary-alt:     #5badff;
    --color-primary-bg:      #1a3a5c;
    --color-primary-text:    #8ecaff;

    /* ===== Success ===== */
    --color-success:         #48d068;
    --color-success-hover:   #3dba58;
    --color-success-bg:      #1a3a24;
    --color-success-text:    #6ee890;
    --color-success-border:  #2d5a3a;

    /* ===== Danger ===== */
    --color-danger:          #f06070;
    --color-danger-hover:    #f58090;
    --color-danger-bg:       #3d1a20;
    --color-danger-text:     #f8a0a8;
    --color-danger-border:   #5a2a30;

    /* ===== Warning ===== */
    --color-warning:         #ffd040;
    --color-warning-bg:      #3d3510;
    --color-warning-text:    #ffe080;
    --color-warning-border:  #5a4d1a;

    /* ===== Info ===== */
    --color-info:            #40c8e0;
    --color-info-hover:      #35b5cc;
    --color-info-bg:         #1a3035;
    --color-info-text:       #70d8e8;
    --color-info-border:     #2a4a50;

    /* ===== Purple ===== */
    --color-purple:          #9b6dd7;
    --color-purple-hover:    #b088e0;
    --color-purple-bg:       #2d1a3d;

    /* ===== Gray scale (inverted) ===== */
    --color-gray-900:        #e8e8e8;
    --color-gray-800:        #d8d8d8;
    --color-gray-700:        #c0c0c0;
    --color-gray-600:        #b0b0b0;
    --color-gray-500:        #a0a0a0;
    --color-gray-400:        #909090;
    --color-gray-350:        #606060;
    --color-gray-300:        #404040;
    --color-gray-250:        #383838;
    --color-gray-200:        #303030;
    --color-gray-150:        #282828;
    --color-gray-100:        #242424;
    --color-gray-50:         #1a1a1a;
    --color-gray-25:         #222222;

    /* Inactive status */
    --color-inactive-bg:     #333;
    --color-inactive-text:   #999;

    /* ===== Text ===== */
    --text-primary:          #e8e8e8;
    --text-body:             #d8d8d8;
    --text-secondary:        #b0b0b0;
    --text-muted:            #888;
    --text-label:            #999;

    /* ===== Backgrounds ===== */
    --bg-page:               #141414;
    --bg-card:               #1e1e1e;
    --bg-card-alt:           #252525;
    --bg-table-header:       #282828;
    --bg-table-hover:        #2a2a2a;
    --bg-nav:                #111;

    /* ===== Borders ===== */
    --border-color:          #383838;
    --border-color-light:    #333;
    --border-color-input:    #444;

    /* ===== Shadows (stronger for dark bg) ===== */
    --shadow-sm:             0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md:             0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg:             0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-xl:             0 10px 40px rgba(0, 0, 0, 0.6);
    --shadow-nav:            0 2px 8px rgba(0, 0, 0, 0.4);

    /* ===== Button Secondary ===== */
    --color-secondary:       #707070;
    --color-secondary-hover: #888;

    /* ===== Expiry badges ===== */
    --expiry-warning-bg:     #3d3510;
    --expiry-warning-border: #5a4d1a;
    --expiry-warning-text:   #ffd860;
    --expiry-urgent-bg:      #3d1a1a;
    --expiry-urgent-border:  #5a2a2a;
    --expiry-urgent-text:    #ff8080;
    --expiry-expired-bg:     #3d1a20;
    --expiry-expired-text:   #ff9090;
}