/**
 * Starter Theme - CSS Variables
 *
 * CUSTOMIZE THIS FILE FOR EACH CLIENT
 * All component styles reference these variables
 *
 * To create a new client theme:
 * 1. Copy this file
 * 2. Update the color values to match client's brand
 * 3. Update typography to match client's fonts
 */

:root {
  /* ==========================================
   * BRAND COLORS
   * ========================================== */

  /* Primary - Main brand color (buttons, links, accents) */
  --color-primary: #061AAF;
  --color-primary-light: #1C45F5;
  --color-primary-dark: #041280;

  /* Secondary - Supporting brand color */
  --color-secondary: #EA4335;
  --color-secondary-light: #FF5A4D;
  --color-secondary-dark: #C62828;

  /* Accent - Call-to-action, highlights */
  --color-accent: #FC7D40;
  --color-accent-light: #FF9A6C;
  --color-accent-dark: #E65100;

  /* Success/Warning/Error states */
  --color-success: #4CAF50;
  --color-warning: #FF9800;
  --color-error: #F44336;


  /* ==========================================
   * TEXT COLORS
   * ========================================== */

  --color-text-primary: #2A2243;      /* Main body text */
  --color-text-secondary: #212121;    /* Headings */
  --color-text-muted: #666666;        /* Secondary text */
  --color-text-light: #999999;        /* Placeholders, hints */
  --color-text-inverse: #FFFFFF;      /* Text on dark backgrounds */


  /* ==========================================
   * BACKGROUND COLORS
   * ========================================== */

  --color-bg-white: #FFFFFF;
  --color-bg-light: #F5F7FF;          /* Light sections */
  --color-bg-alt: #F1F6FE;            /* Alternate sections */
  --color-bg-accent: #E8EBFF;         /* Highlighted areas */
  --color-bg-dark: #2A2243;           /* Dark sections, footer */
  --color-bg-highlight: #FFF8E1;      /* Warning/info boxes */


  /* ==========================================
   * BORDER COLORS
   * ========================================== */

  --color-border: #D1DAFF;
  --color-border-light: #E8EBFF;
  --color-border-dark: #2A2243;


  /* ==========================================
   * TYPOGRAPHY
   * ========================================== */

  /* Font Families */
  --font-heading: "EightiesComeback-Bold", "Arial Black", sans-serif;
  --font-body: "Moderat-Regular", "Helvetica Neue", Arial, sans-serif;
  --font-body-light: "Moderat-Light", "Helvetica Neue", Arial, sans-serif;
  --font-body-medium: "Moderat-Medium", "Helvetica Neue", Arial, sans-serif;
  --font-body-bold: "Moderat-Bold", "Helvetica Neue", Arial, sans-serif;

  /* Font Sizes */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-md: 18px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 40px;
  --font-size-4xl: 48px;
  --font-size-5xl: 56px;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.75;


  /* ==========================================
   * SPACING
   * ========================================== */

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;

  /* Section spacing */
  --section-padding: 96px;
  --section-padding-mobile: 48px;


  /* ==========================================
   * LAYOUT
   * ========================================== */

  --container-max-width: 1440px;
  --container-padding: 16px;


  /* ==========================================
   * BORDERS & SHADOWS
   * ========================================== */

  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-full: 9999px;

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 50px rgba(18, 17, 39, 0.1);


  /* ==========================================
   * TRANSITIONS
   * ========================================== */

  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;


  /* ==========================================
   * Z-INDEX SCALE
   * ========================================== */

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-overlay: 400;
  --z-modal: 500;
}


/* ==========================================
 * DARK MODE (optional - uncomment to enable)
 * ========================================== */

/*
@media (prefers-color-scheme: dark) {
  :root {
    --color-text-primary: #E0E0E0;
    --color-text-secondary: #FFFFFF;
    --color-bg-white: #1A1A2E;
    --color-bg-light: #16213E;
    --color-bg-alt: #0F3460;
  }
}
*/