/* =============================================
   Surakschit Nirman — Design System
   Core tokens, reset, typography, utilities
   ============================================= */

/* ─── Google Fonts Import ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─── CSS Custom Properties (Design Tokens) ──────────────── */
:root {
    /* Primary — Deep Midnight Blue & Rich Navy */
    --navy-950: #030D18;
    --navy-900: #071A2E; /* Deep Midnight Blue Primary */
    --navy-800: #0D2745; /* Rich Navy Surface */
    --navy-700: #14355B;
    --navy-600: #1C4473;
    --navy-500: #25548C;
    --navy-400: #3367A6;
    --navy-300: #487EC2;

    /* Steel Gray & Pure White Elements */
    --steel-900: #071A2E;
    --steel-800: #0D2745;
    --steel-700: #394656;
    --steel-600: #5E6B7A; /* Structural Steel Gray */
    --steel-500: #7E8C9D;
    --steel-400: #A1AEBE;
    --steel-300: #C6D1DF; /* Cool Silver Body */
    --steel-200: #E2E8F0;
    --steel-100: #F8FAFC; /* Pure White Heading Tint */

    /* Burnt Safety Orange Accent (Mapped to --gold variables for complete site compatibility) */
    --gold-700: #A34106;
    --gold-600: #C7530D;
    --gold-500: #E86A17; /* Signature Burnt Industrial Orange */
    --gold-400: #F28238;
    --gold-300: #FA9E5C;
    --gold-200: #FCBE8F;
    --gold-100: #FDDFC7;

    /* Semantic Colors */
    --success: #10B981;
    --success-light: #D1FAE5;
    --warning: #F28238;
    --warning-light: #FDDFC7;
    --danger: #EF4444;
    --danger-light: #FEE2E2;
    --info: #2563EB;
    --info-light: #DBEAFE;

    /* Surfaces */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8FAFC;
    --bg-dark: #071A2E;
    --bg-darker: #030D18;
    --bg-card: #FFFFFF;
    --bg-card-dark: rgba(13, 39, 69, 0.65);

    /* Glass & Borders */
    --glass-bg: rgba(13, 39, 69, 0.75);
    --glass-border: rgba(232, 106, 23, 0.2);
    --glass-bg-light: rgba(255, 255, 255, 0.95);
    --glass-border-light: rgba(226, 232, 240, 0.8);

    /* Text */
    --text-primary: #071A2E;
    --text-secondary: #5E6B7A;
    --text-muted: #7E8C9D;
    --text-inverse: #F8FAFC;
    --text-accent: #E86A17;
    --text-link: #E86A17;

    /* Typography */
    --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', monospace;

    /* Font Sizes (fluid) */
    --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
    --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
    --text-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
    --text-lg: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    --text-xl: clamp(1.15rem, 1rem + 0.5vw, 1.25rem);
    --text-2xl: clamp(1.35rem, 1.1rem + 0.8vw, 1.5rem);
    --text-3xl: clamp(1.6rem, 1.2rem + 1.2vw, 1.875rem);
    --text-4xl: clamp(1.9rem, 1.3rem + 1.8vw, 2.25rem);
    --text-5xl: clamp(2.2rem, 1.4rem + 2.5vw, 3rem);
    --text-6xl: clamp(2.5rem, 1.5rem + 3.5vw, 3.75rem);
    --text-7xl: clamp(3rem, 1.5rem + 4.5vw, 4.5rem);
    --text-display: clamp(3.5rem, 2rem + 5vw, 6rem);

    /* Font Weights */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-black: 900;

    /* Line Heights */
    --lh-tight: 1.15;
    --lh-snug: 1.3;
    --lh-normal: 1.6;
    --lh-relaxed: 1.75;

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

    /* Spacing Scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Section Spacing */
    --section-py: clamp(4rem, 3rem + 5vw, 8rem);
    --section-py-sm: clamp(3rem, 2rem + 3vw, 5rem);

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-3xl: 32px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);
    --shadow-gold: 0 8px 30px rgba(232, 106, 23, 0.35);
    --shadow-navy: 0 10px 30px rgba(7, 26, 46, 0.6);
    --shadow-glow: 0 0 20px rgba(232, 106, 23, 0.35);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Z-index Scale */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-loader: 600;
    --z-cursor: 9999;

    /* Container */
    --container-max: 1320px;
    --container-lg: 1140px;
    --container-md: 960px;
    --container-sm: 720px;
    --container-px: clamp(1rem, 0.5rem + 2vw, 2rem);

    /* Header */
    --header-height: 80px;
    --header-height-scrolled: 64px;
}

