/* ============================================================
   ILLUMINATIAM — Global Color & Design Token System
   All colors and design tokens are defined here.
   Edit this file to retheme the entire site.
   ============================================================ */

:root {
    /* --- Primary Brand Colors --- */
    --color-gold:           #d4af37;
    --color-gold-light:     #ffd700;
    --color-gold-dark:      #b8860b;
    --color-gold-dim:       rgba(212, 175, 55, 0.1);
    --color-gold-faint:     rgba(212, 175, 55, 0.05);
    --color-gold-border:    rgba(212, 175, 55, 0.3);
    --color-gold-glow:      rgba(212, 175, 55, 0.5);
    --color-gold-glow-lg:   rgba(212, 175, 55, 0.4);

    /* --- Background Colors --- */
    --color-bg-black:       #0a0a0a;
    --color-bg-dark:        #110a0a;
    --color-bg-darker:      #1a0f0f;
    --color-bg-card:        rgba(26, 15, 15, 0.8);

    /* --- Text Colors --- */
    --color-text-primary:   #d4af37;
    --color-text-light:     #ccc;
    --color-text-muted:     #888;
    --color-text-white:     #fff;
    --color-text-black:     #000;

    /* --- Accent / Status Colors --- */
    --color-green:          #2ecc71;
    --color-green-dark:     #27ae60;
    --color-green-dim:      rgba(46, 204, 113, 0.1);
    --color-green-border:   rgba(46, 204, 113, 0.5);

    --color-red:            #e74c3c;
    --color-red-dim:        rgba(231, 76, 60, 0.1);
    --color-red-dim-hover:  rgba(231, 76, 60, 0.3);
    --color-red-border:     rgba(231, 76, 60, 0.5);

    --color-blue:           #3498db;
    --color-blue-dim:       rgba(52, 152, 219, 0.1);
    --color-blue-dim-hover: rgba(52, 152, 219, 0.3);
    --color-blue-border:    #3498db;

    /* --- Rank Colors --- */
    --color-rank-initiate:  #95a5a6;
    --color-rank-minerval:  #3498db;
    --color-rank-adept:     #9b59b6;
    --color-rank-master:    #f1c40f;
    --color-rank-gmaster:   #e67e22;

    /* --- Gradients --- */
    --grad-gold:            linear-gradient(45deg, #d4af37, #ffd700);
    --grad-gold-btn:        linear-gradient(45deg, #d4af37, #b8860b);
    --grad-gold-btn-hover:  linear-gradient(45deg, #ffd700, #d4af37);
    --grad-gold-bar:        linear-gradient(90deg, #d4af37, #ffd700);
    --grad-header:          linear-gradient(to right, #110a0a, #1a0f0f, #110a0a);
    --grad-admin-header:    linear-gradient(to right, #110a0a, #1a0f0f);
    --grad-user-header:     linear-gradient(135deg, #110a0a, #1a0f0f);
    --grad-bar-up:          linear-gradient(to top, #d4af37, #b8860b);

    /* --- Borders & Radii --- */
    --border-card:          1px solid rgba(212, 175, 55, 0.3);
    --border-gold-full:     3px solid #d4af37;
    --radius-sm:            4px;
    --radius-md:            8px;
    --radius-lg:            10px;
    --radius-pill:          20px;

    /* --- Spacing --- */
    --space-xs:  8px;
    --space-sm:  12px;
    --space-md:  20px;
    --space-lg:  25px;
    --space-xl:  30px;

    /* --- Typography --- */
    --font-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-xs:  10px;
    --font-size-sm:  12px;
    --font-size-md:  14px;
    --font-size-lg:  16px;
    --font-size-xl:  18px;
    --font-size-2xl: 24px;
    --font-size-3xl: 28px;
    --font-size-4xl: 36px;
    --font-size-hero: 42px;

    /* --- Transitions --- */
    --transition: all 0.3s ease;

    /* --- Shadows --- */
    --shadow-input-focus: 0 0 10px rgba(212, 175, 55, 0.5);
    --shadow-btn-hover:   0 5px 15px rgba(212, 175, 55, 0.4);
    --shadow-avatar:      0 0 20px rgba(212, 175, 55, 0.5);
    --shadow-rank-active: 0 0 10px rgba(212, 175, 55, 0.5);
}