:root {
    /* ======================================================
       PALETA NATURAL DEL SISTEMA
    ====================================================== */

    --palette-petrol: #264653;
    --palette-smoke-blue: #afcdde;
    --palette-sand: #d9cdbf;
    --palette-ivory: #faf8f4;
    --palette-graphite: #495057;

    /* ======================================================
       DIMENSIONES GENERALES
    ====================================================== */

    --sidebar-width: 268px;
    --navbar-height: 72px;


    /* ======================================================
       COLOR PRINCIPAL
    ====================================================== */

    --primary: var(--palette-petrol);
    --primary-hover: #1f3a45;
    --primary-dark: #18313b;
    --primary-light: #e8f1f5;

    --accent: var(--palette-smoke-blue);
    --accent-hover: #8fb7cc;
    --accent-soft: #eef5f8;


    /* ======================================================
       FONDOS
    ====================================================== */

    --background: var(--palette-ivory);

    --surface: #fffefc;
    --surface-secondary: #f2ede6;
    --surface-hover: #eef3f5;


    /* ======================================================
       TEXTOS
    ====================================================== */

    --text: var(--palette-graphite);
    --text-muted: #6b7378;
    --text-soft: #93999d;

    --text-inverse: #ffffff;


    /* ======================================================
       BORDES
    ====================================================== */

    --border: var(--palette-sand);
    --border-strong: #bcae9c;


    /* ======================================================
       ESTADOS
    ====================================================== */

    --success: #356173;
    --success-hover: #294e5d;
    --success-light: #e8f1f5;

    --warning: #9b743c;
    --warning-hover: #7f5d2e;
    --warning-light: #fbf2e4;

    --danger: #a5524b;
    --danger-hover: #8d433d;
    --danger-light: #f8e9e7;

    --info: #527f97;
    --info-light: #eef5f8;


    /* ======================================================
       SOMBRAS
    ====================================================== */

    --shadow-sm:
        0 2px 8px rgba(38, 70, 83, 0.05);

    --shadow:
        0 14px 34px rgba(38, 70, 83, 0.08);

    --shadow-md:
        0 18px 42px rgba(38, 70, 83, 0.11);

    --shadow-lg:
        0 24px 60px rgba(38, 70, 83, 0.17);


    /* ======================================================
       RADIOS
    ====================================================== */

    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;


    /* ======================================================
       TRANSICIONES
    ====================================================== */

    --transition-fast: 0.15s ease;
    --transition: 0.18s ease;
    --transition-slow: 0.25s ease;


    /* ======================================================
       Z-INDEX
    ====================================================== */
    --z-navbar: 50;
    --z-sidebar: 1000;
    --z-overlay: 999;
    --z-modal: 1200;
}