/**
 * Dow Julio Design System - Design Tokens
 * 
 * BRAND PHILOSOPHY: 70's Retro Sports - Old Money Cool
 * Think: Miami Dolphins, vintage scoreboards, classic sports cards, country club refinement
 * 
 * CORE PRINCIPLES:
 * 1. Blue = Trust & Structure (financial/professional foundation)
 * 2. Orange = Action & Energy (scores, CTAs, important data)
 * 3. Cream = Success & Highlights (winning states, soft backgrounds)
 * 4. High Contrast = Quick Scanning (bold text, thick borders)
 * 
 * USAGE:
 * Import this file first, then use var(--token-name) in your styles
 * Example: color: var(--color-action-primary);
 */

:root {
  /* ============================================
     COLOR PALETTE - Semantic Names
     ============================================ */
  
  /* STRUCTURE COLORS (Cool Blues - Trust & Foundation) */
  --color-structure-deepest: #183e4e;    /* cerulean-800 - darkest backgrounds, scoreboard sections */
  --color-structure-deep: #255c74;       /* cerulean-700 - tab bars, dark text */
  --color-structure-primary: #317b9b;    /* cerulean-600 - primary headers, main structure */
  --color-structure-medium: #64aece;     /* cerulean-400 - secondary text, labels */
  --color-structure-light: #8bc2da;      /* cerulean-300 - success states, light accents */
  --color-structure-lighter: #b1d7e7;    /* cerulean-200 - borders, dividers */
  --color-structure-lightest: #d8ebf3;   /* cerulean-100 - card borders, subtle backgrounds */
  --color-structure-bg: #ecf5f9;         /* cerulean-50 - page background */
  
  /* ACCENT COLORS (Pacific Cyan - Aqua Accents) */
  --color-accent-aqua-dark: #296170;     /* pacific-cyan-700 - dark aqua text */
  --color-accent-aqua: #44a1bb;          /* pacific-cyan-500 - primary aqua (classic Dolphins) */
  --color-accent-aqua-medium: #69b4c9;   /* pacific-cyan-400 - medium aqua */
  --color-accent-aqua-light: #8fc7d6;    /* pacific-cyan-300 - light aqua, success states */
  --color-accent-aqua-lighter: #b4dae4;  /* pacific-cyan-200 - very light aqua */
  --color-accent-aqua-bg: #ecf6f8;       /* pacific-cyan-50 - aqua backgrounds */
  
  /* ACTION COLORS (Sandy Brown/Orange - Energy & CTAs) */
  --color-action-darkest: #603206;       /* sandy-brown-800 - darkest orange text */
  --color-action-dark: #904a09;          /* sandy-brown-700 - dark orange text */
  --color-action-medium: #c0630c;        /* sandy-brown-600 - medium orange */
  --color-action-primary: #f07c0f;       /* sandy-brown-500 - PRIMARY ORANGE (CTAs, scores) */
  --color-action-light: #f3963f;         /* sandy-brown-400 - light orange, warnings */
  --color-action-lighter: #f6b06f;       /* sandy-brown-300 - lighter orange */
  --color-action-lightest: #f9cb9f;      /* sandy-brown-200 - very light orange */
  --color-action-bg: #fdf2e7;            /* sandy-brown-50 - orange backgrounds */
  
  /* HIGHLIGHT COLORS (Cream - Success & Soft Backgrounds) */
  --color-highlight-cream: #fff1d0;      /* Cream - winning highlights, soft warm backgrounds */
  
  /* DANGER/WARNING COLORS (Brick Red - Violations & Alerts) */
  --color-danger-darkest: #4e2218;       /* brick-red-800 - darkest red */
  --color-danger-dark: #7c251d;          /* brick-red-700 - dark red text */
  --color-danger-medium: #a53127;        /* brick-red-600 - medium red */
  --color-danger-primary: #cf3e30;       /* brick-red-500 - PRIMARY RED (violations) */
  --color-danger-light: #d8645a;         /* brick-red-400 - light red */
  --color-danger-lighter: #e28b83;       /* brick-red-300 - lighter red */
  --color-danger-bg: #f5d8d6;            /* brick-red-100 - red backgrounds */
  
  /* NEUTRAL COLORS (Grays & Whites) */
  --color-white: #ffffff;
  --color-black: #000000;
  
  /* DIFFERENTIAL COLORS (Positive/Negative for matchup scores) */
  --color-positive: #2ECC71;
  --color-positive-light: #58D68D;
  --color-negative: #E74C3C;
  --color-negative-light: #EC7063;
  
  
  /* ============================================
     SEMANTIC COLOR MAPPINGS
     ============================================ */
  
  /* TEXT COLORS */
  --text-primary: var(--color-structure-deepest);
  --text-secondary: var(--color-structure-medium);
  --text-tertiary: var(--color-structure-light);
  --text-inverse: var(--color-white);
  --text-action: var(--color-action-primary);
  --text-danger: var(--color-danger-primary);
  
  /* BACKGROUND COLORS */
  --bg-page: var(--color-structure-bg);
  --bg-card: var(--color-white);
  --bg-scoreboard: var(--color-structure-deepest);
  --bg-highlight: var(--color-highlight-cream);
  
  /* BORDER COLORS */
  --border-default: var(--color-structure-lightest);
  --border-medium: var(--color-structure-lighter);
  --border-dark: var(--color-structure-deep);
  --border-action: var(--color-action-primary);
  --border-aqua: var(--color-accent-aqua);
  --border-danger: var(--color-danger-primary);
  --border-accent-header: var(--color-accent-aqua);    /* Bold border for headers, sidebar */
  --border-accent-body: var(--color-structure-lighter); /* Muted border for content cards */
  
  /* ACCENT TEXT (for active tabs on accent backgrounds) */
  --color-accent-text: #FFFFFF;
  
  
  /* ============================================
     TYPOGRAPHY - Retro Bold Aesthetic
     ============================================ */
  
  /* FONT FAMILIES */
  --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  /* FONT WEIGHTS - Retro = BOLD */
  --font-weight-regular: 500;    /* Minimum weight, still slightly bold */
  --font-weight-semibold: 700;   /* Standard weight for most text */
  --font-weight-bold: 800;       /* Important text */
  --font-weight-black: 900;      /* Numbers, headers, scoreboards */
  
  /* FONT SIZES */
  --font-size-xs: 0.65rem;       /* 10.4px - tiny labels */
  --font-size-sm: 0.75rem;       /* 12px - small text, captions */
  --font-size-base: 0.875rem;    /* 14px - body text */
  --font-size-md: 1rem;          /* 16px - larger body */
  --font-size-lg: 1.125rem;      /* 18px - player names */
  --font-size-xl: 1.25rem;       /* 20px - section headers */
  --font-size-2xl: 1.5rem;       /* 24px - large scores */
  --font-size-3xl: 2rem;         /* 32px - scoreboard numbers */
  --font-size-4xl: 2.5rem;       /* 40px - hero numbers */
  --font-size-5xl: 3rem;         /* 48px - matchup scores */
  
  /* LETTER SPACING - Retro = SPACED OUT */
  --letter-spacing-tight: 0.5px;
  --letter-spacing-normal: 1px;
  --letter-spacing-wide: 1.5px;
  --letter-spacing-wider: 2px;
  --letter-spacing-widest: 4px;  /* For big scoreboard numbers */
  
  /* LINE HEIGHTS */
  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  
  
  /* ============================================
     SPACING - Consistent Rhythm
     ============================================ */
  
  --space-xs: 0.25rem;     /* 4px */
  --space-sm: 0.5rem;      /* 8px */
  --space-md: 0.75rem;     /* 12px */
  --space-base: 1rem;      /* 16px */
  --space-lg: 1.25rem;     /* 20px */
  --space-xl: 1.5rem;      /* 24px */
  --space-2xl: 2rem;       /* 32px */
  
  
  /* ============================================
     BORDERS - Thick Retro Style
     ============================================ */
  
  --border-width-thin: 1px;
  --border-width-default: 2px;
  --border-width-medium: 3px;
  --border-width-thick: 4px;
  --border-width-thickest: 6px;
  
  --border-radius-sm: 2px;       /* Subtle rounding */
  --border-radius-default: 4px;  /* Standard cards */
  --border-radius-md: 8px;       /* Larger elements */
  --border-radius-lg: 12px;      /* Hero elements */
  --border-radius-full: 9999px;  /* Pills/progress bars */
  
  
  /* ============================================
     SHADOWS - Minimal, Flat Aesthetic
     ============================================ */
  
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-default: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-action: 0 4px 12px rgba(240, 124, 15, 0.2);  /* Orange glow */
  --shadow-aqua: 0 4px 12px rgba(68, 161, 187, 0.3);    /* Aqua glow */
  
  /* Shadow for bottom borders (scoreboard style) */
  --shadow-border: 0 4px 0 rgba(0, 0, 0, 0.1);
  
  
  /* ============================================
     TRANSITIONS - Smooth but Quick
     ============================================ */
  
  --transition-fast: 0.15s ease;
  --transition-default: 0.2s ease;
  --transition-slow: 0.3s ease;
  
  
  /* ============================================
     Z-INDEX LAYERS
     ============================================ */
  
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-tooltip: 1100;
}


