/**
 * AAN [PRODUCT_NAME] - Color System
 * ================================================
 *
 * INSTRUCTIONS FOR NEW PRODUCTS:
 * 1. Replace [PRODUCT_NAME] with your product name (e.g., "AAN Gym")
 * 2. Replace [THEME_NAME] with theme description (e.g., "Fitness & Wellness")
 * 3. Update ONLY the 3 brand color sections (primary, secondary, accent)
 * 4. DO NOT modify grayscale, semantic colors, spacing, typography, or other tokens
 *
 * WCAG 2.1 AA Compliance Required:
 * - Text colors must have 4.5:1 contrast ratio minimum
 * - Use -dark variants for text on light backgrounds
 * - Use -darker variants for AAA compliance (7:1 ratio)
 *
 * Generated for AAN Solutions Product Family
 */

:root {
    /* ============================================
       BRAND COLORS - AAN [PRODUCT_NAME]
       ============================================
       CUSTOMIZATION ZONE: Update these 3 color sets for your product
       These are the ONLY colors that differ between AAN products
    */

    /* Primary Brand Color - [THEME_NAME] Theme */
    --primary: #DC2626;              /* REPLACE: Main brand color */
    --primary-rgb: 220, 38, 38;      /* REPLACE: RGB values (for opacity) */
    --primary-dark: #B91C1C;         /* REPLACE: Dark variant (4.5:1 contrast for AA text) */
    --primary-darker: #991B1B;       /* REPLACE: Darker variant (7:1 contrast for AAA text) */
    --primary-light: #EF4444;        /* REPLACE: Light variant (hover states) */
    --primary-lighter: #FCA5A5;      /* REPLACE: Lighter variant (backgrounds) */

    /* Secondary Brand Color */
    --secondary: #F97316;            /* REPLACE: Secondary color */
    --secondary-rgb: 249, 115, 22;   /* REPLACE: RGB values */
    --secondary-dark: #EA580C;       /* REPLACE: Dark variant (text) */
    --secondary-darker: #C2410C;     /* REPLACE: Darker variant (AAA text) */
    --secondary-light: #FB923C;      /* REPLACE: Light variant */
    --secondary-lighter: #FDBA74;    /* REPLACE: Lighter variant */

    /* Accent Brand Color */
    --accent: #F59E0B;               /* REPLACE: Accent color */
    --accent-rgb: 245, 158, 11;      /* REPLACE: RGB values */
    --accent-dark: #D97706;          /* REPLACE: Dark variant (text) */
    --accent-darker: #B45309;        /* REPLACE: Darker variant (AAA text) */
    --accent-light: #FBBF24;         /* REPLACE: Light variant */
    --accent-lighter: #FCD34D;       /* REPLACE: Lighter variant */


    /* ============================================
       GRAYSCALE PALETTE
       ============================================
       DO NOT MODIFY - Identical across all AAN products
       Ensures consistency in neutral elements
    */
    --gray-50: #F9FAFB;              /* Lightest gray - backgrounds */
    --gray-100: #F3F4F6;             /* Very light gray - subtle backgrounds */
    --gray-200: #E5E7EB;             /* Light gray - borders, dividers */
    --gray-300: #D1D5DB;             /* Medium-light gray - disabled states */
    --gray-400: #9CA3AF;             /* Medium gray - placeholders */
    --gray-500: #6B7280;             /* Mid gray - secondary text (minimum for text) */
    --gray-600: #4B5563;             /* Dark gray - body text */
    --gray-700: #374151;             /* Darker gray - headings */
    --gray-800: #1F2937;             /* Very dark gray - primary text */
    --gray-900: #111827;             /* Darkest gray - emphasis text */
    --gray-950: #030712;             /* Ultra dark - high contrast */


    /* ============================================
       SEMANTIC COLORS
       ============================================
       DO NOT MODIFY - Standard feedback colors
       Used for success, error, warning, info states
    */
    --success: #10B981;              /* Green - success states */
    --success-dark: #059669;         /* Dark green - success text */
    --success-darker: #047857;       /* Darker green - AAA text */
    --success-light: #34D399;        /* Light green - backgrounds */
    --success-bg: #D1FAE5;           /* Success background */

    --error: #EF4444;                /* Red - error states */
    --error-dark: #DC2626;           /* Dark red - error text */
    --error-darker: #B91C1C;         /* Darker red - AAA text */
    --error-light: #F87171;          /* Light red - backgrounds */
    --error-bg: #FEE2E2;             /* Error background */

    --warning: #F59E0B;              /* Orange - warning states */
    --warning-dark: #D97706;         /* Dark orange - warning text */
    --warning-darker: #B45309;       /* Darker orange - AAA text */
    --warning-light: #FBBF24;        /* Light orange - backgrounds */
    --warning-bg: #FEF3C7;           /* Warning background */

    --info: #3B82F6;                 /* Blue - info states */
    --info-dark: #2563EB;            /* Dark blue - info text */
    --info-darker: #1D4ED8;          /* Darker blue - AAA text */
    --info-light: #60A5FA;           /* Light blue - backgrounds */
    --info-bg: #DBEAFE;              /* Info background */


    /* ============================================
       SPACING SCALE
       ============================================
       DO NOT MODIFY - Consistent spacing system
       Use these for margins, padding, gaps
    */
    --space-xs: 0.25rem;             /* 4px - minimal spacing */
    --space-sm: 0.5rem;              /* 8px - tight spacing */
    --space-md: 1rem;                /* 16px - base spacing */
    --space-lg: 1.5rem;              /* 24px - comfortable spacing */
    --space-xl: 2rem;                /* 32px - generous spacing */
    --space-2xl: 3rem;               /* 48px - large spacing */
    --space-3xl: 4rem;               /* 64px - extra large spacing */
    --space-4xl: 6rem;               /* 96px - section spacing */
    --space-5xl: 8rem;               /* 128px - hero spacing */


    /* ============================================
       TYPOGRAPHY SCALE
       ============================================
       DO NOT MODIFY - Consistent type hierarchy
       Base font size: 16px (1rem)
    */
    --text-xs: 0.75rem;              /* 12px - tiny text, labels */
    --text-sm: 0.875rem;             /* 14px - small text, captions */
    --text-base: 1rem;               /* 16px - body text (default) */
    --text-lg: 1.125rem;             /* 18px - emphasized text */
    --text-xl: 1.25rem;              /* 20px - subheadings */
    --text-2xl: 1.5rem;              /* 24px - small headings */
    --text-3xl: 1.875rem;            /* 30px - medium headings */
    --text-4xl: 2.25rem;             /* 36px - large headings */
    --text-5xl: 3rem;                /* 48px - hero headings */
    --text-6xl: 3.75rem;             /* 60px - display headings */
    --text-7xl: 4.5rem;              /* 72px - extra large display */


    /* ============================================
       FONT WEIGHTS
       ============================================
       DO NOT MODIFY - Consistent font weights
    */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;


    /* ============================================
       LINE HEIGHTS
       ============================================
       DO NOT MODIFY - Optimal line spacing
    */
    --leading-tight: 1.25;           /* Tight line height - headings */
    --leading-snug: 1.375;           /* Snug line height - subheadings */
    --leading-normal: 1.5;           /* Normal line height - body text */
    --leading-relaxed: 1.625;        /* Relaxed line height - long-form */
    --leading-loose: 2;              /* Loose line height - special cases */


    /* ============================================
       SHADOWS
       ============================================
       DO NOT MODIFY - Elevation system
    */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);


    /* ============================================
       BORDER RADIUS
       ============================================
       DO NOT MODIFY - Consistent rounded corners
    */
    --radius-none: 0;
    --radius-sm: 0.25rem;            /* 4px - subtle rounding */
    --radius-md: 0.5rem;             /* 8px - base rounding */
    --radius-lg: 0.75rem;            /* 12px - comfortable rounding */
    --radius-xl: 1rem;               /* 16px - generous rounding */
    --radius-2xl: 1.5rem;            /* 24px - large rounding */
    --radius-3xl: 2rem;              /* 32px - extra large rounding */
    --radius-full: 9999px;           /* Fully rounded (pills, circles) */


    /* ============================================
       TRANSITIONS
       ============================================
       DO NOT MODIFY - Consistent animation timing
    */
    --transition-fast: 150ms;        /* Fast interactions (hover) */
    --transition-base: 200ms;        /* Base transitions */
    --transition-slow: 300ms;        /* Slow transitions (modals) */
    --transition-slower: 500ms;      /* Slower transitions (page loads) */

    --easing-linear: linear;
    --easing-ease: ease;
    --easing-ease-in: ease-in;
    --easing-ease-out: ease-out;
    --easing-ease-in-out: ease-in-out;


    /* ============================================
       Z-INDEX SCALE
       ============================================
       DO NOT MODIFY - Layering system
    */
    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;


    /* ============================================
       OPACITY SCALE
       ============================================
       DO NOT MODIFY - Transparency levels
    */
    --opacity-0: 0;
    --opacity-5: 0.05;
    --opacity-10: 0.1;
    --opacity-20: 0.2;
    --opacity-25: 0.25;
    --opacity-30: 0.3;
    --opacity-40: 0.4;
    --opacity-50: 0.5;
    --opacity-60: 0.6;
    --opacity-70: 0.7;
    --opacity-75: 0.75;
    --opacity-80: 0.8;
    --opacity-90: 0.9;
    --opacity-95: 0.95;
    --opacity-100: 1;


    /* ============================================
       LOGO COLORS
       ============================================
       AUTO-GENERATED - Logo gradient based on primary color
    */
    --logo-color-start: var(--primary-dark);
    --logo-color-mid: var(--primary);
    --logo-color-end: var(--primary-light);
}


/* ============================================
   UTILITY CLASSES
   ============================================
   Helper classes using the design tokens
*/

/* Background Colors */
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-accent { background-color: var(--accent); }

/* Text Colors */
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-accent { color: var(--accent); }

/* Border Colors */
.border-primary { border-color: var(--primary); }
.border-secondary { border-color: var(--secondary); }
.border-accent { border-color: var(--accent); }

/* Hover States */
.hover-primary:hover { background-color: var(--primary-dark); }
.hover-secondary:hover { background-color: var(--secondary-dark); }
.hover-accent:hover { background-color: var(--accent-dark); }