/* ===========================================
   THE CHASE - CSS VARIABLES & DESIGN TOKENS
   ===========================================
   
   HOW TO USE:
   - Change color values here to update the entire site
   - Each variable is named by its PURPOSE, not just color
   - Example: --color-background changes all page backgrounds
   
   =========================================== */

:root {
  /* ===========================================
     NEUTRAL COLORS
     =========================================== */
  --color-nearly-white: #FCFCFC;
  --color-grey-light: #B8B8B8;
  --color-grey-dark: #363636;
  --color-nearly-black: #121212;

  /* ===========================================
     BACKGROUND COLORS
     =========================================== */
  --color-scaffold-background: #02161B;
  --color-background-overlay: #001215;

  /* ===========================================
     TEAL PALETTE (Primary Brand Colors)
     =========================================== */
  --color-teal-accent: #14B8A6;
  --color-teal-100: #CFE1E5;
  --color-teal-500: #0D6F6C;
  --color-teal-600: #0A5664;
  --color-teal-700: #08404B;
  --color-teal-800: #052B23;

  /* ===========================================
     GREEN PALETTE
     =========================================== */
  --color-green-50: #E7F6ED;
  --color-green-600: #0E863E;
  --color-green-700: #086D30;

  /* ===========================================
     WARNING / YELLOW PALETTE
     =========================================== */
  --color-warning: #FCBD3E;
  --color-warning-400: #FFDC97;
  --color-warning-600: #E9A00F;
  --color-warning-dark: #9F6900;

  /* ===========================================
     FUCHSIA / MAGENTA PALETTE
     =========================================== */
  --color-fuchsia-50: #FBE7FB;
  --color-fuchsia-600: #AA0AAA;
  --color-fuchsia-700: #7F077F;

  /* ===========================================
     BLUE PALETTE
     =========================================== */
  --color-blue-50: #E6F6FC;
  --color-blue-600: #0179AD;
  --color-blue-700: #006188;

  /* ===========================================
     RED PALETTE
     =========================================== */
  --color-red-50: #FDE6E7;
  --color-red-600: #B9010A;
  --color-red-700: #8B0108;
  --color-red-800: #6B0106;
  --color-red-900: #4B0104;

  /* ===========================================
     SEMANTIC / PURPOSE-BASED COLORS
     (Change these to quickly update the design)
     =========================================== */
  
  /* Page & Layout */
  --page-background: var(--color-scaffold-background);
  --page-overlay: var(--color-nearly-black);
  --page-overlay-opacity-top: 0.95;
  --page-overlay-opacity-bottom: 0.80;

  /* Text Colors */
  --text-primary: var(--color-nearly-white);
  --text-secondary: var(--color-grey-light);
  --text-muted: var(--color-grey-dark);
  --text-accent: var(--color-teal-accent);
  --text-heading: var(--color-nearly-white);

  /* Button Colors */
  --button-primary-bg: var(--color-teal-accent);
  --button-primary-text: var(--color-nearly-black);
  --button-primary-hover: var(--color-teal-500);
  
  --button-secondary-bg: transparent;
  --button-secondary-text: var(--color-teal-accent);
  --button-secondary-border: var(--color-teal-accent);
  --button-secondary-hover-bg: var(--color-teal-accent);
  --button-secondary-hover-text: var(--color-nearly-black);

  /* Card Colors */
  --card-background: var(--color-teal-700);
  --card-background-alt: var(--color-teal-800);
  --card-border: var(--color-teal-600);
  --card-text: var(--color-nearly-white);

  /* Input / Form Colors */
  --input-background: var(--color-nearly-white);
  --input-text: var(--color-nearly-black);
  --input-border: var(--color-grey-light);
  --input-focus-border: var(--color-teal-accent);
  --input-placeholder: var(--color-grey-dark);

  /* Navigation */
  --nav-background: rgba(2, 22, 27, 0.95);
  --nav-text: var(--color-nearly-white);
  --nav-text-hover: var(--color-teal-accent);
  --nav-active: var(--color-teal-accent);

  /* Footer */
  --footer-background: var(--color-teal-800);
  --footer-text: var(--color-nearly-white);
  --footer-link: var(--color-teal-100);
  --footer-link-hover: var(--color-teal-accent);

  /* Icons (Game Actions) */
  --icon-freeze-bg: var(--color-blue-600);
  --icon-surveillance-bg: var(--color-red-600);
  --icon-scenic-bg: var(--color-fuchsia-600);
  --icon-transport-bg: var(--color-green-600);

  /* Status Colors */
  --status-success: var(--color-green-600);
  --status-warning: var(--color-warning);
  --status-error: var(--color-red-600);
  --status-info: var(--color-blue-600);

  /* Glass Effect */
  --glass-background: rgba(8, 64, 75, 0.75);
  --glass-border: rgba(20, 184, 166, 0.3);
  --glass-opacity: 0.4; /* Adjustable opacity for all text boxes */

  /* Icons (Game Actions) - Additional */
  --icon-escaper-bg: var(--color-nearly-black);
  --icon-chaser-bg: var(--color-teal-600);
  --icon-time-bg: var(--color-teal-600);

  /* ===========================================
     TYPOGRAPHY
     =========================================== */
  
  /* Font Families - Oswald for headings, Poppins for body */
  --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Oswald', 'Arial Narrow', sans-serif;

  /* Font Sizes - Mobile First */
  --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 */
  --text-6xl: 3.75rem;    /* 60px */

  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* Line Heights */
  --leading-tight: 1.2;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* ===========================================
     SPACING
     =========================================== */
  --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-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ===========================================
     BORDER RADIUS
     =========================================== */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-2xl: 1.5rem;   /* 24px */
  --radius-full: 9999px;  /* Pill shape */

  /* ===========================================
     SHADOWS
     =========================================== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 0 30px rgba(20, 184, 166, 0.4);
  --shadow-glow-strong: 0 0 50px rgba(20, 184, 166, 0.6);

  /* ===========================================
     TRANSITIONS
     =========================================== */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;

  /* ===========================================
     Z-INDEX SCALE
     =========================================== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;

  /* ===========================================
     BREAKPOINTS (for reference)
     =========================================== */
  /* Mobile: 0 - 639px (default) */
  /* Tablet: 640px - 1023px */
  /* Desktop: 1024px+ */
  /* Large: 1280px+ */
}