/* =============================================
   DESIGN TOKENS - CSS Custom Properties
   Black Talon / Medieval RPG Theme

   All design tokens extracted from newStyle.css.
   Use these variables throughout the codebase for
   consistency and easy theme adjustments.
   ============================================= */

:root {

    /* -----------------------------------------
       COLOR PALETTE: Backgrounds
       ----------------------------------------- */

    /* Panel backgrounds (dark medieval base) */
    --color-bg-primary: rgba(25, 15, 12, 0.98);
    --color-bg-secondary: rgba(18, 10, 8, 0.99);
    --color-bg-tertiary: rgba(35, 18, 15, 0.95);
    --color-bg-dark: rgba(0, 0, 0, 0.4);
    --color-bg-darker: rgba(0, 0, 0, 0.6);
    --color-bg-darkest: rgba(0, 0, 0, 0.7);
    --color-bg-overlay: rgba(18, 10, 8, 0.92);
    --color-bg-option: #1a1210;

    /* Solid panel backgrounds */
    --color-panel-bg-solid-dark: #120a08;
    --color-panel-bg-solid: #190f0c;
    --color-panel-bg-alt: #0d0704;

    /* Panel gradients */
    --gradient-panel: linear-gradient(180deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
    --gradient-filter-bar: linear-gradient(180deg, rgba(35, 18, 15, 0.95) 0%, rgba(25, 12, 10, 0.98) 100%);


    /* -----------------------------------------
       COLOR PALETTE: Panel Header (Red)
       ----------------------------------------- */

    --color-header-start: rgba(100, 30, 30, 1);
    --color-header-end: rgba(60, 18, 18, 1);
    --gradient-panel-header: linear-gradient(180deg, var(--color-header-start) 0%, var(--color-header-end) 100%);


    /* -----------------------------------------
       COLOR PALETTE: Borders
       ----------------------------------------- */

    --color-border-primary: rgba(139, 69, 19, 0.5);
    --color-border-light: rgba(139, 69, 19, 0.3);
    --color-border-medium: rgba(139, 69, 19, 0.4);
    --color-border-strong: rgba(139, 69, 19, 0.6);
    --color-border-input: #5a4a3a;
    --color-border-subtle: rgba(255, 255, 255, 0.1);


    /* -----------------------------------------
       COLOR PALETTE: Gold / Accent
       ----------------------------------------- */

    --color-gold: #c9a55c;
    --color-gold-light: #FFD700;
    --color-gold-medium: #DAA520;
    --color-gold-dark: #b8860b;
    --color-gold-muted: #c9a227;
    --color-gold-warm: #d4a84b;
    --color-gold-text: #c9a55a;


    /* -----------------------------------------
       COLOR PALETTE: Red / Danger
       ----------------------------------------- */

    --color-red-dark: #8b0000;
    --color-red-medium: #c41e1e;
    --color-red-bright: #ff4444;
    --color-red-accent: #c62828;
    --color-red-glow: rgba(139, 0, 0, 0.15);
    --color-red-button-start: #8b0000;
    --color-red-button-end: #4a0000;


    /* -----------------------------------------
       COLOR PALETTE: Brown / Wood
       ----------------------------------------- */

    --color-brown-saddle: #8B4513;
    --color-brown-dark: #5D2E0C;
    --color-brown-sienna: #A0522D;
    --color-brown-muted: #654321;
    --color-brown-leather: #8b7355;
    --color-brown-shadow: #6f5d51;
    --color-brown-tag: #601010;


    /* -----------------------------------------
       COLOR PALETTE: Text
       ----------------------------------------- */

    --color-text-primary: #fff;
    --color-text-secondary: #ccc;
    --color-text-muted: #888;
    --color-text-dim: #666;
    --color-text-warm: #e8d9b0;
    --color-text-body: #e0d5c5;
    --color-text-heading: #c9a55c;
    --color-text-link: #E7DAB2;
    --color-text-tibia: #5A2800;
    --color-text-orange: #ff7e00;
    --color-text-fire: #ff6b35;


    /* -----------------------------------------
       COLOR PALETTE: Status / Feedback
       ----------------------------------------- */

    /* Success */
    --color-success: #4CAF50;
    --color-success-light: #81C784;
    --color-success-bg: rgba(46, 125, 50, 0.2);
    --color-success-text: #4ade80;

    /* Error */
    --color-error: #c62828;
    --color-error-light: #EF9A9A;
    --color-error-bg: rgba(198, 40, 40, 0.2);
    --color-error-bright: #ff4444;

    /* Warning */
    --color-warning: #FF9800;
    --color-warning-light: #FFB74D;
    --color-warning-bg: rgba(255, 152, 0, 0.2);

    /* Info */
    --color-info: #2196F3;
    --color-info-light: #64B5F6;
    --color-info-bg: rgba(33, 150, 243, 0.2);


    /* -----------------------------------------
       COLOR PALETTE: Twitch / External
       ----------------------------------------- */

    --color-twitch: #9146FF;
    --color-twitch-light: #bf94ff;


    /* -----------------------------------------
       TYPOGRAPHY: Font Families
       ----------------------------------------- */

    --font-heading: 'Cinzel', serif;
    --font-heading-alt: 'Cinzel', 'Times New Roman', serif;
    --font-body: 'Georgia', 'Times New Roman', serif;
    --font-body-alt: 'Georgia', serif;
    --font-ui: Verdana, Arial, 'Times New Roman', sans-serif;
    --font-system: 'Segoe UI', Arial, sans-serif;
    --font-display: Copperplate, Fantasy;
    --font-sans: 'Open Sans', sans-serif;
    --font-mono: 'Courier New', monospace;
    --font-mono-alt: 'Consolas', monospace;
    --font-tibia: 'tibia';


    /* -----------------------------------------
       TYPOGRAPHY: Font Sizes
       ----------------------------------------- */

    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --font-size-2xl: 22px;
    --font-size-3xl: 24px;


    /* -----------------------------------------
       SPACING
       ----------------------------------------- */

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-base: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 25px;
    --spacing-2xl: 30px;
    --spacing-3xl: 40px;
    --spacing-4xl: 60px;


    /* -----------------------------------------
       BORDER RADIUS
       ----------------------------------------- */

    --radius-sm: 4px;
    --radius-base: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-pill: 20px;
    --radius-circle: 50%;


    /* -----------------------------------------
       SHADOWS
       ----------------------------------------- */

    /* Panel shadows */
    --shadow-panel: 0 0 50px rgba(0, 0, 0, 0.8),
                    0 0 100px rgba(139, 0, 0, 0.15),
                    inset 0 1px 0 rgba(255, 255, 255, 0.03);

    /* Elevation shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 4px 15px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 8px 30px rgba(0, 0, 0, 0.9);
    --shadow-2xl: 0 18px 45px rgba(0, 0, 0, 0.55);

    /* Interactive / button shadows */
    --shadow-button: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --shadow-button-hover: 0 6px 20px rgba(218, 165, 32, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    --shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.2);

    /* Glow effects */
    --shadow-glow-gold: 0 0 10px rgba(201, 165, 92, 0.2);
    --shadow-glow-gold-strong: 0 0 15px rgba(201, 165, 92, 0.3);
    --shadow-glow-red: 0 0 15px rgba(139, 0, 0, 0.4);
    --shadow-glow-green: 0 0 10px rgba(45, 138, 45, 0.3);

    /* Focus ring */
    --shadow-focus: 0 0 0 3px rgba(218, 165, 32, 0.15);


    /* -----------------------------------------
       BREAKPOINTS
       (Use in JS or as reference; for CSS use
        the @media rules below or the --bp-* values
        in calc() expressions.)
       ----------------------------------------- */

    --bp-mobile: 768px;
    --bp-tablet: 1024px;
    --bp-desktop: 1200px;
    --bp-wide: 1418px;


    /* -----------------------------------------
       LAYOUT: Panel Widths
       ----------------------------------------- */

    --panel-width-sm: 500px;
    --panel-width-md: 700px;
    --panel-width-base: 900px;
    --panel-width-lg: 1100px;
    --panel-width-xl: 1300px;


    /* -----------------------------------------
       TRANSITIONS
       ----------------------------------------- */

    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-crossfade: 2s ease-in-out;


    /* -----------------------------------------
       Z-INDEX SCALE
       ----------------------------------------- */

    --z-background: -1;
    --z-base: 1;
    --z-overlay: 10;
    --z-modal: 100;
    --z-toast: 9999;


    /* -----------------------------------------
       BUTTONS: Medieval
       ----------------------------------------- */

    --btn-gradient: linear-gradient(180deg, #8B4513 0%, #5D2E0C 100%);
    --btn-gradient-hover: linear-gradient(180deg, #A0522D 0%, #8B4513 100%);
    --btn-border: #DAA520;
    --btn-border-hover: #FFD700;
    --btn-text: #FFD700;
    --btn-text-hover: #FFF;

    --btn-red-gradient: linear-gradient(180deg, #8b0000 0%, #4a0000 100%);
    --btn-red-gradient-hover: linear-gradient(180deg, #c00000 0%, #8b0000 50%, #5a0000 100%);

    --btn-gold-gradient: linear-gradient(180deg, #d4a500 0%, #b8860b 50%, #8b6914 100%);
    --btn-gold-border: #ffd700;


    /* -----------------------------------------
       FORM INPUTS: Medieval
       ----------------------------------------- */

    --input-bg: rgba(0, 0, 0, 0.6);
    --input-bg-hover: rgba(0, 0, 0, 0.45);
    --input-bg-focus: rgba(0, 0, 0, 0.7);
    --input-border: #5a4a3a;
    --input-border-hover: rgba(139, 69, 19, 0.6);
    --input-border-focus: #DAA520;
    --input-text: #e0d5c5;
    --input-placeholder: #666;
}