/* ─── CSS Reset ──────────────────────────────────────────── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-size: 16px;
    scroll-padding-top: var(--header-height);
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    min-height: 100vh;
}

body.loading {
    overflow: hidden;
}

/* ─── Typography ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--text-primary);
}

h1 { font-size: var(--text-6xl); font-weight: var(--fw-extrabold); }
h2 { font-size: var(--text-5xl); }
h3 { font-size: var(--text-4xl); }
h4 { font-size: var(--text-3xl); }
h5 { font-size: var(--text-2xl); }
h6 { font-size: var(--text-xl); }

p {
    margin-bottom: var(--space-4);
    line-height: var(--lh-normal);
}

a {
    color: var(--text-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--gold-500);
}

strong, b { font-weight: var(--fw-semibold); }

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    list-style: none;
}

/* ─── Selection Color ────────────────────────────────────── */
::selection {
    background: var(--gold-500);
    color: var(--navy-900);
}

::-moz-selection {
    background: var(--gold-500);
    color: var(--navy-900);
}

/* ─── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--navy-950);
}

::-webkit-scrollbar-thumb {
    background: var(--gold-600);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gold-500);
}

/* ─── Utility Classes ────────────────────────────────────── */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-uppercase { text-transform: uppercase; }
.text-accent { color: var(--gold-500); }
.text-muted { color: var(--text-secondary); }
.text-white { color: var(--text-inverse); }
.text-gradient {
    background: linear-gradient(135deg, #FA9E5C 0%, #E86A17 50%, #C7530D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.fw-light { font-weight: var(--fw-light); }
.fw-medium { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold { font-weight: var(--fw-bold); }

.section-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-widest);
    color: var(--gold-500);
    margin-bottom: var(--space-4);
}

.section-label::before {
    content: '';
    display: inline-block;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold-500), transparent);
}

.section-title {
    font-size: var(--text-5xl);
    font-weight: var(--fw-extrabold);
    margin-bottom: var(--space-4);
    line-height: var(--lh-tight);
}

.section-subtitle {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    max-width: 680px;
    line-height: var(--lh-relaxed);
}

.section-header {
    margin-bottom: var(--space-16);
}

.section-header.centered {
    text-align: center;
}

.section-header.centered .section-subtitle {
    margin-left: auto;
    margin-right: auto;
}

/* Dark section variants */
.dark-section .section-title,
.section-dark .section-title,
.section-darker .section-title,
.section-gradient .section-title,
.dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4, .dark-section h5, .dark-section h6,
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4, .section-dark h5, .section-dark h6,
.section-darker h1, .section-darker h2, .section-darker h3, .section-darker h4, .section-darker h5, .section-darker h6,
.section-gradient h1, .section-gradient h2, .section-gradient h3, .section-gradient h4, .section-gradient h5, .section-gradient h6 {
    color: var(--text-inverse);
}

.dark-section .section-subtitle,
.section-dark .section-subtitle,
.section-darker .section-subtitle,
.section-gradient .section-subtitle,
.dark-section p,
.section-dark p,
.section-darker p,
.section-gradient p {
    color: var(--steel-300);
}

/* Dividers */
.gold-line {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
    border-radius: var(--radius-full);
    margin: var(--space-4) 0;
}

.gold-line.centered {
    margin-left: auto;
    margin-right: auto;
}

/* Visibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hidden { display: none !important; }

@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
    .hide-desktop { display: none !important; }
}