/**
 * variables.css
 * GV Iron & Defence — design tokens. Gunmetal, matte black, white/chrome text,
 * industrial orange (CTAs) and electric cyan (AI/tech accents).
 */

/* ========== COLORS ========== */
:root {
    /* Brand — Tier-1 defence contractor aesthetic */
    --color-primary: #3D4A54;        /* Gunmetal grey */
    --color-secondary: #1A1D21;      /* Matte black / near-black */
    --color-accent: #EA580C;         /* Industrial orange (primary CTA) */
    --color-tech: #06B6D4;           /* Electric cyan (AI / tech accents) */

    --color-primary-light: #5A6B78;
    --color-primary-dark: #0D0F12;   /* Navbar scrolled, deep panels */
    --color-accent-hover: #C2410C;
    --color-accent-light: #FB923C;
    --color-tech-light: #22D3EE;
    --color-tech-dark: #0891B2;

    /* Backgrounds */
    --color-bg-light: #E8EAED;
    --color-bg-dark: #0D0F12;
    --color-bg-section: #F0F2F5;
    --color-bg-gunmetal: #2A3138;

    /* Text */
    --color-text-primary: #1A1D21;
    --color-text-secondary: #5C6570;
    --color-text-light: #9CA3AF;

    --color-white: #FFFFFF;
    --color-chrome: #F4F6F8;
    --color-black: #000000;
    --color-border: #D1D5DB;

    --hero-overlay: linear-gradient(to bottom, rgba(13, 15, 18, 0.82) 0%, rgba(26, 29, 33, 0.92) 100%);

    --bg-texture-opacity: 0.06;
    --bg-blueprint-color: 61, 74, 84;

    /* AI / Industry 4.0 section — subtle glows (cyan + optional orange hint) */
    --ai-glow-cyan: rgba(34, 211, 238, 0.14);
    --ai-glow-cyan-strong: rgba(34, 211, 238, 0.35);
    --ai-border-rest: rgba(34, 211, 238, 0.18);
    --ai-border-hover: rgba(34, 211, 238, 0.45);
    --ai-surface: rgba(255, 255, 255, 0.03);
    --ai-surface-hover: rgba(255, 255, 255, 0.06);

    /* Capabilities — dark industrial band */
    --cap-bg: #0a0c0f;
    --cap-bg-elevated: #12161c;
    --cap-border: rgba(255, 255, 255, 0.08);
    --cap-text-muted: rgba(255, 255, 255, 0.72);
    --cap-tag-border: rgba(255, 255, 255, 0.14);
    --cap-media-overlay: linear-gradient(145deg, rgba(13, 15, 18, 0.5) 0%, rgba(6, 182, 212, 0.06) 50%, rgba(13, 15, 18, 0.75) 100%);

    /* Industries Served — premium dark band */
    --ind-bg: #0b0e12;
    --ind-surface: rgba(255, 255, 255, 0.035);
    --ind-border: rgba(255, 255, 255, 0.1);
    --ind-border-hover: rgba(234, 88, 12, 0.42);
    --ind-shadow: 0 4px 28px rgba(0, 0, 0, 0.35);
    --ind-shadow-hover: 0 14px 40px -12px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(234, 88, 12, 0.15);
    --ind-text-muted: rgba(255, 255, 255, 0.7);
    --ind-icon: rgba(255, 255, 255, 0.5);
    --ind-icon-hover: rgba(255, 255, 255, 0.88);

    /* Homepage bands — same base + grid as Industries We Serve */
    --section-industrial-bg: var(--ind-bg);
    --section-industrial-grid:
        linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
    --section-industrial-grid-size: 32px 32px;

    /* About — premium corporate band */
    --about-bg: #0e1116;
    --about-border: rgba(255, 255, 255, 0.09);
    --about-text-muted: rgba(255, 255, 255, 0.74);
    --about-highlight-bg: rgba(255, 255, 255, 0.04);
    --about-highlight-border: rgba(255, 255, 255, 0.14);
    --about-media-overlay: linear-gradient(160deg, rgba(13, 15, 18, 0.25) 0%, rgba(13, 15, 18, 0.65) 100%);
    --about-media-shadow: 0 20px 48px -16px rgba(0, 0, 0, 0.55);

    /* Contact CTA — conversion strip */
    --contact-cta-gradient: linear-gradient(168deg, #0a0e14 0%, #0c1a28 38%, #081018 100%);
    --contact-cta-grid-fade: rgba(34, 211, 238, 0.045);
    --contact-cta-top-line: rgba(34, 211, 238, 0.28);
    --contact-cta-primary-glow: 0 0 0 1px rgba(34, 211, 238, 0.35), 0 4px 28px rgba(34, 211, 238, 0.28), 0 0 48px rgba(34, 211, 238, 0.12);
    --contact-cta-primary-glow-hover: 0 0 0 1px rgba(34, 211, 238, 0.55), 0 8px 36px rgba(34, 211, 238, 0.38), 0 0 64px rgba(34, 211, 238, 0.2);
}

/* ========== BUTTON COLORS ========== */
:root {
    --color-btn-primary: var(--color-accent);
    --color-btn-primary-hover: var(--color-accent-hover);
    --color-btn-primary-text: var(--color-white);

    --color-btn-secondary: var(--color-secondary);
    --color-btn-secondary-hover: #2D3238;
    --color-btn-secondary-text: var(--color-white);

    --color-btn-outline-border: var(--color-white);
    --color-btn-outline-text: var(--color-white);
    --color-btn-outline-hover-bg: var(--color-white);
    --color-btn-outline-hover-text: var(--color-primary-dark);
}

/* ========== BORDER RADIUS ========== */
:root {
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
}

/* ========== SHADOWS ========== */
:root {
    --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 12px 28px -8px rgba(0, 0, 0, 0.18);
    --shadow-navbar: 0 2px 16px rgba(0, 0, 0, 0.35);
    /* Navbar: slightly deeper shadow when scrolled (background stays gunmetal) */
    --shadow-navbar-scrolled: 0 6px 28px rgba(0, 0, 0, 0.45);
    --navbar-bg: var(--color-primary-dark);
    --navbar-border: rgba(255, 255, 255, 0.07);
    --navbar-link: rgba(255, 255, 255, 0.88);
}

/* ========== SPACING SCALE ========== */
:root {
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-section: 4rem;
}

/* ========== TYPOGRAPHY ========== */
:root {
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --font-size-base: 1rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --line-height-base: 1.6;
    --line-height-tight: 1.25;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

/* ========== LAYOUT TOKENS ========== */
:root {
    --container-max: 1200px;
    --container-padding: var(--spacing-lg);
    --section-padding-y: var(--spacing-section);
}

/* ========== TRANSITIONS ========== */
:root {
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;
}

/* ========== BREAKPOINTS ========== */
:root {
    --bp-mobile: 0;
    --bp-tablet: 768px;
    --bp-desktop: 1024px;
    --bp-desktop-lg: 1280px;
}