/**
 * ==========================================================================
 * Icon Multispeciality Hospital & ICCU, Thane (W)
 * Main Website Master Stylesheet (main.css)
 * 
 * Central CSS file governing global design tokens, core HTML5 typography,
 * base reset, scrollbar styles, website layout, and core utility classes.
 * ==========================================================================
 */

/* ==========================================================================
   1. GLOBAL DESIGN TOKENS & SYSTEM ROOT VARIABLES
   ========================================================================== */
:root {
    /* Keep button colors independent of text and decorative colors. */
    --button-indigo: #1e1b8b;
    --button-coral: #faaaad;

    /* Preserve the original logo identity independently of the page palette. */
    --brand-logo-indigo: #261794;
    --brand-logo-red: #ea2027;
    --sign-blue: #080878;
    --brand-logo-blue: #080878;

    /* Primary Brand Color: Soft Purple */
    --logo-indigo: #7060E6;
    --logo-indigo-dark: var(--logo-indigo);
    --logo-indigo-light: var(--logo-indigo);

    /* Light Shades of Logo Indigo */
    --indigo-50: #f7f6ff;
    --indigo-100: #edeafe;
    --indigo-200: #ded8fd;
    --indigo-300: #c5bbfb;
    --indigo-soft: rgba(112, 96, 230, 0.08);
    --indigo-soft-hover: rgba(112, 96, 230, 0.15);

    /* Secondary Brand Color: Soft Coral */
    --logo-red: #f37c80;
    --logo-red-dark: var(--logo-red);
    --logo-red-light: var(--logo-red);

    /* Light Shades of Logo Red */
    --red-50: #fff5f5;
    --red-100: #fee2e2;
    --red-200: #fecaca;
    --red-soft: rgba(243, 124, 128, 0.08);
    --red-soft-hover: rgba(243, 124, 128, 0.15);

    /* System Mappings */
    --primary: var(--logo-indigo);
    --primary-dark: var(--logo-indigo-dark);
    --primary-light: var(--logo-indigo-light);
    --primary-soft: var(--indigo-soft);

    --crimson: var(--logo-red);
    --crimson-dark: var(--logo-red-dark);
    --crimson-soft: var(--red-soft);

    /* Brand Primary & Specialty Token Extensions */
    --site-primary-indigo: #1e1b8b;
    --site-primary-hover: #16136e;
    --site-primary-rgb: 30, 27, 139;
    --site-accent-coral: #faaaad;
    --site-accent-coral-hover: #f7989c;
    --site-pastel-ribbon: #fce5e6;
    --site-coral-rgb: 250, 170, 173;
    --site-navy-dark: #17104c;
    --site-slate-text: #64748b;
    --site-slate-dark: #334155;
    --site-slate-light: #94a3b8;
    --site-border-subtle: #e4ddff;
    --site-surface-white: #ffffff;
    --site-surface-soft: #faf8ff;
    --site-surface-gray: #f8fafc;
    --site-success-green: #10b981;
    --site-emergency-red: #ef4444;

    /* Hospital Hero Section Variables */
    --hosp-gradient-top: #1e1373;
    --hosp-gradient-mid: #4333b8;
    --hosp-gradient-bot: #7060E6;
    --hosp-color-primary: #7060E6;
    --hosp-color-primary-hover: #5c4cd9;
    --hosp-color-title: #261794;
    --hosp-color-desc: #5d6f78;
    --hosp-color-btn-dark: #261794;
    --hosp-outer-bg: #f7f6ff;
    --hosp-card-shadow: 0 25px 60px -15px rgba(38, 23, 148, 0.2), 0 10px 25px -8px rgba(38, 23, 148, 0.12);

    /* Specialities Directory & Showcase Variables */
    --spec-indigo: #7060E6;
    --spec-indigo-dark: #1e1b8b;
    --spec-indigo-deep: #1e1b4b;
    --spec-indigo-soft: #f7f6ff;
    --spec-indigo-tint: #edeafe;
    --spec-indigo-border: #ded8fd;
    --spec-indigo-glow: rgba(112, 96, 230, 0.25);
    --spec-coral: #faaaad;
    --spec-coral-dark: #9e3f43;
    --spec-coral-soft: #fff8f8;
    --spec-coral-tint: rgba(250, 170, 173, 0.22);
    --spec-coral-border: #f8cfd1;
    --spec-coral-glow: rgba(250, 170, 173, 0.35);
    --spec-navy: #17104c;
    --spec-muted: #64748b;
    --spec-border: #e4ddff;
    --spec-card-bg: #ffffff;
    --spec-card-hover-bg: #fdfcff;
    --spec-text-main: #0f172a;
    --spec-text-muted: #526071;
    --spec-radius: 18px;
    --spec-shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.04);
    --spec-shadow-md: 0 10px 30px rgba(30, 27, 75, 0.08);
    --spec-shadow-lg: 0 18px 45px rgba(30, 27, 75, 0.12);

    /* Keep Bootstrap utilities and interactive states on the same palette. */
    --bs-primary: var(--logo-indigo);
    --bs-primary-rgb: 112, 96, 230;
    --bs-primary-text-emphasis: var(--logo-indigo);
    --bs-primary-bg-subtle: var(--indigo-100);
    --bs-primary-border-subtle: var(--indigo-200);
    --bs-danger: var(--logo-red);
    --bs-danger-rgb: 243, 124, 128;
    --bs-danger-text-emphasis: var(--logo-red);
    --bs-danger-bg-subtle: var(--red-100);
    --bs-danger-border-subtle: var(--red-200);
    --bs-link-color: var(--logo-indigo);
    --bs-link-color-rgb: 112, 96, 230;
    --bs-link-hover-color: var(--logo-indigo);
    --bs-link-hover-color-rgb: 112, 96, 230;

    --teal: #0d9488;
    --teal-soft: rgba(13, 148, 136, 0.1);
    --purple: #7c3aed;
    --purple-soft: rgba(124, 58, 237, 0.1);
    --success: #10b981;
    --success-soft: rgba(16, 185, 129, 0.1);
    --warning: #f59e0b;

    /* Light Shade Surfaces & Backgrounds */
    --bg-light: #f7f6ff;
    --bg-light-tint: #f1effe;
    --surface: #ffffff;
    --border-color: #e4e0fb;

    /* Typography Colors */
    --text-main: #334155;
    --text-muted: #5e598f;
    --text-light: #8e8ab8;

    --navy: var(--logo-indigo);
    --navy-dark: var(--logo-indigo);

    --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --site-font-primary: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --site-font-heading: 'Outfit', 'Montserrat', sans-serif;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    --shadow-sm: 0 2px 8px rgba(112, 96, 230, 0.05);
    --shadow-md: 0 10px 25px -5px rgba(112, 96, 230, 0.09), 0 6px 10px -4px rgba(112, 96, 230, 0.03);
    --shadow-lg: 0 20px 40px -10px rgba(112, 96, 230, 0.14), 0 10px 15px -5px rgba(112, 96, 230, 0.06);
    --shadow-glow-indigo: 0 0 25px rgba(112, 96, 230, 0.35);
    --shadow-glow-red: 0 0 25px rgba(243, 124, 128, 0.35);
    --site-shadow-sm: 0 4px 14px rgba(30, 27, 139, 0.08);
    --site-shadow-md: 0 8px 24px rgba(30, 27, 139, 0.12);
    --site-shadow-lg: 0 16px 36px rgba(30, 27, 139, 0.16);
    --site-shadow-card: 0 5px 22px rgba(99, 57, 218, 0.04);
    --site-shadow-card-hover: 0 12px 30px rgba(99, 57, 218, 0.09);

    --transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    --site-transition-fast: 0.15s ease;
    --site-transition-smooth: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    --site-transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   2. HTML5 BASE RESET & GLOBAL TYPOGRAPHY
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: auto;
    scrollbar-width: thin;
    scrollbar-color: #1e1b8b #f1f3f9;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 90px;
}

