/*===============================================*/
/* Core Design System Variables - Chewtoys Dugout */
/* v7.0.0 - Carved Stone theme: dugout shadows    */
/* + burnished gold accents                       */
/* Single source of truth for all CSS variables   */
/*===============================================*/

:root {
  /* ============================================
     CORE PALETTE - Carved Stone + Burnished Gold
     ============================================ */

  /* Background Surfaces - Dugout Shadows (darkest to lightest) */
  --bg-darkest: #120F17;    /* Shadow Fade */
  --bg-dark: #241C2D;       /* Deep Stadium Purple */
  --bg-primary: #2F2638;    /* Royal Bruise */
  --bg-secondary: #241C2D;  /* Deep Stadium Purple */
  --bg-elevated: #2B2724;   /* Obsidian Mortar */
  --bg-card: #3A3441;       /* Dust Grey Panel */
  --bg-card-hover: #454050; /* Dust Grey lighter */
  --bg-muted: #5E5447;      /* Deep Chisel Shadow */

  /* Gold Palette (primary accent) - Burnished Metals */
  --gold-900: #3D2E1A;      /* Deepest gold shadow */
  --gold-800: #5A4420;      /* Dark burnished */
  --gold-700: #7C6838;      /* Tarnished Edge */
  --gold-600: #B89A57;      /* Burnished Gold (primary) */
  --gold-500: #C9AD6A;      /* Polished Gold (light) */
  --gold-400: #E4D7B8;      /* Riveted Highlight */
  --gold-300: #EDE3CF;      /* Pale gold wash */
  --gold-200: #F0E8D8;      /* Faint gold tint */
  --gold-100: #F5F0E5;      /* Near-white gold */

  /* Semantic Gold Aliases (kept as --gold for backward compat) */
  --gold-dark: var(--gold-800);
  --gold-base: var(--gold-600);
  --gold-light: var(--gold-500);
  --gold-glow: rgba(184, 154, 87, 0.4);
  
  /* Purple Palette (background accent) */
  --purple-900: #241C2D;
  --purple-800: #2F2638;
  --purple-700: #5E5447;
  --purple-600: #9B8E7A;
  --purple-500: #9B8E7A;
  --purple-400: #C4B79F;
  
  /* Semantic Purple Aliases */
  --purple-dark: var(--purple-800);
  --purple-base: var(--purple-700);
  --purple-light: var(--purple-600);
  
  /* Text Colors - Stone & Bone */
  --text-bright: #D8CDB8;     /* Ancient Bone */
  --text-primary: #E7DFCF;    /* Bone Text Light */
  --text-secondary: #C4B79F;  /* Weathered Parchment */
  --text-muted: #9B8E7A;      /* Carved Stone Mid */
  --text-on-gold: #241C2D;    /* Dark text on gold */
  --text-on-dark: #E7DFCF;    /* Bone Text Light */
  --text-inverse: #241C2D;    /* Deep Stadium Purple */
  
  /* Status Colors */
  --status-success: #5F6E4A;  /* Muted Success Green */
  --status-success-bg: rgba(95, 110, 74, 0.15);
  --status-warning: #E7DFCF;
  --status-warning-bg: rgba(231, 223, 207, 0.15);
  --status-error: #6A2C2C;    /* Dried Blood Red */
  --status-error-bg: rgba(106, 44, 44, 0.15);
  --status-info: #9B8E7A;     /* Carved Stone Mid */
  --status-info-bg: rgba(155, 142, 122, 0.15);

  /* Neutral Palette (for buttons, borders) */
  --neutral-700: #2B2724;     /* Obsidian Mortar */
  --neutral-600: #3A3441;     /* Dust Grey Panel */
  --neutral-550: #5E5447;     /* Deep Chisel Shadow */
  --neutral-500: #5E5447;     /* Deep Chisel Shadow */
  --neutral-400: #9B8E7A;     /* Carved Stone Mid */
  --neutral-gray: #5E5447;    /* Deep Chisel Shadow */
  --neutral-gray-dark: #2B2724; /* Obsidian Mortar */
  
  /* Success/Action Button Colors */
  --btn-success: #5F6E4A;
  --btn-success-dark: #4A5638;
  --btn-success-light: #6E7F56;
  
  /* ============================================
     GRADIENTS
     ============================================ */
  --gradient-neutral: linear-gradient(135deg, var(--neutral-gray) 0%, var(--neutral-550) 100%);
  --gradient-success: linear-gradient(135deg, var(--btn-success) 0%, var(--btn-success-dark) 100%);
  --gradient-gold: linear-gradient(135deg, var(--gold-600) 0%, var(--gold-700) 100%);
  --gradient-gold-reverse: linear-gradient(135deg, var(--gold-700) 0%, var(--gold-600) 100%);
  --gradient-gold-subtle: linear-gradient(135deg, rgba(184, 154, 87, 0.15) 0%, rgba(184, 154, 87, 0.1) 100%);
  --gradient-purple: linear-gradient(135deg, var(--purple-800) 0%, var(--purple-700) 100%);
  --gradient-dark: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-dark) 100%);
  --gradient-card: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
  --gradient-shimmer: linear-gradient(90deg, transparent 0%, var(--gold-dark) 10%, var(--gold-base) 30%, var(--gold-light) 50%, var(--gold-base) 70%, var(--gold-dark) 90%, transparent 100%);
  --gradient-primary: var(--gradient-dark);
  --gradient-burgundy: var(--gradient-purple);
  
  /* Burgundy to Purple aliases (for legacy compatibility) */
  --burgundy-700: var(--purple-700);
  --burgundy-600: var(--purple-600);

  /* ============================================
     BORDERS
     ============================================ */
  --border-subtle: rgba(155, 142, 122, 0.12);
  --border-muted: rgba(155, 142, 122, 0.2);
  --border-default: rgba(184, 154, 87, 0.25);
  --border-strong: rgba(184, 154, 87, 0.4);
  --border-accent: var(--gold-600);

  /* ============================================
     ALPHA / OVERLAY TOKENS
     Reusable opacity variants for gold accent
     ============================================ */
  /* Gold alpha (184, 154, 87) — Burnished Gold */
  --gold-alpha-5: rgba(184, 154, 87, 0.05);
  --gold-alpha-8: rgba(184, 154, 87, 0.08);
  --gold-alpha-10: rgba(184, 154, 87, 0.1);
  --gold-alpha-12: rgba(184, 154, 87, 0.12);
  --gold-alpha-15: rgba(184, 154, 87, 0.15);
  --gold-alpha-20: rgba(184, 154, 87, 0.2);
  --gold-alpha-25: rgba(184, 154, 87, 0.25);
  --gold-alpha-30: rgba(184, 154, 87, 0.3);
  --gold-alpha-40: rgba(184, 154, 87, 0.4);
  --gold-alpha-50: rgba(184, 154, 87, 0.5);

  /* Gold-600 alpha (184, 154, 87) */
  --gold600-alpha-10: rgba(184, 154, 87, 0.1);
  --gold600-alpha-15: rgba(184, 154, 87, 0.15);
  --gold600-alpha-20: rgba(184, 154, 87, 0.2);
  --gold600-alpha-30: rgba(184, 154, 87, 0.3);

  /* White alpha overlays */
  --white-alpha-4: rgba(255, 255, 255, 0.04);
  --white-alpha-6: rgba(255, 255, 255, 0.06);
  --white-alpha-8: rgba(255, 255, 255, 0.08);
  --white-alpha-10: rgba(255, 255, 255, 0.1);
  --white-alpha-15: rgba(255, 255, 255, 0.15);
  --white-alpha-20: rgba(255, 255, 255, 0.2);

  /* Black alpha overlays */
  --black-alpha-20: rgba(0, 0, 0, 0.2);
  --black-alpha-25: rgba(0, 0, 0, 0.25);
  --black-alpha-30: rgba(0, 0, 0, 0.3);
  --black-alpha-40: rgba(0, 0, 0, 0.4);
  --black-alpha-50: rgba(0, 0, 0, 0.5);
  --black-alpha-60: rgba(0, 0, 0, 0.6);
  --black-alpha-70: rgba(0, 0, 0, 0.7);
  --black-alpha-85: rgba(0, 0, 0, 0.85);

  /* ============================================
     SHADOWS - Carved stone depth, minimal blur
     ============================================ */
  --shadow-xs: inset 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6);
  --shadow-glow-gold: 0 0 20px rgba(184, 154, 87, 0.3);
  --shadow-glow-gold-strong: 0 0 30px rgba(184, 154, 87, 0.5);
  --shadow-card: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.25);
  --shadow-card-hover: 0 4px 10px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--border-default);
  
  /* ============================================
     SPACING SCALE (4px base)
     ============================================ */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-24: 6rem;     /* 96px */
  
  /* Semantic Spacing Aliases */
  --spacing-xs: var(--space-2);
  --spacing-sm: var(--space-3);
  --spacing-md: var(--space-4);
  --spacing-lg: var(--space-6);
  --spacing-xl: var(--space-8);
  --spacing-2xl: var(--space-12);
  --spacing-3xl: var(--space-16);

  /* Short spacing aliases (for convenience) */
  --space-xs: var(--space-2);
  --space-sm: var(--space-3);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);
  
  /* ============================================
     TYPOGRAPHY - VarsityTeam for Fantasy Football theme
     ============================================ */
  --font-display: 'VarsityTeam', 'Bebas Neue', Impact, sans-serif;
  --font-heading: 'VarsityTeam', 'Bebas Neue', Impact, sans-serif;
  --font-body: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-button: 'VarsityTeam', 'Barlow Condensed', Impact, sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Fira Code', monospace;
  
  /* Font Family Aliases */
  --font-family-heading: var(--font-heading);
  --font-family-body: var(--font-body);
  
  /* Font Sizes */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  --text-5xl: 3rem;      /* 48px */
  
  /* Font Size Aliases */
  --font-size-xs: var(--text-xs);
  --font-size-sm: var(--text-sm);
  --font-size-base: var(--text-base);
  --font-size-lg: var(--text-lg);
  --font-size-xl: var(--text-xl);
  --font-size-2xl: var(--text-2xl);
  --font-size-3xl: var(--text-3xl);

  /* Short font aliases (for convenience) */
  --font-xs: var(--text-xs);
  --font-sm: var(--text-sm);
  --font-base: var(--text-base);
  --font-lg: var(--text-lg);
  --font-xl: var(--text-xl);
  --font-2xl: var(--text-2xl);
  --font-3xl: var(--text-3xl);
  
  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  
  /* Letter Spacing */
  --tracking-wide: 0.025em;
  
  /* ============================================
     BORDER RADIUS
     ============================================ */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 50px;
  --radius-full: 9999px;
  
  /* ============================================
     TRANSITIONS & EASING
     ============================================ */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  
  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-normal: var(--duration-normal) var(--ease-out);
  --transition-slow: var(--duration-slow) var(--ease-out);
  --transition-spring: var(--duration-normal) var(--ease-spring);
  --transition-base: var(--transition-normal);
  
  /* ============================================
     Z-INDEX SCALE
     ============================================ */
  --z-fixed: 1200;
  --z-tooltip: 1600;
  --z-modal-backdrop: 1350;
  
  /* ============================================
     LAYOUT
     ============================================ */
  --container-xl: 1200px;
  --container-2xl: 1400px;
  --container-max-width: var(--container-2xl);
  --content-max-width: var(--container-xl);
  
   --header-height-full: 76px;
   --header-height-shrunk: 56px;
  
  /* ============================================
     COMPONENT TOKENS
     ============================================ */
  
  /* Buttons */
  --btn-height-md: 40px;
  --btn-primary-bg: var(--gradient-gold);
  --btn-primary-bg-hover: var(--gold-500);
  --btn-primary-text: var(--text-on-gold);

  /* Inputs */
  --input-height-md: 40px;
  --input-bg: var(--bg-elevated);
  
  /* Cards */
  --card-bg: var(--bg-card);
  
  /* ============================================
     COLOR TOKEN ALIASES
     ============================================ */
  --color-accent-primary: var(--gold-600);
  --color-accent-secondary: var(--purple-700);
  --color-accent-primary-hover: var(--gold-500);
  --color-accent-secondary-hover: var(--purple-600);
  --color-accent-danger: var(--status-error);
  --color-accent-success: var(--status-success);
  --color-surface-primary: var(--bg-card);
  --color-surface-card: var(--bg-card);
  --color-surface-card-alt: var(--bg-elevated);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-muted);
  --color-text-on-accent: var(--text-on-gold);
  --color-border-muted: var(--border-muted);
  --text-hover: var(--gold-500);
  --accent-light: var(--gold-400);

  /* Accent color short aliases */
  --accent-primary: var(--gold-600);
  --accent-primary-alpha: rgba(184, 154, 87, 0.15);

  /* Background aliases */
  --bg-tertiary: var(--bg-elevated);

  /* Border aliases */
  --border-color: var(--border-default);

  /* Color danger alias */
  --color-danger: var(--status-error);
  
  /* Status color aliases */
  --color-success: var(--status-success);
  --color-warning: var(--status-warning);
  --color-error: var(--status-error);
  --color-info: var(--status-info);
  --color-status-success: var(--status-success);
  --color-status-warning: var(--status-warning);
  --color-status-error: var(--status-error);
  
  /* Input aliases */
  --input-border-color: var(--border-muted);
  --input-border-width: 1px;
  --input-height: var(--input-height-md);
  
  /* Easing aliases */
  --ease-smooth: var(--ease-out);
  
  /* Badge */
  --badge-height: 24px;
  
  /* Header-specific aliases */
  --header-bg-primary: var(--bg-dark);
  --header-bg-secondary: var(--bg-secondary);
  --header-gold: var(--gold-600);
  --header-gold-light: var(--gold-500);
  --header-gold-dark: var(--gold-800);
  
  /* Shadow aliases */
  --shadow-dark: rgba(0, 0, 0, 0.6);
  --shadow-light: rgba(231, 223, 207, 0.1);
  --shadow: rgba(0, 0, 0, 0.4);

  /* ============================================
     SYSTEM C ALIASES — WooCommerce Pages
     Maps shorthand tokens used in woocommerce-pages.css
     back to the canonical design system variables.
     ============================================ */
  --primary-bg: var(--bg-primary);
  --secondary-bg: var(--bg-secondary);
  --accent-color: var(--gold-600);
  --accent-hover: var(--gold-500);
  --radius: var(--radius-lg);
  --font-primary: var(--font-body);
  --surface-bg: var(--bg-elevated);
  --highlight-color: var(--gold-400);
  --muted-text: var(--text-muted);

  /* Status shorthand aliases */
  --success-bg: var(--status-success-bg);
  --success-dark: var(--status-success);
  --success-text: var(--text-primary);
  --warning-bg: var(--status-warning-bg);
  --warning-text: var(--text-primary);
  --danger-bg: var(--status-error-bg);
  --danger-text: var(--status-error);
  --info-bg: var(--status-info-bg);
  --info-text: var(--status-info);

  /* Gradient aliases */

  --gradient-gold-text: linear-gradient(135deg, var(--gold-600) 0%, var(--gold-400) 100%);
  
  /* Tooltip */
  --bg-tooltip: var(--bg-elevated);
  
  /* ============================================
     SKILL CATEGORY COLORS
     Fantasy Football skill categories - distinct from theme palette
     Single source of truth for all 3 builders
     ============================================ */
  /* All */
  --cat-all: #607080;
  --cat-all-dark: #404858;
  --cat-all-glow: rgba(96, 112, 128, 0.3);
  --cat-all-border: rgba(96, 112, 128, 0.5);
  --cat-all-bg: rgba(96, 112, 128, 0.15);
  
  /* General (yellow) */
  --cat-general: #d4a82a;
  --cat-general-dark: #a07e1a;
  --cat-general-glow: rgba(212, 168, 42, 0.3);
  --cat-general-border: rgba(212, 168, 42, 0.5);
  --cat-general-bg: rgba(212, 168, 42, 0.15);
  
  /* Agility (green) */
  --cat-agility: #4caf50;
  --cat-agility-dark: #357a38;
  --cat-agility-glow: rgba(76, 175, 80, 0.3);
  --cat-agility-border: rgba(76, 175, 80, 0.5);
  --cat-agility-bg: rgba(76, 175, 80, 0.15);
  
  /* Strength (red) */
  --cat-strength: #d04040;
  --cat-strength-dark: #9a2a2a;
  --cat-strength-glow: rgba(208, 64, 64, 0.3);
  --cat-strength-border: rgba(208, 64, 64, 0.5);
  --cat-strength-bg: rgba(208, 64, 64, 0.15);
  
  /* Passing (blue) */
  --cat-passing: #4488cc;
  --cat-passing-dark: #306090;
  --cat-passing-glow: rgba(68, 136, 204, 0.3);
  --cat-passing-border: rgba(68, 136, 204, 0.5);
  --cat-passing-bg: rgba(68, 136, 204, 0.15);
  
  /* Mutation (purple) */
  --cat-mutation: #9050c0;
  --cat-mutation-dark: #6a3890;
  --cat-mutation-glow: rgba(144, 80, 192, 0.3);
  --cat-mutation-border: rgba(144, 80, 192, 0.5);
  --cat-mutation-bg: rgba(144, 80, 192, 0.15);
  
  /* Devious (orange) */
  --cat-devious: #e08030;
  --cat-devious-dark: #a85e20;
  --cat-devious-glow: rgba(224, 128, 48, 0.3);
  --cat-devious-border: rgba(224, 128, 48, 0.5);
  --cat-devious-bg: rgba(224, 128, 48, 0.15);
  
  /* Extraordinary (blue-grey) */
  --cat-extraordinary: #4a90a0;
  --cat-extraordinary-dark: #356878;
  --cat-extraordinary-glow: rgba(74, 144, 160, 0.3);
  --cat-extraordinary-border: rgba(74, 144, 160, 0.5);
  --cat-extraordinary-bg: rgba(74, 144, 160, 0.15);
  
  /* Traits (brown) */
  --cat-traits: #6a5548;
  --cat-traits-dark: #4a3830;
  --cat-traits-glow: rgba(106, 85, 72, 0.3);
  --cat-traits-border: rgba(106, 85, 72, 0.5);
  --cat-traits-bg: rgba(106, 85, 72, 0.15);
  
  /* Position type colors */
  --pos-lineman: #6a6a6a;
  --pos-lineman-dark: #505050;
  --pos-lineman-light: #888888;
  --pos-catcher: #c9a030;
  --pos-catcher-dark: #a08020;
  --pos-catcher-light: #ddb840;
  --pos-thrower: #b0b0b0;
  --pos-thrower-dark: #909090;
  --pos-thrower-light: #c8c8c8;
  --pos-blitzer: #b04545;
  --pos-blitzer-dark: #8a3030;
  --pos-blitzer-light: #c85858;
  --pos-blocker: #4a8a4a;
  --pos-blocker-dark: #357035;
  --pos-blocker-light: #5ca05c;
  --pos-runner: #4080b0;
  --pos-runner-dark: #305880;
  --pos-runner-light: #5090c0;
  --pos-big-guy: #7050a0;
  --pos-big-guy-dark: #503878;
  --pos-big-guy-light: #8868b8;
}

/* ============================================
   ACCESSIBILITY OVERRIDES
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --transition-fast: 0ms;
    --transition-normal: 0ms;
    --transition-slow: 0ms;
  }
}

@media (prefers-contrast: high) {
  :root {
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --border-default: #ffffff;
    --border-strong: #ffffff;
  }
}