/* ═══════════════════════════════════════════════════════
   ACTIVEGENCE — Design System Tokens
   Enterprise-Grade UI — TCS / Microsoft / HCLTech
   ═══════════════════════════════════════════════════════ */

:root {
    /* ── Brand Colors ── */
    --color-primary: #002060;          /* TCS Navy */
    --color-secondary: #0078D4;        /* Microsoft Blue */
    --color-accent: #00B0F0;           /* HCLTech Cyan */

    /* ── Neutrals ── */
    --color-surface: #F3F2F1;          /* Card backgrounds */
    --color-border: #E1DFDD;           /* Borders, dividers */
    --color-white: #FFFFFF;
    --color-black: #000000;

    /* ── Text ── */
    --color-text-primary: #242424;
    --color-text-secondary: #64748B;   /* Slate Gray */
    --color-text-tertiary: #A19F9D;
    --color-text-inverse: #FFFFFF;

    /* ── Typography ── */
    --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                   'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* ── Type Scale (Locked Pixel Values) ── */
    --text-h1: 48px;
    --text-h2: 32px;
    --text-h3: 20px;
    --text-h4: 18px;
    --text-body: 16px;
    --text-meta: 14px;
    --text-label: 12px;

    /* ── Line Heights ── */
    --leading-tight: 1.2;
    --leading-normal: 1.6;
    --leading-relaxed: 1.7;

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

    /* ── Spacing ── */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;

    /* ── Layout ── */
    --container-max: 1280px;
    --container-padding: 24px;
    --header-height: 72px;

    /* ── Borders ── */
    --border-radius: 4px;
    --border-radius-sm: 2px;
    --border-radius-lg: 6px;
    --border-width: 1px;

    /* ── Transitions ── */
    --transition-fast: all 0.2s ease-in-out;
    --transition-base: all 0.3s ease-in-out;

    /* ── Shadows ── */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ── Tablet (< 1024px) ── */
@media (max-width: 1024px) {
    :root {
        --container-padding: 16px;
    }
}

/* ── Mobile (< 640px) ── */
@media (max-width: 640px) {
    :root {
        --container-padding: 12px;
        --text-h1: 36px;
        --text-h2: 24px;
    }
}

/* ── Dark Mode Variables ── */
.dark {
    /* ── Premium Dark Palette ── */
    --color-surface: #1E1E1E;
    --color-border: #2D2D2D;
    --color-white: #0A0A0A;
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #E5E7EB;
    --color-text-tertiary: #9CA3AF;
    --color-primary: #FFFFFF;
    --color-secondary: #60A5FA;
    --color-accent: #22D3EE;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.7);
}

/* ── Dark Mode Element Overrides ── */
.dark .btn-secondary {
    background-color: transparent;
    color: #60A5FA;
    border-color: #60A5FA;
}

.dark .btn-secondary:hover {
    background-color: #60A5FA;
    color: #0A0A0A;
}

.dark .header {
    background-color: #0A0A0A;
    border-color: #2D2D2D;
}

.dark .header__logo {
    color: #FFFFFF;
}

.dark .header__logo-accent {
    color: #60A5FA;
}

.dark .header__nav-link {
    color: #E5E7EB;
}

.dark .header__nav-link:hover {
    color: #60A5FA;
}

.dark .header__nav-link--active {
    color: #60A5FA;
}

.dark .service-card {
    background-color: #1E1E1E;
    border-color: #2D2D2D;
}

.dark .service-card:hover {
    border-color: #60A5FA;
    background-color: #252525;
}

.dark .service-card__title {
    color: #FFFFFF;
}

.dark .service-card__description {
    color: #E5E7EB;
}

.dark .analytics__title {
    color: #FFFFFF;
}

.dark .analytics__description {
    color: #E5E7EB;
}

.dark .analytics__list-text {
    color: #E5E7EB;
}

.dark .footer {
    background-color: #000000;
}

.dark .footer__linkedin {
    color: #E5E7EB;
}

.dark .footer__linkedin:hover {
    color: #00B0F0;
}

.dark .theme-toggle {
    border-color: #2D2D2D;
    color: #E5E7EB;
}

.dark .theme-toggle:hover {
    border-color: #60A5FA;
    color: #60A5FA;
    background-color: #1E1E1E;
}

/* ═══════════════════════════════════════════════════════
   DARK MODE — Comprehensive Text & Element Overrides
   ═══════════════════════════════════════════════════════ */

/* ── Typography Defaults ── */
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
    color: #FFFFFF;
}

.dark p, .dark span, .dark li, .dark td, .dark th {
    color: #E5E7EB;
}

.dark a {
    color: #60A5FA;
}

