/* ============================================
   GROWVERN DESIGN TOKENS
   Unified CSS Variables for entire frontend
   ============================================ */

:root {
    /* ==========================================
       PRIMARY BRAND COLORS
       ========================================== */
    --gv-primary: #f8d102;           /* Gold - Main brand color */
    --gv-primary-dark: #e6c200;      /* Gold dark - Hover states */
    --gv-primary-light: #ffe033;     /* Gold light - Accents */

    --gv-secondary: #0a1430;         /* Navy - Background, text */
    --gv-secondary-dark: #060d1f;    /* Navy darker */
    --gv-secondary-light: #0a1f57;   /* Navy lighter */

    /* ==========================================
       ACCENT COLORS
       ========================================== */
    --gv-accent-blue: #0077ff;       /* Links, highlights */
    --gv-accent-green: #22c55e;      /* Success states */
    --gv-accent-red: #ef4444;        /* Error states */
    --gv-accent-orange: #f97316;     /* Warning states */

    /* ==========================================
       BACKGROUND COLORS
       ========================================== */
    --gv-bg-primary: #0a1a2f;        /* Main page background */
    --gv-bg-secondary: #0a1430;      /* Cards, sections */
    --gv-bg-tertiary: #0d1b3a;       /* Elevated elements */
    --gv-bg-light: #ffffff;          /* Light backgrounds */
    --gv-bg-overlay: rgba(10, 20, 48, 0.95);

    /* ==========================================
       TEXT COLORS
       ========================================== */
    --gv-text-primary: #ffffff;      /* Headings on dark */
    --gv-text-secondary: #e6e6e6;    /* Body text on dark */
    --gv-text-muted: rgba(255, 255, 255, 0.6);
    --gv-text-dark: #161D40;         /* Text on light backgrounds */
    --gv-text-dark-secondary: #4a5568;

    /* ==========================================
       BORDER COLORS
       ========================================== */
    --gv-border-light: rgba(255, 255, 255, 0.1);
    --gv-border-medium: rgba(255, 255, 255, 0.2);
    --gv-border-primary: rgba(248, 209, 2, 0.3);
    --gv-border-primary-strong: rgba(248, 209, 2, 0.5);

    /* ==========================================
       SHADOWS
       ========================================== */
    --gv-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --gv-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
    --gv-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.25);
    --gv-shadow-primary: 0 8px 25px rgba(248, 209, 2, 0.25);
    --gv-shadow-primary-lg: 0 12px 35px rgba(248, 209, 2, 0.35);

    /* ==========================================
       TYPOGRAPHY
       ========================================== */
    --gv-font-heading: 'Oswald', sans-serif;
    --gv-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --gv-font-accent: 'Rowdies', cursive;

    /* Font Sizes (using clamp for fluid typography) */
    --gv-text-xs: 0.75rem;           /* 12px */
    --gv-text-sm: 0.875rem;          /* 14px */
    --gv-text-base: 1rem;            /* 16px */
    --gv-text-lg: 1.125rem;          /* 18px */
    --gv-text-xl: 1.25rem;           /* 20px */
    --gv-text-2xl: 1.5rem;           /* 24px */
    --gv-text-3xl: 1.875rem;         /* 30px */
    --gv-text-4xl: 2.25rem;          /* 36px */
    --gv-text-5xl: 3rem;             /* 48px */
    --gv-text-6xl: 3.75rem;          /* 60px */

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

    /* Line Heights */
    --gv-leading-tight: 1.25;
    --gv-leading-normal: 1.5;
    --gv-leading-relaxed: 1.75;

    /* Letter Spacing */
    --gv-tracking-tight: -0.025em;
    --gv-tracking-normal: 0;
    --gv-tracking-wide: 0.05em;
    --gv-tracking-wider: 0.1em;

    /* ==========================================
       SPACING
       ========================================== */
    --gv-space-1: 0.25rem;           /* 4px */
    --gv-space-2: 0.5rem;            /* 8px */
    --gv-space-3: 0.75rem;           /* 12px */
    --gv-space-4: 1rem;              /* 16px */
    --gv-space-5: 1.25rem;           /* 20px */
    --gv-space-6: 1.5rem;            /* 24px */
    --gv-space-8: 2rem;              /* 32px */
    --gv-space-10: 2.5rem;           /* 40px */
    --gv-space-12: 3rem;             /* 48px */
    --gv-space-16: 4rem;             /* 64px */
    --gv-space-20: 5rem;             /* 80px */
    --gv-space-24: 6rem;             /* 96px */

    /* ==========================================
       LAYOUT
       ========================================== */
    --gv-container-sm: 640px;
    --gv-container-md: 768px;
    --gv-container-lg: 1024px;
    --gv-container-xl: 1200px;
    --gv-container-2xl: 1400px;

    --gv-header-height: 124px;        /* Announcement bar (44px) + header (80px) */
    --gv-header-height-tablet: 110px;  /* Announcement bar (40px) + header (70px) */
    --gv-header-height-mobile: 96px;   /* Announcement bar (36px) + header (60px) */
    --gv-header-height-small: 88px;    /* Announcement bar (32px) + header (56px) */

    /* ==========================================
       BREAKPOINTS (for reference in media queries)
       Use these values in @media queries:
       - Mobile: max-width: 480px
       - Tablet: max-width: 768px
       - Tablet landscape: max-width: 992px
       - Desktop: max-width: 1200px
       ========================================== */
    --gv-breakpoint-sm: 480px;
    --gv-breakpoint-md: 768px;
    --gv-breakpoint-lg: 992px;
    --gv-breakpoint-xl: 1200px;

    /* ==========================================
       BORDER RADIUS
       ========================================== */
    --gv-radius-sm: 4px;
    --gv-radius-md: 8px;
    --gv-radius-lg: 12px;
    --gv-radius-xl: 16px;
    --gv-radius-2xl: 24px;
    --gv-radius-full: 9999px;

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

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

/* ============================================
   BACKWARD COMPATIBILITY
   Maps old variable names to new tokens
   ============================================ */
:root {
    /* Legacy color mappings */
    --primary: var(--gv-primary);
    --secondary: var(--gv-secondary);
    --dark: var(--gv-bg-primary);
    --light: var(--gv-text-secondary);
    --color-bg: var(--gv-bg-primary);
    --color-bg-dark: var(--gv-bg-secondary);
    --color-bg-darker: var(--gv-secondary-dark);
    --color-text-dark: var(--gv-text-dark);
    --color-text-light: var(--gv-text-secondary);
    --color-text-muted: var(--gv-text-muted);
    --color-paragraph: var(--gv-text-secondary);
    --color-strong: var(--gv-primary);
    --color-accent: var(--gv-accent-blue);

    /* Legacy style.css mappings */
    --primary-blue: var(--gv-secondary-light);
    --light-blue: var(--gv-accent-blue);
}