/* ==========================================================================
   Design System — Feroz Movers
   ========================================================================== */

:root {
    /* Colors */
    --bg-primary: #FAFAF7;
    --bg-secondary: #F2F0EB;
    --bg-dark: #1B2B4B;
    --bg-darker: #0F1E35;
    --text-primary: #1A1A1A;
    --text-secondary: #4A4A4A;
    --text-light: #6B6B6B;
    --text-on-dark: #FFFFFF;
    --accent-primary: #1B2B4B;
    --accent-primary-dark: #0F1E35;
    --accent-primary-light: #243D63;
    --accent-secondary: #F97316;
    --accent-secondary-light: #FB923C;
    --accent-secondary-dark: #EA6C00;
    --white: #FFFFFF;
    --border: #E0DDD6;
    --border-light: #EDEBE5;
    --success: #2D7A4F;
    --success-bg: #E8F5EE;
    --error: #C43E3E;
    --error-bg: #FDE8E8;

    /* Typography */
    --font-heading: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --text-base: 1.0625rem; /* 17px */
    --text-sm: 0.875rem;
    --text-xs: 0.8125rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;

    --line-height: 1.65;
    --line-height-tight: 1.25;
    --line-height-heading: 1.15;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --h1-size: clamp(2rem, 4vw, 3.25rem);
    --h2-size: clamp(1.5rem, 3vw, 2.25rem);
    --h3-size: clamp(1.25rem, 2.5vw, 1.75rem);
    --h4-size: clamp(1.125rem, 2vw, 1.375rem);

    /* Spacing */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    --section-padding: clamp(3rem, 6vw, 6rem);
    --container-max: 1140px;
    --container-wide: 1320px;
    --container-narrow: 800px;
    --side-padding: clamp(1.25rem, 4vw, 2.5rem);

    /* Borders & Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 16px 50px rgba(0, 0, 0, 0.12);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* Z-index */
    --z-header: 1000;
    --z-mobile-cta: 999;
    --z-overlay: 1100;
    --z-modal: 1200;

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

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

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--line-height);
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

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

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

a:hover {
    color: var(--accent-primary-dark);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    color: var(--text-primary);
}

h1 { font-size: var(--h1-size); letter-spacing: -0.02em; }
h2 { font-size: var(--h2-size); letter-spacing: -0.015em; }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }

p {
    margin-bottom: var(--space-md);
}

p:last-child {
    margin-bottom: 0;
}

ul, ol {
    padding-left: var(--space-lg);
}

::selection {
    background-color: var(--accent-primary);
    color: var(--white);
}

/* Focus styles */
:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Skip to content link */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--side-padding);
    background: var(--accent-primary);
    color: var(--white);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    z-index: calc(var(--z-header) + 1);
    font-weight: var(--font-weight-semibold);
}

.skip-link:focus {
    top: var(--space-sm);
    color: var(--white);
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    html {
        scroll-behavior: auto;
    }

    .animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Windows High Contrast Mode */
@media (forced-colors: active) {
    .btn,
    .btn--primary,
    .btn--secondary,
    .btn--outline {
        border: 2px solid ButtonText;
    }

    .footer-trust__badge svg,
    .service-card svg,
    .faq-icon {
        forced-color-adjust: auto;
    }

    .reading-progress {
        background: Highlight;
    }

    :focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 2px;
    }

    .site-header {
        border-bottom: 1px solid ButtonText;
    }

    .announcement-bar {
        border: 1px solid ButtonText;
    }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #1A1A1A;
        --bg-secondary: #242424;
        --bg-dark: #0A3540;
        --bg-darker: #061E27;
        --text-primary: #F0F0ED;
        --text-secondary: #B0B0A8;
        --text-light: #8A8A82;
        --text-on-dark: #FFFFFF;
        --accent-primary: #1A8CA4;
        --accent-primary-dark: #14697E;
        --accent-primary-light: #22B0D0;
        --white: #1A1A1A;
        --border: #333330;
        --border-light: #2A2A27;
        --success: #3EA86A;
        --success-bg: #1C3026;
        --error: #E05555;
        --error-bg: #3A1C1C;
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
        --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.3);
        --shadow-xl: 0 16px 50px rgba(0, 0, 0, 0.35);
    }

    ::selection {
        background-color: var(--accent-primary);
        color: #fff;
    }

    img {
        opacity: 0.92;
    }

    .section--bg-white {
        background-color: var(--bg-primary);
    }

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

/* Manual dark mode toggle — mirrors prefers-color-scheme: dark */
[data-theme="dark"] {
    --bg-primary: #1A1A1A;
    --bg-secondary: #242424;
    --bg-dark: #0A3540;
    --bg-darker: #061E27;
    --text-primary: #F0F0ED;
    --text-secondary: #B0B0A8;
    --text-light: #8A8A82;
    --text-on-dark: #FFFFFF;
    --accent-primary: #1A8CA4;
    --accent-primary-dark: #14697E;
    --accent-primary-light: #22B0D0;
    --white: #1A1A1A;
    --border: #333330;
    --border-light: #2A2A27;
    --success: #3EA86A;
    --success-bg: #1C3026;
    --error: #E05555;
    --error-bg: #3A1C1C;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 16px 50px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] ::selection { background-color: #1A8CA4; color: #fff; }
[data-theme="dark"] img { opacity: 0.92; }
[data-theme="dark"] .section--bg-white { background-color: #1A1A1A; }
[data-theme="dark"] .section--bg-light { background-color: #242424; }

/* Override dark mode when user explicitly selects light */
[data-theme="light"] {
    --bg-primary: #FAFAF7;
    --bg-secondary: #F0F0EB;
    --text-primary: #1A1A1A;
    --text-secondary: #5A5A52;
    --white: #FFFFFF;
}

/* Dark mode toggle button */
.dark-mode-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 6px;
    border-radius: var(--radius-sm, 4px);
    transition: color var(--transition-base);
    display: flex;
    align-items: center;
}

.dark-mode-toggle:hover {
    color: var(--accent-primary);
}

.dark-mode-toggle__moon { display: none; }

[data-theme="dark"] .dark-mode-toggle__sun { display: none; }
[data-theme="dark"] .dark-mode-toggle__moon { display: block; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .dark-mode-toggle__sun { display: none; }
    :root:not([data-theme="light"]) .dark-mode-toggle__moon { display: block; }
}

/* Safe area insets for notched devices */
@supports (padding: env(safe-area-inset-bottom)) {
    .site-footer {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mobile-sticky-cta {
        padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom));
    }

    .whatsapp-float {
        bottom: calc(90px + env(safe-area-inset-bottom));
    }
}

/* High contrast mode */
@media (forced-colors: active) {
    .btn {
        border: 2px solid ButtonText;
    }

    .service-card,
    .testimonial-card,
    .feature-card {
        border: 1px solid ButtonText;
    }
}