.dark a:hover {
    color: #93C5FD;
}

.dark label {
    color: #E5E7EB;
}

.dark ::placeholder {
    color: #6B7280;
}

/* ── Service Hero ── */
.dark .service-hero {
    background-color: #0A0A0A;
}

.dark .service-hero__title {
    color: #FFFFFF;
}

.dark .service-hero__description {
    color: #E5E7EB;
}

.dark .service-hero__back {
    color: #9CA3AF;
}

.dark .service-hero__back:hover {
    color: #60A5FA;
}

/* ── Features Section ── */
.dark .features {
    background-color: #0A0A0A;
}

.dark .feature-card {
    background-color: #1E1E1E;
    border-color: #2D2D2D;
}

.dark .feature-card:hover {
    border-color: #60A5FA;
}

.dark .feature-card__icon {
    background-color: #2D2D2D;
    color: #60A5FA;
}

.dark .feature-card__title {
    color: #FFFFFF;
}

.dark .feature-card__description {
    color: #E5E7EB;
}

.dark .feature-card__list li {
    color: #E5E7EB;
}

/* ── Metrics Section ── */
.dark .metrics {
    background-color: #000000;
}

.dark .metric-card {
    background-color: rgba(96, 165, 250, 0.08);
    border-color: rgba(96, 165, 250, 0.15);
}

.dark .metric-card:hover {
    background-color: rgba(96, 165, 250, 0.15);
}

.dark .metric-card__value {
    color: #FFFFFF;
}

.dark .metric-card__label {
    color: #60A5FA;
}

.dark .metric-card__desc {
    color: rgba(255, 255, 255, 0.7);
}

/* ── Contact Page ── */
.dark .contact-form-column {
    background-color: #1E1E1E;
}

.dark .contact-info-card {
    background-color: #1E1E1E;
    border-color: #2D2D2D;
}

.dark .contact-info-card__title {
    color: #FFFFFF;
}

.dark .contact-info-card__text {
    color: #E5E7EB;
}

.dark .form-field__input,
.dark .form-field__select,
.dark .form-field__textarea {
    background-color: #2D2D2D;
    border-color: #3D3D3D;
    color: #FFFFFF;
}

.dark .form-field__input:focus,
.dark .form-field__select:focus,
.dark .form-field__textarea:focus {
    border-color: #60A5FA;
}

.dark .form-field__label {
    color: #E5E7EB;
}

/* ── Data Services Page ── */
.dark .demo-section {
    background-color: #0A0A0A;
}

.dark .demo-toolbar {
    background-color: #1E1E1E;
    border-color: #2D2D2D;
}

.dark .demo-canvas {
    background-color: #121212;
    border-color: #2D2D2D;
}

.dark .service-card {
    background-color: #1E1E1E;
    border-color: #2D2D2D;
}

.dark .service-card:hover {
    border-color: #60A5FA;
    background-color: #252525;
}

/* ── Dropdown Menu ── */
.dark .nav-dropdown__menu {
    background-color: #1E1E1E;
    border-color: #2D2D2D;
}

.dark .nav-dropdown__column-title {
    color: #9CA3AF;
}

.dark .nav-dropdown__item:hover {
    background-color: #2D2D2D;
}

.dark .nav-dropdown__item-icon {
    background-color: #2D2D2D;
}

.dark .nav-dropdown__item:hover .nav-dropdown__item-icon {
    background-color: #60A5FA;
}

.dark .nav-dropdown__item-title {
    color: #FFFFFF;
}

.dark .nav-dropdown__item-desc {
    color: #9CA3AF;
}

/* ── Form Elements ── */
.dark .form-field__error {
    color: #F87171;
}

.dark .form-field__upload {
    background-color: #2D2D2D;
    border-color: #3D3D3D;
}

.dark .form-field__upload:hover {
    border-color: #60A5FA;
}

.dark .form-field__upload-text {
    color: #E5E7EB;
}

.dark .form-field__upload-hint {
    color: #9CA3AF;
}

/* ── Modal ── */
.dark .modal {
    background-color: rgba(0, 0, 0, 0.8);
}

.dark .modal__content {
    background-color: #1E1E1E;
    border-color: #2D2D2D;
}

.dark .modal__title {
    color: #FFFFFF;
}

/* ── Success State ── */
.dark .contact-success {
    background-color: #1E1E1E;
}

.dark .contact-success__title {
    color: #FFFFFF;
}

.dark .contact-success__text {
    color: #E5E7EB;
}

/* ── Scroll to Top ── */
.dark .scroll-top {
    background-color: #60A5FA;
}

.dark .scroll-top:hover {
    background-color: #93C5FD;
}