/* ============================================
   AVACONNEX BRAND THEME VARIABLES
   Black + neon green, electric blue and cyan; copper tertiary only
   Values: brand.md (AvaconSoftwareCo CorporatePlans/marketing/truth/brand.md).
   Q-422 (EPIC-Q-215 R5, Q7 = A): --color-success is a non-neon green, --color-info
   leaves copper, neon is for the one CTA or highlight per frame.
   ============================================ */

:root {
    /* BRAND COLORS (brand.md) */
    --color-ink: #0B0B0D;
    --color-electric: #2979FF;
    --color-electric-dark: #1C5FD6;
    --color-cyan: #00E5FF;
    --color-paper: #F6F7F9;

    /* DARK SURFACES (the ruled landing concept, corporate-site/concept) */
    --color-panel: #111821;
    --color-line: #1E2935;

    /* ACCENT: neon is the one CTA or highlight per frame, never body text */
    --color-neon-green: #39FF14;
    --color-neon-green-light: #7FFF4D;
    --color-neon-green-dark: #2DD60F;
    --color-neon-green-muted: #66FF33;

    /* TERTIARY: copper, tertiary only (Q7 = A). Kept for the pages that still name it. */
    --color-copper: #B87333;
    --color-copper-light: #D4A574;
    --color-copper-dark: #8B5A2B;
    --color-copper-accent: #E8B88A;

    /* BLACK SCALE */
    --color-black: #1A1A1A;
    --color-black-light: #2D2D2D;
    --color-black-lighter: #404040;
    --color-black-dark: #0F0F0F;

    /* ROLES */
    --color-primary: var(--color-electric);
    --color-accent: var(--color-neon-green);
    --color-tertiary: var(--color-copper);

    /* SEMANTIC COLORS */
    --color-success: #2EA043;
    --color-danger: #FF6B6B;
    --color-warning: #FFB800;
    --color-info: #2979FF;

    /* TYPE (brand.md: Bricolage Grotesque display, IBM Plex Sans body, IBM Plex Mono numbers; system fallback) */
    --font-display: "Bricolage Grotesque", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    
    /* NEUTRAL COLORS */
    --color-white: #FFFFFF;
    --color-gray-50: #F9F9F9;
    --color-gray-100: #F3F3F3;
    --color-gray-200: #E8E8E8;
    --color-gray-300: #D3D3D3;
    --color-gray-400: #A8A8A8;
    --color-gray-500: #808080;
    --color-gray-600: #606060;
    --color-gray-700: #404040;
    --color-gray-800: #2D2D2D;
    --color-gray-900: #1A1A1A;
    
    /* TEXT COLORS */
    --text-primary: #1A1A1A;
    --text-secondary: #606060;
    --text-tertiary: #A8A8A8;
    --text-inverse: #FFFFFF;
    
    /* BACKGROUND COLORS */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F9F9F9;
    --bg-tertiary: #F3F3F3;
    --bg-dark: #1A1A1A;
    
    /* BORDER COLORS */
    --border-color: #E8E8E8;
    --border-color-dark: #D3D3D3;
    --border-color-light: #F3F3F3;
    
    /* SHADOW COLORS */
    --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.05);
    --shadow-md: 0 4px 6px rgba(26, 26, 26, 0.1);
    --shadow-lg: 0 10px 15px rgba(26, 26, 26, 0.15);
    --shadow-xl: 0 20px 25px rgba(26, 26, 26, 0.2);
    
    /* GRADIENTS */
    --gradient-copper: linear-gradient(135deg, #B87333 0%, #D4A574 100%);
    --gradient-copper-dark: linear-gradient(135deg, #8B5A2B 0%, #B87333 100%);
    --gradient-neon: linear-gradient(135deg, #39FF14 0%, #7FFF4D 100%);
    --gradient-dark: linear-gradient(135deg, #1A1A1A 0%, #2D2D2D 100%);
    --gradient-copper-neon: linear-gradient(135deg, #B87333 0%, #39FF14 100%);
    
    /* SPACING */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* BORDER RADIUS */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;
    
    /* TRANSITIONS */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
}

/* ============================================
   DARK MODE THEME
   ============================================ */

@media (prefers-color-scheme: dark) {
    :root {
        /* brand ink and the landing concept's panel, line and text */
        --text-primary: #EAF0F6;
        --text-secondary: #A7B4C2;
        --text-tertiary: #6F7E8F;
        --bg-primary: #0B0B0D;
        --bg-secondary: #111821;
        --bg-tertiary: #1E2935;
        --border-color: #1E2935;
        --border-color-dark: #111821;
        --border-color-light: #2A3A4B;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-copper {
    color: var(--color-copper);
}

.text-copper-light {
    color: var(--color-copper-light);
}

.text-neon-green {
    color: var(--color-neon-green);
}

.text-neon-green-muted {
    color: var(--color-neon-green-muted);
}

.bg-copper {
    background-color: var(--color-copper);
}

.bg-copper-light {
    background-color: var(--color-copper-light);
}

.bg-neon-green {
    background-color: var(--color-neon-green);
}

.bg-black {
    background-color: var(--color-black);
}

.border-copper {
    border-color: var(--color-copper);
}

.border-neon-green {
    border-color: var(--color-neon-green);
}

/* ============================================
   GRADIENT UTILITIES
   ============================================ */

.gradient-copper {
    background: var(--gradient-copper);
}

.gradient-copper-dark {
    background: var(--gradient-copper-dark);
}

.gradient-neon {
    background: var(--gradient-neon);
}

.gradient-copper-neon {
    background: var(--gradient-copper-neon);
}

/* ============================================
   SHADOW UTILITIES
   ============================================ */

.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.shadow-xl {
    box-shadow: var(--shadow-xl);
}

/* ============================================
   GLOW EFFECTS
   ============================================ */

.glow-copper {
    box-shadow: 0 0 20px rgba(184, 115, 51, 0.3);
}

.glow-neon {
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.3);
}

.glow-neon-strong {
    box-shadow: 0 0 30px rgba(57, 255, 20, 0.5);
}

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

.accent-top {
    border-top: 3px solid var(--color-copper);
}

.accent-left {
    border-left: 3px solid var(--color-copper);
}

.accent-bottom {
    border-bottom: 3px solid var(--color-neon-green);
}

.accent-right {
    border-right: 3px solid var(--color-neon-green);
}