/* =============================================================================
   Design Tokens - Daily Image Hunt
   =============================================================================

   This file contains all design tokens (CSS custom properties) for the
   Daily Image Hunt application. Using tokens ensures consistency across
   the player and admin interfaces and makes it easy to update design
   decisions in one place.

   Token Structure:
   ----------------
   1. Primitive Tokens: Raw values (colors, sizes, etc.)
   2. Semantic Tokens: Purpose-based tokens that reference primitives

   Usage:
   ------
   Instead of: color: #3498db;
   Use:        color: var(--color-primary);

   Instead of: padding: 20px;
   Use:        padding: var(--spacing-md);

   Example:
   --------
   .button {
     background-color: var(--color-primary);
     padding: var(--spacing-sm) var(--spacing-md);
     border-radius: var(--radius-sm);
     transition: var(--transition-default);
   }

   .button:hover {
     background-color: var(--color-primary-hover);
   }

   ============================================================================= */

:root {
  /* ===========================================================================
     PRIMITIVE TOKENS
     ===========================================================================
     These are the raw values. Prefer using semantic tokens in your CSS.
     =========================================================================== */

  /* ---------------------------------------------------------------------------
     Colors - Blues
     --------------------------------------------------------------------------- */
  --blue-400: #5dade2;
  --blue-500: #3498db;
  --blue-600: #2980b9;
  --blue-700: #21618c;

  /* ---------------------------------------------------------------------------
     Colors - Grays
     --------------------------------------------------------------------------- */
  --gray-50: #ffffff;
  --gray-100: #f8f9fa;
  --gray-150: #f5f5f5;
  --gray-200: #ecf0f1;
  --gray-300: #e1e8ed;
  --gray-400: #bdc3c7;
  --gray-500: #95a5a6;
  --gray-600: #7f8c8d;
  --gray-700: #34495e;
  --gray-800: #2c3e50;
  --gray-900: #333333;

  /* ---------------------------------------------------------------------------
     Colors - Reds/Errors
     --------------------------------------------------------------------------- */
  --red-100: #fee;
  --red-300: #e74c3c;
  --red-400: #c33;
  --red-500: #c0392b;

  /* ---------------------------------------------------------------------------
     Colors - Greens/Success
     --------------------------------------------------------------------------- */
  --green-100: #d4edda;
  --green-300: #28a745;
  --green-400: #27ae60;
  --green-700: #155724;

  /* ---------------------------------------------------------------------------
     Colors - Yellows/Warnings
     --------------------------------------------------------------------------- */
  --yellow-400: #f39c12;

  /* ---------------------------------------------------------------------------
     Spacing Scale
     --------------------------------------------------------------------------- */
  --spacing-xs: 5px;
  --spacing-sm: 8px;
  --spacing-md: 10px;
  --spacing-lg: 12px;
  --spacing-xl: 15px;
  --spacing-2xl: 20px;
  --spacing-3xl: 24px;
  --spacing-4xl: 25px;
  --spacing-5xl: 28px;
  --spacing-6xl: 30px;
  --spacing-7xl: 35px;
  --spacing-8xl: 40px;
  --spacing-9xl: 50px;
  --spacing-10xl: 60px;

  /* ---------------------------------------------------------------------------
     Typography - Font Sizes
     --------------------------------------------------------------------------- */
  --font-size-xs: 0.8rem;
  --font-size-sm: 0.85rem;
  --font-size-base: 0.9rem;
  --font-size-md: 0.95rem;
  --font-size-lg: 1rem;
  --font-size-xl: 1.1rem;
  --font-size-2xl: 1.2rem;
  --font-size-3xl: 1.3rem;
  --font-size-4xl: 1.5rem;
  --font-size-5xl: 1.8rem;
  --font-size-6xl: 2rem;
  --font-size-7xl: 2.2rem;
  --font-size-8xl: 2.5rem;
  --font-size-9xl: 3rem;

  /* ---------------------------------------------------------------------------
     Typography - Font Families
     --------------------------------------------------------------------------- */
  --font-family-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                        Oxygen, Ubuntu, Cantarell, sans-serif;

  /* ---------------------------------------------------------------------------
     Typography - Line Heights
     --------------------------------------------------------------------------- */
  --line-height-tight: 1.4;
  --line-height-normal: 1.6;

  /* ---------------------------------------------------------------------------
     Typography - Font Weights
     --------------------------------------------------------------------------- */
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: bold;

  /* ---------------------------------------------------------------------------
     Border Radius
     --------------------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 50%;

  /* ---------------------------------------------------------------------------
     Box Shadows
     --------------------------------------------------------------------------- */
  --shadow-xs: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);

  /* ---------------------------------------------------------------------------
     Transitions
     --------------------------------------------------------------------------- */
  --transition-fast: 0.15s;
  --transition-default: 0.3s;
  --transition-slow: 0.6s;
  --transition-ease: ease;
  --transition-linear: linear;

  /* ---------------------------------------------------------------------------
     Border Widths
     --------------------------------------------------------------------------- */
  --border-thin: 1px;
  --border-default: 2px;
  --border-thick: 3px;
  --border-extra-thick: 4px;

  /* ---------------------------------------------------------------------------
     Opacity
     --------------------------------------------------------------------------- */
  --opacity-disabled: 0.7;
  --opacity-overlay: 0.8;

  /* ---------------------------------------------------------------------------
     Z-Index Scale
     --------------------------------------------------------------------------- */
  --z-index-base: 1;
  --z-index-overlay: 1000;

  /* ---------------------------------------------------------------------------
     Layout - Max Widths
     --------------------------------------------------------------------------- */
  --max-width-sm: 400px;
  --max-width-md: 500px;
  --max-width-lg: 600px;
  --max-width-container: 1200px;
  --max-width-container-wide: 1400px;

  /* ---------------------------------------------------------------------------
     Layout - Heights
     --------------------------------------------------------------------------- */
  --min-height-xs: 200px;
  --min-height-sm: 250px;
  --min-height-md: 300px;
  --min-height-lg: 350px;
  --min-height-xl: 400px;
  --height-card-image: 200px;
  --height-card-image-sm: 180px;
  --min-height-touch-target: 44px;

  /* ---------------------------------------------------------------------------
     Layout - Grid
     --------------------------------------------------------------------------- */
  --grid-gap: 24px;
  --grid-min-column-width: 320px;

  /* ===========================================================================
     WORDLE-INSPIRED COLORS (Phase 9.2 - Satirical Variations)
     ===========================================================================
     These colors are inspired by Wordle but with satirical tweaks to make them
     recognizable yet distinct. We call them "Hunt" colors for Daily Image Hunt.
     =========================================================================== */

  /* ---------------------------------------------------------------------------
     Hunt Colors - Satirical Wordle Variations
     --------------------------------------------------------------------------- */
  /* Hunt green: Slightly darker and more vibrant than typical puzzle game greens */
  --hunt-correct-green: #5a9d52;

  /* Hunt yellow: Warmer and more golden than typical puzzle game yellows */
  --hunt-present-yellow: #d4af37;

  /* Hunt gray: Slightly lighter with cooler tone than typical puzzle game grays */
  --hunt-absent-gray: #8a8e91;

  /* Additional Hunt colors for UI elements */
  --hunt-tile-empty: #ffffff;
  --hunt-tile-border: #3a3a3c;
  --hunt-tile-border-active: #565758;
  --hunt-tile-text: #000000;
  --hunt-tile-text-light: #ffffff;

  /* Hunt background colors (Wordle-inspired but unique) */
  --hunt-bg-primary: #ffffff;
  --hunt-bg-secondary: #f6f7f8;
  --hunt-bg-overlay: rgba(0, 0, 0, 0.5);

  /* ---------------------------------------------------------------------------
     Hunt Animations - Wordle-Inspired Timing
     --------------------------------------------------------------------------- */
  /* Flip animation (signature Wordle animation) */
  --animation-flip-duration: 0.6s;
  --animation-flip-stagger: 0.2s;
  --animation-flip-easing: ease-in-out;

  /* Pop animation (letter entry feedback) */
  --animation-pop-duration: 0.1s;
  --animation-pop-easing: ease-in-out;

  /* Bounce animation (win celebration) */
  --animation-bounce-duration: 0.5s;
  --animation-bounce-stagger: 0.1s;
  --animation-bounce-easing: ease-in-out;

  /* Shake animation (error feedback) */
  --animation-shake-duration: 0.5s;
  --animation-shake-easing: ease-in-out;


  /* ===========================================================================
     SEMANTIC TOKENS
     ===========================================================================
     These tokens describe the purpose/intent. Use these in your CSS.
     =========================================================================== */

  /* ---------------------------------------------------------------------------
     Brand Colors
     --------------------------------------------------------------------------- */
  --color-primary: var(--blue-500);
  --color-primary-hover: var(--blue-600);
  --color-primary-light: var(--blue-400);
  --color-primary-dark: var(--blue-700);

  /* ---------------------------------------------------------------------------
     Text Colors
     --------------------------------------------------------------------------- */
  --color-text-primary: var(--gray-900);
  --color-text-secondary: var(--gray-600);
  --color-text-muted: var(--gray-500);
  --color-text-heading: var(--gray-800);
  --color-text-heading-light: var(--gray-700);
  --color-text-inverse: var(--gray-50);

  /* ---------------------------------------------------------------------------
     Background Colors
     --------------------------------------------------------------------------- */
  --color-background-body: var(--gray-150);
  --color-background-body-alt: var(--gray-200);
  --color-background-surface: var(--gray-50);
  --color-background-elevated: var(--gray-50);
  --color-background-subtle: var(--gray-100);
  --color-background-overlay: rgba(0, 0, 0, var(--opacity-overlay));

  /* ---------------------------------------------------------------------------
     Border Colors
     --------------------------------------------------------------------------- */
  --color-border-default: var(--gray-400);
  --color-border-light: var(--gray-300);
  --color-border-subtle: var(--gray-200);
  --color-border-focus: var(--color-primary);

  /* ---------------------------------------------------------------------------
     Feedback Colors - Error
     --------------------------------------------------------------------------- */
  --color-error: var(--red-300);
  --color-error-dark: var(--red-500);
  --color-error-text: var(--red-400);
  --color-error-bg: var(--red-100);
  --color-error-border: var(--red-300);

  /* ---------------------------------------------------------------------------
     Feedback Colors - Success
     --------------------------------------------------------------------------- */
  --color-success: var(--green-400);
  --color-success-text: var(--green-700);
  --color-success-bg: var(--green-100);
  --color-success-border: var(--green-300);

  /* ---------------------------------------------------------------------------
     Feedback Colors - Warning
     --------------------------------------------------------------------------- */
  --color-warning: var(--yellow-400);
  --color-warning-text: var(--yellow-400);
  --color-warning-bg: var(--yellow-400);
  --color-warning-border: var(--yellow-400);

  /* ---------------------------------------------------------------------------
     Hunt Game State Colors (Wordle-Inspired)
     --------------------------------------------------------------------------- */
  /* Use Hunt colors for game feedback */
  --color-correct: var(--hunt-correct-green);
  --color-present: var(--hunt-present-yellow);
  --color-absent: var(--hunt-absent-gray);

  /* Attempt tile colors */
  --color-attempt-empty: var(--hunt-tile-empty);
  --color-attempt-hit: var(--hunt-correct-green);
  --color-attempt-miss: var(--hunt-absent-gray);
  --color-attempt-border: var(--hunt-tile-border);
  --color-attempt-text: var(--hunt-tile-text);
  --color-attempt-text-light: var(--hunt-tile-text-light);

  /* ---------------------------------------------------------------------------
     Button Colors
     --------------------------------------------------------------------------- */
  --color-button-primary-bg: var(--color-primary);
  --color-button-primary-hover: var(--color-primary-hover);
  --color-button-primary-text: var(--gray-50);
  --color-button-secondary-bg: var(--gray-500);
  --color-button-secondary-hover: var(--gray-600);
  --color-button-secondary-text: var(--gray-50);
  --color-button-danger-bg: var(--color-error);
  --color-button-danger-hover: var(--color-error-dark);
  --color-button-danger-text: var(--gray-50);
  --color-button-disabled-bg: var(--gray-500);
  --color-button-disabled-alt-bg: var(--gray-400);

  /* ---------------------------------------------------------------------------
     Component - Card
     --------------------------------------------------------------------------- */
  --color-card-bg: var(--gray-50);
  --color-card-border: var(--gray-300);
  --color-card-hover-shadow: var(--shadow-lg);

  /* ---------------------------------------------------------------------------
     Component - Canvas
     --------------------------------------------------------------------------- */
  --color-canvas-border: var(--gray-300);
  --color-canvas-border-alt: var(--gray-400);
  --cursor-canvas: crosshair;

  /* ---------------------------------------------------------------------------
     Component - Form
     --------------------------------------------------------------------------- */
  --color-input-border: var(--gray-400);
  --color-input-border-focus: var(--color-primary);
  --color-input-bg: var(--gray-50);
  --color-label: var(--gray-700);

  /* ---------------------------------------------------------------------------
     Spacing - Component Specific
     --------------------------------------------------------------------------- */
  --spacing-container: var(--spacing-2xl);
  --spacing-container-sm: var(--spacing-xl);
  --spacing-container-xs: var(--spacing-md);
  --spacing-section: var(--spacing-6xl);
  --spacing-section-sm: var(--spacing-4xl);
  --spacing-section-xs: var(--spacing-2xl);
  --spacing-button-x: var(--spacing-5xl);
  --spacing-button-y: 14px;
  --spacing-button-sm-x: var(--spacing-2xl);
  --spacing-button-sm-y: var(--spacing-lg);
  --spacing-button-xs-x: 16px;
  --spacing-button-xs-y: var(--spacing-sm);
  --spacing-form-group: var(--spacing-2xl);
  --spacing-gap-default: var(--spacing-xl);
  --spacing-gap-sm: var(--spacing-sm);
  --spacing-gap-lg: var(--spacing-3xl);

  /* ---------------------------------------------------------------------------
     Typography - Semantic
     --------------------------------------------------------------------------- */
  --font-size-body: var(--font-size-lg);
  --font-size-body-sm: var(--font-size-base);
  --font-size-heading-1: var(--font-size-8xl);
  --font-size-heading-2: var(--font-size-6xl);
  --font-size-heading-3: var(--font-size-xl);
  --font-size-subtitle: var(--font-size-xl);
  --font-size-button: var(--font-size-lg);
  --font-size-button-sm: var(--font-size-base);
  --font-size-hint: var(--font-size-sm);
  --font-size-meta: var(--font-size-sm);

  /* ---------------------------------------------------------------------------
     Borders - Semantic
     --------------------------------------------------------------------------- */
  --border-default-style: var(--border-default) solid var(--color-border-default);
  --border-light-style: var(--border-thin) solid var(--color-border-light);
  --border-dashed-style: var(--border-default) dashed var(--color-border-default);

  /* ---------------------------------------------------------------------------
     Transitions - Semantic
     --------------------------------------------------------------------------- */
  --transition-button: background-color var(--transition-default);
  --transition-all: all var(--transition-default) var(--transition-ease);
  --transition-spinner: var(--transition-slow) var(--transition-linear);

  /* ---------------------------------------------------------------------------
     Shadows - Semantic
     --------------------------------------------------------------------------- */
  --shadow-card: var(--shadow-md);
  --shadow-card-hover: var(--shadow-lg);
  --shadow-elevated: var(--shadow-md);
  --shadow-canvas: var(--shadow-sm);
  --shadow-subtle: var(--shadow-xs);
}

/* =============================================================================
   USAGE EXAMPLES
   =============================================================================

   Button Example:
   ---------------
   .btn {
     background-color: var(--color-button-primary-bg);
     color: var(--color-button-primary-text);
     padding: var(--spacing-button-y) var(--spacing-button-x);
     border-radius: var(--radius-sm);
     transition: var(--transition-button);
   }

   .btn:hover {
     background-color: var(--color-button-primary-hover);
   }

   Card Example:
   -------------
   .card {
     background: var(--color-card-bg);
     border: var(--border-light-style);
     border-radius: var(--radius-lg);
     padding: var(--spacing-container);
     box-shadow: var(--shadow-card);
   }

   .card:hover {
     box-shadow: var(--shadow-card-hover);
   }

   Typography Example:
   -------------------
   h1 {
     font-size: var(--font-size-heading-1);
     color: var(--color-text-heading);
     font-family: var(--font-family-system);
     line-height: var(--line-height-normal);
   }

   Form Input Example:
   -------------------
   input {
     border: var(--border-thin) solid var(--color-input-border);
     border-radius: var(--radius-sm);
     padding: var(--spacing-md);
     background: var(--color-input-bg);
   }

   input:focus {
     border-color: var(--color-input-border-focus);
   }

   ============================================================================= */