/* ═══════════════════════════════════════════════════════════════
 * LINKUPHR — DESIGN TOKENS
 * Sistema visual con temas claro/oscuro
 * Paleta: Teal de alto contraste
 * ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────
 * RESET & BASE
 * ─────────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* ───────────────────────────────────────────────────────────
 * TIPOGRAFÍA
 * ─────────────────────────────────────────────────────────── */
:root {
    --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text);
}

h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }
h4 { font-size: 15px; }

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover { color: var(--color-primary-hover); }

code, pre {
    font-family: var(--font-mono);
    font-size: 13px;
}

/* ───────────────────────────────────────────────────────────
 * TEMA CLARO (default)
 * ─────────────────────────────────────────────────────────── */
:root,
:root[data-theme="claro"] {

    /* Marca / primario */
    --color-primary:           #0F6E56;
    --color-primary-hover:     #085041;
    --color-primary-active:    #04342C;
    --color-primary-soft:      #E1F5EE;
    --color-primary-soft-2:    #9FE1CB;
    --color-primary-text:      #FFFFFF;
    --color-on-primary-soft:   #04342C;

    /* Superficies */
    --color-bg:                #FFFFFF;          /* fondo de página */
    --color-surface:           #FFFFFF;          /* tarjetas */
    --color-surface-2:         #F7FBFA;          /* sidebars, headers de tabla */
    --color-surface-3:         #F1F4F3;          /* stats cards */
    --color-overlay:           rgba(4, 52, 44, 0.5);

    /* Texto */
    --color-text:              #04342C;          /* texto principal */
    --color-text-2:            #444441;          /* texto secundario */
    --color-text-3:            #5F5E5A;          /* texto terciario / hints */
    --color-text-on-dark:      #FFFFFF;
    --color-text-muted:        #888780;

    /* Bordes */
    --color-border:            #D9E8E2;          /* bordes default */
    --color-border-2:          #B4D4C8;          /* bordes hover */
    --color-border-strong:     #888780;          /* énfasis */
    --color-divider:           #F1F4F3;          /* separadores sutiles */

    /* Estados semánticos */
    --color-success:           #0F6E56;
    --color-success-bg:        #E1F5EE;
    --color-success-text:      #04342C;

    --color-warning:           #BA7517;
    --color-warning-bg:        #FAEEDA;
    --color-warning-text:      #412402;

    --color-danger:            #A32D2D;
    --color-danger-bg:         #FCEBEB;
    --color-danger-text:       #501313;

    --color-info:              #185FA5;
    --color-info-bg:           #E6F1FB;
    --color-info-text:         #042C53;

    /* Inputs */
    --color-input-bg:          #FFFFFF;
    --color-input-border:      #B4D4C8;
    --color-input-border-focus:#0F6E56;
    --color-input-text:        #04342C;
    --color-input-placeholder: #888780;

    /* Sombras (sutiles, no decorativas) */
    --shadow-sm:    0 1px 2px rgba(4, 52, 44, 0.04);
    --shadow-md:    0 2px 8px rgba(4, 52, 44, 0.06);
    --shadow-lg:    0 8px 24px rgba(4, 52, 44, 0.08);
    --shadow-focus: 0 0 0 3px rgba(15, 110, 86, 0.15);

    /* Indicadores */
    --color-online:            #1D9E75;
    --color-offline:           #888780;
}

/* ───────────────────────────────────────────────────────────
 * TEMA OSCURO
 * ─────────────────────────────────────────────────────────── */
:root[data-theme="oscuro"] {

    /* Marca / primario (invertido para legibilidad sobre oscuro) */
    --color-primary:           #5DCAA5;
    --color-primary-hover:     #9FE1CB;
    --color-primary-active:    #E1F5EE;
    --color-primary-soft:      #163B30;
    --color-primary-soft-2:    #1F5A47;
    --color-primary-text:      #04342C;
    --color-on-primary-soft:   #5DCAA5;

    /* Superficies (verde muy oscuro, no negro puro) */
    --color-bg:                #0A1F1A;
    --color-surface:           #0E2820;
    --color-surface-2:         #102D24;
    --color-surface-3:         #163B30;
    --color-overlay:           rgba(0, 0, 0, 0.7);

    /* Texto */
    --color-text:              #E1F5EE;
    --color-text-2:            #B4D4C8;
    --color-text-3:            #88A89A;
    --color-text-on-dark:      #E1F5EE;
    --color-text-muted:        #5F7A6E;

    /* Bordes */
    --color-border:            #163B30;
    --color-border-2:          #1F5A47;
    --color-border-strong:     #5DCAA5;
    --color-divider:           #102D24;

    /* Estados semánticos */
    --color-success:           #5DCAA5;
    --color-success-bg:        #163B30;
    --color-success-text:      #9FE1CB;

    --color-warning:           #EF9F27;
    --color-warning-bg:        #4A2E0A;
    --color-warning-text:      #FAC775;

    --color-danger:            #F09595;
    --color-danger-bg:         #4A1B1B;
    --color-danger-text:       #F7C1C1;

    --color-info:              #85B7EB;
    --color-info-bg:           #0C2D4F;
    --color-info-text:         #B5D4F4;

    /* Inputs */
    --color-input-bg:          #0E2820;
    --color-input-border:      #1F5A47;
    --color-input-border-focus:#5DCAA5;
    --color-input-text:        #E1F5EE;
    --color-input-placeholder: #5F7A6E;

    /* Sombras */
    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:    0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-focus: 0 0 0 3px rgba(93, 202, 165, 0.25);

    /* Indicadores */
    --color-online:            #5DCAA5;
    --color-offline:           #5F7A6E;
}

/* ───────────────────────────────────────────────────────────
 * SPACING & LAYOUT
 * ─────────────────────────────────────────────────────────── */
:root {
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* Layout */
    --sidebar-width:        240px;
    --sidebar-width-collapsed: 64px;
    --topbar-height:        56px;
    --content-max-width:    1400px;

    /* Transiciones */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow:   400ms ease;

    /* Z-index */
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-modal:     300;
    --z-toast:     400;
    --z-tooltip:   500;
}

/* ───────────────────────────────────────────────────────────
 * UTILIDADES BASE
 * ─────────────────────────────────────────────────────────── */
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-muted   { color: var(--color-text-3); }
.text-sm      { font-size: 13px; }
.text-xs      { font-size: 12px; }
.font-mono    { font-family: var(--font-mono); }
.hidden       { display: none !important; }

/* Scrollbar personalizada */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-surface-2); }
::-webkit-scrollbar-thumb {
    background: var(--color-border-2);
    border-radius: var(--radius-md);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-border-strong); }

/* Selección de texto */
::selection {
    background: var(--color-primary-soft-2);
    color: var(--color-on-primary-soft);
}

/* Focus visible (accesibilidad) */
*:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}