/* =========================================================
   CLÍNICA SANTA BÁRBARA
   COLOR SYSTEM
   ========================================================= */

/* ---------------------------------------------------------
   LIGHT THEME
   Default theme
   --------------------------------------------------------- */

:root,
html[data-theme="light"] {
    --max-width: 1280px;
    color-scheme: light;

    /* =====================================================
       BRAND COLORS
       ===================================================== */

    --color-brand-900: #014752;
    --color-brand-700: #3D6971;
    --color-brand-500: #6C8C93;
    --color-brand-300: #B1B5B5;
    --color-brand-000: #FFFFFF;

    /* =====================================================
       BACKGROUNDS
       ===================================================== */

    --color-background: #FFFFFF;
    --color-background-soft: #F7F9F9;
    --color-background-muted: #EEF3F3;
    --color-background-strong: #014752;

    --color-surface: #FFFFFF;
    --color-surface-soft: #F7F9F9;
    --color-surface-muted: #EEF3F3;
    --color-surface-hover: #E8F0F1;
    --color-surface-active: #DDE8E9;
    --color-surface-inverse: #014752;

    /* =====================================================
       TEXT
       ===================================================== */

    --color-text-primary: #12363D;
    --color-text-secondary: #3D6971;
    --color-text-muted: #6C8C93;
    --color-text-subtle: #879FA4;
    --color-text-disabled: #AEBABC;
    --color-text-inverse: #FFFFFF;

    --color-heading-primary: #014752;
    --color-heading-secondary: #3D6971;

    /* =====================================================
       PRIMARY ACTIONS
       ===================================================== */

    --color-primary: #014752;
    --color-primary-hover: #035866;
    --color-primary-active: #003A43;
    --color-primary-soft: #E5EFF0;
    --color-primary-subtle: #F1F6F6;
    --color-primary-contrast: #FFFFFF;

    /* =====================================================
       SECONDARY ACTIONS
       ===================================================== */

    --color-secondary: #3D6971;
    --color-secondary-hover: #31585F;
    --color-secondary-active: #27484E;
    --color-secondary-soft: #E9EFEF;
    --color-secondary-contrast: #FFFFFF;

    /* =====================================================
       ACCENTS
       ===================================================== */

    --color-accent: #6C8C93;
    --color-accent-hover: #58777E;
    --color-accent-soft: #E8EEEE;
    --color-accent-contrast: #FFFFFF;

    /* =====================================================
       BORDERS AND DIVIDERS
       ===================================================== */

    --color-border: #D6E0E1;
    --color-border-soft: #E8EEEE;
    --color-border-strong: #A8BABC;
    --color-divider: #E3EAEA;
    --color-outline: #6C8C93;

    /* =====================================================
       LINKS
       ===================================================== */

    --color-link: #014752;
    --color-link-hover: #3D6971;
    --color-link-active: #003A43;
    --color-link-visited: #5D7378;

    /* =====================================================
       INPUTS
       ===================================================== */

    --color-input-background: #FFFFFF;
    --color-input-background-hover: #FAFCFC;
    --color-input-background-disabled: #F1F4F4;

    --color-input-border: #C8D5D7;
    --color-input-border-hover: #6C8C93;
    --color-input-border-focus: #014752;
    --color-input-border-error: #B64040;

    --color-input-text: #12363D;
    --color-input-placeholder: #82989D;
    --color-input-disabled: #AEBABC;

    /* =====================================================
       BUTTONS
       ===================================================== */

    --color-button-primary-bg: #014752;
    --color-button-primary-bg-hover: #035866;
    --color-button-primary-bg-active: #003A43;
    --color-button-primary-text: #FFFFFF;

    --color-button-secondary-bg: transparent;
    --color-button-secondary-bg-hover: #EAF1F2;
    --color-button-secondary-bg-active: #DDE8E9;
    --color-button-secondary-text: #014752;
    --color-button-secondary-border: #014752;

    --color-button-ghost-bg: transparent;
    --color-button-ghost-bg-hover: #EEF3F3;
    --color-button-ghost-text: #3D6971;

    --color-button-disabled-bg: #DCE3E4;
    --color-button-disabled-text: #98A7AA;

    /* =====================================================
       NAVIGATION
       ===================================================== */

    --color-header-background: rgba(255, 255, 255, 0.92);
    --color-header-border: #E3EAEA;
    --color-nav-text: #3D6971;
    --color-nav-text-hover: #014752;
    --color-nav-text-active: #014752;
    --color-nav-indicator: #014752;

    /* =====================================================
       HERO
       ===================================================== */

    --color-hero-background: #F8FAFA;
    --color-hero-background-alt: #EEF4F4;
    --color-hero-heading: #014752;
    --color-hero-text: #3D6971;
    --color-hero-accent: #6C8C93;

    /* =====================================================
       CARDS
       ===================================================== */

    --color-card-background: #FFFFFF;
    --color-card-background-hover: #F9FBFB;
    --color-card-border: #E1E9EA;
    --color-card-heading: #014752;
    --color-card-text: #3D6971;

    /* =====================================================
       FOOTER
       ===================================================== */

    --color-footer-background: #014752;
    --color-footer-surface: #073E47;
    --color-footer-heading: #FFFFFF;
    --color-footer-text: #D7E4E5;
    --color-footer-muted: #AFC4C7;
    --color-footer-link: #FFFFFF;
    --color-footer-link-hover: #BFD4D6;
    --color-footer-border: rgba(255, 255, 255, 0.14);

    /* =====================================================
       ICONS
       ===================================================== */

    --color-icon-primary: #014752;
    --color-icon-secondary: #3D6971;
    --color-icon-muted: #6C8C93;
    --color-icon-inverse: #FFFFFF;

    /* =====================================================
       STATES
       ===================================================== */

    --color-success: #2F7D61;
    --color-success-soft: #E8F4EE;
    --color-success-border: #A8D3C0;
    --color-success-text: #225D49;

    --color-warning: #B8832F;
    --color-warning-soft: #FBF4E6;
    --color-warning-border: #E4C58D;
    --color-warning-text: #79591F;

    --color-danger: #B64040;
    --color-danger-soft: #FBEAEA;
    --color-danger-border: #E7B5B5;
    --color-danger-text: #7E2B2B;

    --color-info: #3D6971;
    --color-info-soft: #EAF0F1;
    --color-info-border: #B8C9CC;
    --color-info-text: #294A50;

    /* =====================================================
       OVERLAYS
       ===================================================== */

    --color-overlay-soft: rgba(1, 71, 82, 0.08);
    --color-overlay-medium: rgba(1, 71, 82, 0.28);
    --color-overlay-strong: rgba(1, 71, 82, 0.62);
    --color-modal-backdrop: rgba(8, 28, 33, 0.58);

    /* =====================================================
       FOCUS
       ===================================================== */

    --color-focus-ring: rgba(1, 71, 82, 0.30);
    --color-selection-background: #CFE0E2;
    --color-selection-text: #014752;

    /* =====================================================
       SHADOWS
       ===================================================== */

    --shadow-xs: 0 1px 3px rgba(1, 71, 82, 0.05);
    --shadow-sm: 0 4px 14px rgba(1, 71, 82, 0.07);
    --shadow-md: 0 12px 32px rgba(1, 71, 82, 0.10);
    --shadow-lg: 0 24px 60px rgba(1, 71, 82, 0.14);
    --shadow-header: 0 4px 20px rgba(1, 71, 82, 0.06);

    /* =====================================================
       GRADIENTS
       ===================================================== */

    --gradient-primary:
        linear-gradient(
            135deg,
            #014752 0%,
            #3D6971 100%
        );

    --gradient-soft:
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #EEF4F4 100%
        );

    --gradient-hero:
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F2F7F7 55%,
            #E5EFF0 100%
        );

    --gradient-overlay:
        linear-gradient(
            90deg,
            rgba(1, 71, 82, 0.82) 0%,
            rgba(1, 71, 82, 0.28) 100%
        );
}