/* ============================================
   UTILITY CLASSES - Common Patterns
   ============================================ */

/* TEXT UTILITIES */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-inverse { color: var(--text-inverse); }
.text-action { color: var(--text-action); }
.text-danger { color: var(--text-danger); }

.text-uppercase { 
  text-transform: uppercase; 
  letter-spacing: var(--letter-spacing-wide);
}

.text-scoreboard {
  font-weight: var(--font-weight-black);
  letter-spacing: var(--letter-spacing-widest);
  line-height: var(--line-height-none);
}

/* BACKGROUND UTILITIES */
.bg-page { background: var(--bg-page); }
.bg-card { background: var(--bg-card); }
.bg-scoreboard { background: var(--bg-scoreboard); }
.bg-highlight { background: var(--bg-highlight); }

/* BORDER UTILITIES */
.border-thick { border-width: var(--border-width-thick); }
.border-thickest { border-width: var(--border-width-thickest); }
.border-action { border-color: var(--border-action); }
.border-aqua { border-color: var(--border-aqua); }

/* LAYOUT UTILITIES */
.container {
  padding: var(--space-base);
}

.card {
  background: var(--bg-card);
  border-radius: var(--border-radius-default);
  padding: var(--space-base);
  border: var(--border-width-medium) solid var(--border-default);
}

.card-retro {
  background: var(--bg-card);
  border-radius: var(--border-radius-default);
  padding: var(--space-base);
  border: var(--border-width-thick) solid var(--border-default);
}