/* ==========================================================================
   AAPKESITARE - DESIGN SYSTEM & COLOR PALETTE
   Navy + Purple + Gold Hybrid — Dark Cosmic Theme
   ========================================================================== */

/* PRIMARY BRAND COLORS */
:root {
    /* ── Core Navy Backgrounds ── */
    --navy:            #080718;             /* Page background */
    --navy-2:          #0E0B2A;             /* Nav, trust bar, footer */

    /* ── Purple Surface & Accent ── */
    --purple-card:     #1A1245;             /* Cards, section surfaces */
    --purple-accent:   #7C5CE4;             /* Secondary buttons, borders */
    --purple-light:    #A78BFA;             /* Eyebrow labels, spec text, links */

    /* ── Gold Primary ── */
    --gold:            #F2C94C;             /* Primary CTAs, numbers, highlights */
    --gold-dark:       #D4A935;             /* Hover state for gold */
    --gold-light:      #FFE08A;             /* Subtle gold accents */

    /* ── Text Colors ── */
    --white-1:         #FFFFFF;             /* Headings, primary text */
    --white-2:         rgba(255,255,255,.70); /* Secondary text */
    --white-3:         rgba(255,255,255,.45); /* Body text, descriptions */

    /* ── Legacy Aliases (for backward compatibility) ── */
    --primary-gradient-start: #1A1245;
    --primary-gradient-end:   #7C5CE4;
    --primary-dark:           #0E0B2A;
    --primary-light:          #A78BFA;

    --secondary-gold:       #F2C94C;
    --secondary-gold-dark:  #D4A935;
    --secondary-gold-light: #FFE08A;

    --accent-blue:       #7C5CE4;
    --accent-blue-dark:  #5A3CB8;
    --accent-blue-light: #A78BFA;

    /* Success/Action Colors */
    --success-green:      #10B981;
    --success-green-dark: #059669;
    --warning-orange:     #F2C94C;
    --error-red:          #EF4444;

    /* ── Neutral Colors – Dark-mode adapted ── */
    --neutral-900: #FFFFFF;                 /* Brightest text (was darkest) */
    --neutral-800: rgba(255,255,255,.90);
    --neutral-700: rgba(255,255,255,.70);
    --neutral-600: rgba(255,255,255,.45);
    --neutral-500: rgba(255,255,255,.35);
    --neutral-400: rgba(255,255,255,.20);
    --neutral-300: rgba(255,255,255,.12);
    --neutral-200: #1A1245;                 /* Card surfaces */
    --neutral-100: #0E0B2A;                 /* Section backgrounds */
    --neutral-white: #FFFFFF;

    /* ── Background Gradients ── */
    --bg-gradient-purple: linear-gradient(135deg, #1A1245 0%, #7C5CE4 100%);
    --bg-gradient-gold:   linear-gradient(135deg, #D4A935 0%, #F2C94C 100%);
    --bg-gradient-cosmic: linear-gradient(135deg, #0E0B2A 0%, #1A1245 50%, #7C5CE4 100%);
    --bg-gradient-soft:   linear-gradient(135deg, #080718 0%, #0E0B2A 100%);
    --bg-gradient-hero:   linear-gradient(160deg, #080718 0%, #1A1245 40%, #7C5CE4 100%);

    /* ── Shadow Styles – Purple-tinted ── */
    --shadow-sm:  0 1px 2px 0 rgba(124, 92, 228, 0.08);
    --shadow-md:  0 4px 6px -1px rgba(124, 92, 228, 0.12);
    --shadow-lg:  0 10px 15px -3px rgba(124, 92, 228, 0.15);
    --shadow-xl:  0 20px 25px -5px rgba(124, 92, 228, 0.18);
    --shadow-2xl: 0 25px 50px -12px rgba(124, 92, 228, 0.25);
    --shadow-gold: 0 4px 14px rgba(242, 201, 76, 0.25);

    /* ── Border Radius ── */
    --radius-sm:   0.375rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-xl:   1rem;
    --radius-2xl:  1.5rem;
    --radius-full: 9999px;

    /* ── Spacing Scale ── */
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* ── Typography ── */
    --font-family-base:    'Inter', 'Segoe UI', 'Roboto', sans-serif;
    --font-family-heading: 'Outfit', 'Poppins', sans-serif;

    /* Font Sizes */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;

    /* ── Transitions ── */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;
}

/* ==========================================================================
   GLOBAL DARK-THEME BASE
   ========================================================================== */

body {
    background-color: var(--navy) !important;
    color: var(--white-3);
}

/* ==========================================================================
   USAGE GUIDELINES
   ========================================================================== */

/*
BRAND COLORS USAGE:
- Navy (#080718):     Page background
- Navy-2 (#0E0B2A):  Nav, trust bar, footer, section alt-bg
- Purple-card (#1A1245): All card/panel surfaces
- Purple-accent (#7C5CE4): Secondary buttons, borders, interactive
- Purple-light (#A78BFA): Eyebrow labels, links, spec text
- Gold (#F2C94C):    ALL primary CTAs, prices, numbers, highlights
- White-1 (#FFF):    Headings, primary text
- White-3 (45%):     Body text, descriptions

GRADIENT USAGE:
- Purple Gradient: Hero sections, featured content cards
- Gold Gradient:   Primary CTA buttons, premium features
- Cosmic Gradient: Full-width hero areas
- Soft Gradient:   Subtle section separators

SHADOW USAGE:
- sm:   Subtle elevation (buttons, inputs)
- md:   Cards, dropdowns
- lg:   Modals, popovers
- xl:   Floating elements, hero sections
- gold: Gold CTA hover glow
*/