/* ---------------------------------------------------------
   DARK THEME
   --------------------------------------------------------- */

html[data-theme="dark"] {
    color-scheme: dark;

    /* =====================================================
       BRAND COLORS
       ===================================================== */

    --color-brand-900: #014752;
    --color-brand-700: #3D6971;
    --color-brand-500: #6C8C93;
    --color-brand-300: #B1B5B5;
    --color-brand-000: #FFFFFF;

    /* =====================================================
       BACKGROUNDS
       ===================================================== */

    --color-background: #07191D;
    --color-background-soft: #0B2328;
    --color-background-muted: #102D33;
    --color-background-strong: #014752;

    --color-surface: #0E292F;
    --color-surface-soft: #123138;
    --color-surface-muted: #183A41;
    --color-surface-hover: #1C424A;
    --color-surface-active: #234B53;
    --color-surface-inverse: #FFFFFF;

    /* =====================================================
       TEXT
       ===================================================== */

    --color-text-primary: #F7FAFA;
    --color-text-secondary: #CBD8DA;
    --color-text-muted: #9FB3B7;
    --color-text-subtle: #7F989D;
    --color-text-disabled: #60777C;
    --color-text-inverse: #014752;

    --color-heading-primary: #FFFFFF;
    --color-heading-secondary: #C7D7D9;

    /* =====================================================
       PRIMARY ACTIONS
       ===================================================== */

    --color-primary: #A6C1C5;
    --color-primary-hover: #C4D6D9;
    --color-primary-active: #DCE7E9;
    --color-primary-soft: #183A41;
    --color-primary-subtle: #102D33;
    --color-primary-contrast: #07191D;

    /* =====================================================
       SECONDARY ACTIONS
       ===================================================== */

    --color-secondary: #6C8C93;
    --color-secondary-hover: #87A3A9;
    --color-secondary-active: #9CB3B7;
    --color-secondary-soft: #18343A;
    --color-secondary-contrast: #FFFFFF;

    /* =====================================================
       ACCENTS
       ===================================================== */

    --color-accent: #B1B5B5;
    --color-accent-hover: #CDD0D0;
    --color-accent-soft: #1D3B41;
    --color-accent-contrast: #07191D;

    /* =====================================================
       BORDERS AND DIVIDERS
       ===================================================== */

    --color-border: #294950;
    --color-border-soft: #1D3940;
    --color-border-strong: #49676E;
    --color-divider: #244249;
    --color-outline: #6C8C93;

    /* =====================================================
       LINKS
       ===================================================== */

    --color-link: #B7CDD0;
    --color-link-hover: #FFFFFF;
    --color-link-active: #D8E5E7;
    --color-link-visited: #93ADB1;

    /* =====================================================
       INPUTS
       ===================================================== */

    --color-input-background: #0E292F;
    --color-input-background-hover: #123138;
    --color-input-background-disabled: #142C31;

    --color-input-border: #36555C;
    --color-input-border-hover: #6C8C93;
    --color-input-border-focus: #B1C7CA;
    --color-input-border-error: #E08383;

    --color-input-text: #F7FAFA;
    --color-input-placeholder: #82999E;
    --color-input-disabled: #60777C;

    /* =====================================================
       BUTTONS
       ===================================================== */

    --color-button-primary-bg: #B7CDD0;
    --color-button-primary-bg-hover: #D0DEE0;
    --color-button-primary-bg-active: #E1E9EA;
    --color-button-primary-text: #07191D;

    --color-button-secondary-bg: transparent;
    --color-button-secondary-bg-hover: #183A41;
    --color-button-secondary-bg-active: #234B53;
    --color-button-secondary-text: #D4E1E3;
    --color-button-secondary-border: #6C8C93;

    --color-button-ghost-bg: transparent;
    --color-button-ghost-bg-hover: #16343A;
    --color-button-ghost-text: #B8CBCD;

    --color-button-disabled-bg: #263D42;
    --color-button-disabled-text: #657B80;

    /* =====================================================
       NAVIGATION
       ===================================================== */

    --color-header-background: rgba(7, 25, 29, 0.92);
    --color-header-border: #1E3A40;
    --color-nav-text: #B6C8CB;
    --color-nav-text-hover: #FFFFFF;
    --color-nav-text-active: #FFFFFF;
    --color-nav-indicator: #A6C1C5;

    /* =====================================================
       HERO
       ===================================================== */

    --color-hero-background: #07191D;
    --color-hero-background-alt: #0C252A;
    --color-hero-heading: #FFFFFF;
    --color-hero-text: #C4D3D5;
    --color-hero-accent: #8FAAAF;

    /* =====================================================
       CARDS
       ===================================================== */

    --color-card-background: #0E292F;
    --color-card-background-hover: #14343B;
    --color-card-border: #244249;
    --color-card-heading: #FFFFFF;
    --color-card-text: #BED0D2;

    /* =====================================================
       FOOTER
       ===================================================== */

    --color-footer-background: #041216;
    --color-footer-surface: #091D21;
    --color-footer-heading: #FFFFFF;
    --color-footer-text: #C1D0D2;
    --color-footer-muted: #82999E;
    --color-footer-link: #FFFFFF;
    --color-footer-link-hover: #B7CDD0;
    --color-footer-border: rgba(255, 255, 255, 0.10);

    /* =====================================================
       ICONS
       ===================================================== */

    --color-icon-primary: #B7CDD0;
    --color-icon-secondary: #8FAAAF;
    --color-icon-muted: #6C858A;
    --color-icon-inverse: #07191D;

    /* =====================================================
       STATES
       ===================================================== */

    --color-success: #6CB895;
    --color-success-soft: #17362B;
    --color-success-border: #376B56;
    --color-success-text: #B6E1CD;

    --color-warning: #D5AE63;
    --color-warning-soft: #3B301C;
    --color-warning-border: #76613A;
    --color-warning-text: #F0D7A8;

    --color-danger: #E27E7E;
    --color-danger-soft: #3B2020;
    --color-danger-border: #783F3F;
    --color-danger-text: #F2B9B9;

    --color-info: #8FAAAF;
    --color-info-soft: #18343A;
    --color-info-border: #3D6971;
    --color-info-text: #C8D8DA;

    /* =====================================================
       OVERLAYS
       ===================================================== */

    --color-overlay-soft: rgba(255, 255, 255, 0.05);
    --color-overlay-medium: rgba(0, 0, 0, 0.26);
    --color-overlay-strong: rgba(0, 0, 0, 0.62);
    --color-modal-backdrop: rgba(0, 0, 0, 0.72);

    /* =====================================================
       FOCUS
       ===================================================== */

    --color-focus-ring: rgba(177, 199, 202, 0.34);
    --color-selection-background: #3D6971;
    --color-selection-text: #FFFFFF;

    /* =====================================================
       SHADOWS
       ===================================================== */

    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.24);
    --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 16px 38px rgba(0, 0, 0, 0.36);
    --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.46);
    --shadow-header: 0 6px 24px rgba(0, 0, 0, 0.24);

    /* =====================================================
       GRADIENTS
       ===================================================== */

    --gradient-primary:
        linear-gradient(
            135deg,
            #014752 0%,
            #3D6971 100%
        );

    --gradient-soft:
        linear-gradient(
            135deg,
            #0E292F 0%,
            #07191D 100%
        );

    --gradient-hero:
        linear-gradient(
            135deg,
            #07191D 0%,
            #0B2328 55%,
            #123138 100%
        );

    --gradient-overlay:
        linear-gradient(
            90deg,
            rgba(7, 25, 29, 0.94) 0%,
            rgba(7, 25, 29, 0.36) 100%
        );
}