body {
    scroll-behavior: auto;
}

/* Custom Blue Scrollbar (Chrome, Edge, Safari, Opera, Brave) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f3f9;
}

::-webkit-scrollbar-thumb {
    background: #1e1b8b;
    border-radius: 9999px;
    border: 2px solid #f1f3f9;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: #2a25b8;
}

::-webkit-scrollbar-thumb:active {
    background: #13106d;
}

/* Clean High-Contrast Selection */
::selection {
    background-color: var(--site-primary-indigo);
    color: #ffffff;
}

::-moz-selection {
    background-color: var(--site-primary-indigo);
    color: #ffffff;
}

body,
body.site-body {
    font-family: var(--font-body);
    color: var(--text-main);
    background-color: var(--surface);
    overflow-x: hidden;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
.brand-title,
.brand-subtitle,
.stat-num {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}

/* ==========================================================================
   3. WEBSITE LAYOUT FOUNDATIONS & CORE UTILITIES
   ========================================================================== */
.site-main-container {
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.site-section-spacer {
    padding-block: clamp(40px, 6vw, 80px);
}

.site-section-heading-wrap {
    text-align: center;
    max-width: 780px;
    margin-inline: auto;
    margin-bottom: clamp(32px, 4vw, 56px);
}

/* Global Button Foundation Standards */
.btn-site-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 50px;
    background-color: var(--site-primary-indigo);
    color: #ffffff !important;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--site-primary-indigo);
    box-shadow: 0 4px 14px rgba(30, 27, 139, 0.22);
    transition: var(--site-transition-smooth);
    cursor: pointer;
}

.btn-site-primary:hover {
    background-color: var(--site-primary-hover);
    border-color: var(--site-primary-hover);
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(30, 27, 139, 0.35);
}

.btn-site-coral {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 50px;
    background-color: var(--site-accent-coral);
    color: #ffffff !important;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--site-accent-coral);
    box-shadow: 0 4px 14px rgba(250, 170, 173, 0.35);
    transition: var(--site-transition-smooth);
    cursor: pointer;
}

.btn-site-coral:hover {
    background-color: var(--site-accent-coral-hover);
    border-color: var(--site-accent-coral-hover);
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(250, 170, 173, 0.55);
}

/* ==========================================================================
   4. GLOBAL COLOR & SURFACE HELPER UTILITIES
   ========================================================================== */
.bg-light-surface {
    background-color: var(--bg-light);
}

.bg-primary-soft {
    background-color: var(--indigo-soft);
}

.bg-danger-soft {
    background-color: var(--red-soft);
}

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

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

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

.text-teal {
    color: var(--teal) !important;
}

.text-purple {
    color: var(--purple) !important;
}

.btn-teal {
    background-color: var(--teal);
    border-color: var(--teal);
}

.btn-teal:hover {
    background-color: #0f766e;
    border-color: #0f766e;
}

.border-teal-subtle {
    border-color: rgba(13, 148, 136, 0.25) !important;
}

/* Gradient Headings with Logo Colors */
.text-gradient-primary {
    background: var(--logo-indigo);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-danger {
    background: var(--logo-red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.max-w-700 {
    max-width: 700px;
}

.text-xs {
    font-size: 0.75rem;
}