/**
 * Alpacas on Vacation - CSS Variables
 * Design Theme: "Vacation Adventure Postcard" with 1960s travel aesthetic
 *
 * This file defines all colors, fonts, spacing, and shadows used throughout
 * the game UI. Update these variables to adjust the entire visual theme.
 */

:root {
  /* ============================================
     PRIMARY COLORS - Main UI Elements
     ============================================ */

  --color-sky-blue: #87CEEB;      /* Bright cheerful vacation sky */
  --color-grass-green: #7BC043;   /* Fresh outdoor adventure green */
  --color-sunset-orange: #FF9B54; /* Warm adventurous accent */
  --color-alpaca-cream: #F4E8D0;  /* Soft welcoming neutral background */

  /* ============================================
     SECONDARY COLORS - Supporting Elements
     ============================================ */

  --color-mountain-purple: #9B7EBD; /* Distant mountains, adds depth */
  --color-beach-sand: #E8D5B7;      /* Warm tan for secondary backgrounds */
  --color-adventure-red: #E74C3C;   /* Friendly warning color */
  --color-success-green: #52C17B;   /* Bright friendly success */

  /* ============================================
     NEUTRALS - Text and Backgrounds
     ============================================ */

  --color-cloud-white: #FEFEFE;   /* Off-white, not harsh pure white */
  --color-pebble-gray: #6B7280;   /* Medium gray for secondary text */
  --color-stone-dark: #374151;    /* Dark gray for text (not pure black) */
  --color-mist-light: #F3F4F6;    /* Very light gray for subtle backgrounds */

  /* ============================================
     ACCENT COLORS - Special Elements
     ============================================ */

  --color-star-yellow: #FFC845;   /* Warm buttery yellow for stars/achievements */
  --color-river-blue: #5DADE2;    /* Playful blue for info/links */
  --color-ocean-blue: #2B7A9E;    /* Darker blue for readable text on light backgrounds */
  --color-forest-green: #2D5F3F;  /* Deep green for trees/nature elements */

  /* ============================================
     CANVAS/GAME COLORS - Game Board
     ============================================ */

  --color-canvas-bg: #1F2937;        /* Softer than pure black for canvas */
  --color-canvas-bg-alt: #1A3A2E;    /* Alternative: forest green theme */
  --color-grid-line: rgba(45, 95, 63, 0.2); /* Subtle forest green grid lines */

  /* ============================================
     TYPOGRAPHY - Font Families
     ============================================ */

  /* Display font for headings, titles, and emphasis */
  --font-display: 'Fredoka One', 'Trebuchet MS', 'Arial Rounded MT Bold', sans-serif;

  /* Body font for UI text, descriptions, and general content */
  --font-body: 'Nunito', -apple-system, system-ui, 'Segoe UI', sans-serif;

  /* ============================================
     FONT SIZES - Type Hierarchy
     ============================================ */

  --font-size-h1: 52px;      /* Game title */
  --font-size-h2: 30px;      /* Level names, major headings */
  --font-size-h3: 22px;      /* Section headers */
  --font-size-body: 15px;    /* Standard body text */
  --font-size-small: 13px;   /* Small text, captions */
  --font-size-button: 16px;  /* Button text */

  /* ============================================
     SPACING - Border Radius
     ============================================ */

  --radius-small: 8px;    /* Small elements like buttons */
  --radius-medium: 12px;  /* Medium panels */
  --radius-large: 16px;   /* Large cards */
  --radius-xlarge: 24px;  /* Extra large modals */

  /* ============================================
     SHADOWS - Depth & Elevation
     ============================================ */

  /* Solid shadows for buttons (1960s style) */
  --shadow-button-primary: 0 4px 0 #C56B28;
  --shadow-button-secondary: 0 3px 0 #4A9AC9;

  /* Soft shadows for panels and cards */
  --shadow-card: 0 6px 0 rgba(55, 65, 81, 0.3);
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.3);

  /* ============================================
     BUTTON GRADIENTS
     ============================================ */

  --gradient-primary: linear-gradient(180deg, #FF9B54 0%, #E88A45 100%);
  --gradient-primary-hover: linear-gradient(180deg, #FFB070 0%, #F39A5A 100%);

  /* ============================================
     TRANSITIONS - Animation Timing
     ============================================ */

  --transition-fast: 200ms ease;      /* Quick interactions */
  --transition-normal: 300ms ease;    /* Standard animations */
  --transition-slow: 400ms ease;      /* Thoughtful movements */

  /* ============================================
     Z-INDEX LAYERS - Stacking Order
     ============================================ */

  --z-base: 1;          /* Default layer */
  --z-dropdown: 100;    /* Dropdowns and popovers */
  --z-overlay: 500;     /* Tutorial overlays */
  --z-modal: 1000;      /* Modal dialogs */
  --z-tooltip: 2000;    /* Tooltips (highest) */
}

/* ============================================
   LEGACY COLOR MAPPINGS
   For gradual migration - will be removed later
   ============================================ */

:root {
  /* Map old variable names to new colors for compatibility */
  --primary-color: var(--color-sunset-orange);
  --secondary-color: var(--color-river-blue);
  --success-color: var(--color-success-green);
  --warning-color: var(--color-adventure-red);
  --text-color: var(--color-stone-dark);
  --background-color: var(--color-alpaca-cream);
}