/* ============================================
   CSS Variables - Design System
   Peter & The Foxes Band Website
   ============================================

   USAGE:
   Import this file FIRST in all HTML pages:
   <link rel="stylesheet" href="/css/variables.css">

   Then use variables throughout your CSS:
   color: var(--color-primary);
   font-family: var(--font-body);
   ============================================ */

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

  --color-primary: #1297a6;           /* Teal - Primary brand color */
  --color-secondary: #F33F14;         /* Orange - Secondary/accent color */
  --color-tertiary: #413201;          /* Dark brown - Tertiary color */
  --color-accent: #fef7cb;            /* Cream - Light accent color */

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

  --bg-light: #F9F9F9;                /* Light gray background */
  --bg-white: #ffffff;                /* Pure white background */
  --bg-teal: var(--color-primary);                 /* Teal background */
  --bg-dark-brown: var(--color-tertiary);           /* Dark brown background */
  --bg-cream: var(--color-accent);                /* Cream background */
  --bg-charcoal: #222629;             /* Dark charcoal background */

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

  --text-dark: #010c0d;               /* Primary dark text (on light bg) */
  --text-light: var(--bg-light);              /* Primary light text (on dark bg) */
  --text-medium: #666666;             /* Medium gray text (secondary) */
  --text-light-gray: #999999;         /* Light gray text (tertiary) */
  --text-charcoal: var(--bg-charcoal);           /* Darker gray text */
  --text-muted: #555555;              /* Muted gray text */

  /* ============================================
     HEADING COLORS
     ============================================ */

  --heading-teal: var(--color-primary);            /* Teal headings */
  --heading-orange: var(--color-secondary);          /* Orange headings */
  --heading-dark: var(--text-dark);            /* Dark headings */
  --heading-light: var(--color-accent);           /* Light/cream headings */

  /* ============================================
     STATUS COLORS - Success
     ============================================ */

  --color-success: #27ae60;           /* Success green */
  --color-success-bg: #d4edda;        /* Success background */
  --color-success-bg-alt: #9fd6ac;    /* Success background (backend) */
  --color-success-border: #c3e6cb;    /* Success border */
  --color-success-text: #155724;      /* Success text (dark) */
  --text-success: #0c2f14;            /* Success text (legacy) */

  /* ============================================
     STATUS COLORS - Warning
     ============================================ */

  --color-warning: #ffc107;           /* Warning yellow/amber */
  --color-warning-bg: #fff3cd;        /* Warning background */
  --color-warning-border: #ffc107;    /* Warning border */
  --color-warning-text: #856404;      /* Warning text (dark) */
  --color-warning-orange: #e67e22;    /* Warning orange (approaching limit) */

  /* ============================================
     STATUS COLORS - Error/Danger
     ============================================ */

  --color-danger: #e74c3c;            /* Danger/error red */
  --color-danger-bg: #f8d7da;         /* Danger background */
  --color-danger-bg-alt: #fee;        /* Danger background (lighter) */
  --color-danger-border: #f5c6cb;     /* Danger border */
  --color-danger-text: #721c24;       /* Danger text (dark) */
  --color-danger-hover: #c0392b;      /* Danger hover state */
  --color-danger-dark: #a93226;       /* Danger darker variant */
  --color-danger-modal: #dc3545;      /* Modal danger red */
  --color-danger-modal-hover: #c82333; /* Modal danger hover */
  --color-danger-close: #d32f2f;      /* Close button danger */
  --text-error: #430f14;              /* Error text (legacy) */

  /* ============================================
     GRAYS & NEUTRALS
     ============================================ */

  --gray-50: #fafafa;                 /* Lightest gray (row hover) */
  --gray-100: #f8f9fa;                /* Very light gray (cards) */
  --gray-200: #f5f5f5;                /* Light gray (backgrounds) */
  --gray-250: #f0f0f0;                /* Light gray (hover states) */
  --gray-300: #e0e0e0;                /* Light border gray */
  --gray-400: #dddddd;                /* Medium border gray */
  --gray-500: #cccccc;                /* Standard border gray */
  --gray-600: #999999;                /* Medium text gray */
  --gray-700: #666666;                /* Dark text gray */
  --gray-800: #333333;                /* Very dark text gray */
  --gray-900: #222629;                /* Charcoal (darkest) */

  /* ============================================
     BORDERS
     ============================================ */

  --border-light: #f0f0f0;            /* Light border (subtle) */
  --border-medium: #dddddd;           /* Medium border (standard) */
  --border-dark: #cccccc;             /* Dark border (prominent) */
  --border-color: #e0e0e0;            /* Generic border (legacy) */

  /* ============================================
     INTERACTIVE STATES
     ============================================ */

  --teal-hover: #0a5a64;              /* Teal hover (darker) */
  --teal-hover-alt: #0f7a87;          /* Teal hover (alternate) */
  --teal-hover-alt2: #0f7c88;         /* Teal hover (backend) */
  --teal-light: rgba(18, 151, 166, 0.1); /* Teal with 10% opacity */
  --teal-focus: rgba(18, 151, 166, 0.2); /* Teal focus ring */

  --secondary-gray: #95a5a6;          /* Secondary button gray */
  --secondary-gray-hover: #7f8c8d;    /* Secondary button hover */

  --overlay-dark: rgba(0, 0, 0, 0.5);  /* Dark overlay (50%) */
  --overlay-medium: rgba(0, 0, 0, 0.3); /* Medium overlay (30%) */
  --overlay-light: rgba(0, 0, 0, 0.2);  /* Light overlay (20%) */
  --overlay-subtle: rgba(0, 0, 0, 0.1); /* Subtle overlay (10%) */
  --overlay-very-light: rgba(0, 0, 0, 0.05); /* Very light overlay (5%) */

  /* ============================================
     LEGACY COMPATIBILITY
     (Keep for backwards compatibility)
     ============================================ */

  --teal: var(--color-primary);
  --dark-brown: var(--color-tertiary);
  --cream: var(--color-accent);
  --white: var(--bg-light);

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

  --font-body: 'Fira Sans', 'Arial', sans-serif;
  --font-display: 'Lobster', 'Georgia', cursive;
  --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;

  /* ============================================
     TYPOGRAPHY - Font Sizes
     ============================================ */

  --font-size-xs: 0.75rem;            /* 12px */
  --font-size-sm: 0.875rem;           /* 14px */
  --font-size-base: 1rem;             /* 16px */
  --font-size-md: 1.125rem;           /* 18px */
  --font-size-lg: 1.25rem;            /* 20px */
  --font-size-xl: 1.5rem;             /* 24px */
  --font-size-2xl: 2rem;              /* 32px */
  --font-size-3xl: 2.25rem;           /* 36px */
  --font-size-4xl: 3rem;              /* 48px */

  /* ============================================
     TYPOGRAPHY - Font Weights
     ============================================ */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ============================================
     TYPOGRAPHY - Line Heights
     ============================================ */

  --line-height-tight: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.7;

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

  --spacing-xs: 0.5rem;               /* 8px */
  --spacing-sm: 1rem;                 /* 16px */
  --spacing-md: 1.5rem;               /* 24px */
  --spacing-lg: 2rem;                 /* 32px */
  --spacing-xl: 3rem;                 /* 48px */
  --spacing-2xl: 4rem;                /* 64px */

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

  --container-max-width: 1200px;
  --container-narrow: 800px;
  --container-wide: 1400px;

  /* ============================================
     EFFECTS - Shadows
     ============================================ */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 4px 16px rgba(0, 0, 0, 0.2);
  --shadow-2xl: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.1);

  /* ============================================
     EFFECTS - Transitions
     ============================================ */

  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ============================================
     EFFECTS - Border Radius
     ============================================ */

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 50%;

  /* ============================================
     Z-INDEX LAYERS
     ============================================ */

  --z-base: 1;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-fixed: 1200;
  --z-modal-backdrop: 1999;
  --z-modal: 2000;
  --z-modal-content: 2001;
  --z-popover: 3000;
  --z-tooltip: 4000;
  --z-toast: 5000;
  --z-max: 9999;

  /* ============================================
     BREAKPOINTS
     (Note: Use these as reference values)
     ============================================ */

  --mobile-max: 767px;
  --tablet-min: 768px;
  --tablet-max: 1023px;
  --desktop-min: 1024px;
  --desktop-large: 1440px;

  /* ============================================
     FORM ELEMENTS
     ============================================ */

  --input-height: 44px;               /* Standard input height */
  --input-height-sm: 36px;            /* Small input height */
  --input-height-lg: 48px;            /* Large input height */
  --input-padding: 0.5rem 0.75rem;    /* Standard input padding */
  --input-border: 1px solid var(--border-medium);
  --input-focus-border: var(--color-primary);
  --input-focus-shadow: 0 0 0 3px var(--teal-focus);
  --input-error-bg: #fef5f5;

  /* ============================================
     BUTTONS
     ============================================ */

  --btn-height: 44px;                 /* Standard button height */
  --btn-height-sm: 36px;              /* Small button height */
  --btn-height-lg: 48px;              /* Large button height */
  --btn-padding: 0.5rem 1rem;         /* Standard button padding */
  --btn-padding-sm: 0.25rem 0.75rem;  /* Small button padding */
  --btn-padding-lg: 0.75rem 1.5rem;   /* Large button padding */
}