/* ============================================================================
   Hard Rock Digital Design System - Foundation
   ============================================================================

   Core variables and base styles for all HRD reporting applications.
   This file establishes the visual foundation that all components build upon.

   Last updated: 2025-12-24
   ============================================================================ */

:root {
    /* ========================================================================
       Brand Colors
       ======================================================================== */

    /* Primary - Hard Rock Purple */
    --hrd-purple: #8b2fc9;
    --hrd-purple-light: #a855f7;
    --hrd-purple-dark: #6b21a8;
    --hrd-purple-hover: #7c3aed;

    /* Accent - Gold (for revenue, key metrics) */
    --hrd-gold: #f59e0b;
    --hrd-gold-light: #fbbf24;
    --hrd-gold-dark: #d97706;

    /* ========================================================================
       Neutrals
       ======================================================================== */

    --bg-primary: #f8f9fa;           /* Main page background */
    --bg-card: #ffffff;              /* Card backgrounds */
    --bg-hover: #f3f4f6;             /* Hover states */
    --bg-selected: #ede9fe;          /* Selected/active with purple tint */

    --text-primary: #1f2937;         /* Main text */
    --text-secondary: #4b5563;       /* Secondary text, labels */
    --text-muted: #9ca3af;           /* Disabled, placeholder text */

    --border-color: #e5e7eb;         /* Standard borders */
    --border-light: #f3f4f6;         /* Subtle dividers */

    /* ========================================================================
       Status & Semantic Colors
       ======================================================================== */

    --success: #10b981;              /* Positive metrics, growth */
    --success-light: #d1fae5;
    --warning: #f59e0b;              /* Caution, attention needed */
    --warning-light: #fef3c7;
    --danger: #ef4444;               /* Errors, negative metrics */
    --danger-light: #fee2e2;
    --info: #3b82f6;                 /* Informational */
    --info-light: #dbeafe;

    /* ========================================================================
       Spacing Scale
       ======================================================================== */

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

    /* ========================================================================
       Elevation (Shadows)
       ======================================================================== */

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* ========================================================================
       Border Radius
       ======================================================================== */

    --radius-sm: 0.25rem;     /* 4px - buttons, badges */
    --radius-md: 0.5rem;      /* 8px - cards, inputs */
    --radius-lg: 0.75rem;     /* 12px - large cards */
    --radius-xl: 1rem;        /* 16px - hero sections */

    /* ========================================================================
       Typography
       ======================================================================== */

    /* ========================================================================
   Typography
   ======================================================================== */

    --font-size-xs: 0.9375rem;    /* 15px */
    --font-size-sm: 1.0625rem;    /* 17px */
    --font-size-base: 1.25rem;    /* 20px */
    --font-size-lg: 1.375rem;     /* 22px */
    --font-size-xl: 1.625rem;     /* 26px */
    --font-size-2xl: 2rem;        /* 32px */
    --font-size-3xl: 2.5rem;      /* 40px */
    --font-size-4xl: 3rem;        /* 48px */

    /* ========================================================================
       Transitions
       ======================================================================== */

    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
}

/* ============================================================================
   Base Styles
   ============================================================================ */

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
   Typography Base
   ============================================================================ */

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--text-primary);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-base); }
h6 { font-size: var(--font-size-sm); }

p {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}

/* ============================================================================
   Utility Classes
   ============================================================================ */

/* Text Colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-purple { color: var(--hrd-purple); }
.text-gold { color: var(--hrd-gold); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }

/* Background Colors */
.bg-primary { background-color: var(--bg-primary); }
.bg-card { background-color: var(--bg-card); }
.bg-purple-light { background-color: var(--bg-selected); }

/* Spacing Utilities */
.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

/* Font Weights */
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* Text Transform */
.uppercase { text-transform: uppercase; }
.letter-spacing { letter-spacing: 0.05em; }