/* ============ VARIABLES DE MARCA ============ */
:root {
    --color-ink:            #2b2f32;
    --color-ink-fixed:      #2b2f32; /* superficies de marca siempre oscuras (navbar, footer...); a diferencia de --color-ink, no se invierte en modo oscuro */
    --color-bg:             #ffffff;
    --color-bg-soft:        #f5f6f7;
    --color-surface:        #ffffff;
    --color-border:         #e4e6e8;
    --color-border-strong:  #d4d7da;

    --color-text:           #2b2f32;
    --color-text-soft:      #3c4348;
    --color-text-muted:     #5b6166;
    --color-text-faint:     #8a9097;
    --color-text-ondark:    #f4f5f6;
    --color-text-onink:     rgba(244, 245, 246, 0.72);

    --color-accent:          #0047ab;
    --color-accent-hover:    #003d96;
    --color-accent-press:    #003380;
    --color-accent-subtle:   rgba(0, 71, 171, 0.10);
    --color-accent-onink:    #6ba3e8;

    --hero-bg-dark: #0c1220;

    --color-success: #16a34a;
    --color-warning: #c2820a;
    --color-danger: #c0392b;
    --color-overlay: rgba(22, 25, 28, 0.55);

    --space-2xs: 4px;
    --space-xs:  8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
    --space-2xl: 64px;
    --space-3xl: 96px;

    --font-display: 'Montserrat', system-ui, sans-serif;
    --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

    --text-xs:  0.75rem;
    --text-sm:  0.875rem;
    --text-base: 1rem;
    --text-lg:  1.125rem;
    --text-xl:  1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;
    --text-4xl: 3rem;
    --text-5xl: 3.5rem;

    --leading-tight: 1.12;
    --leading-snug:  1.32;
    --leading-base:  1.6;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(22, 25, 28, 0.06);
    --shadow-sm: 0 2px 8px rgba(22, 25, 28, 0.07);
    --shadow-md: 0 10px 30px rgba(22, 25, 28, 0.10);
    --shadow-nav: 0 8px 30px rgba(22, 25, 28, 0.20);
    --shadow-plan: 0 26px 60px -18px rgba(0, 71, 171, 0.24), 0 8px 20px rgba(22, 25, 28, 0.08);
    --shadow-modal: 0 30px 80px -16px rgba(22, 25, 28, 0.35), 0 8px 24px rgba(22, 25, 28, 0.18);

    --transition-fast: 140ms ease;
    --transition-base: 240ms ease;
    --transition-slow: 420ms cubic-bezier(0.4, 0, 0.2, 1);

    --content-max: 1280px;
    --content-pad: 20px;
    --navbar-h: 64px;
    --navbar-gap: 16px;
}

/* ============ MODO OSCURO DEL SISTEMA ============ */
@media (prefers-color-scheme: dark) {
    :root {
        --color-ink:           #d8dadd;
        --color-bg:            #17181a;
        --color-bg-soft:       #1e2023;
        --color-surface:       #202226;
        --color-border:        #2d3033;
        --color-border-strong: #3a3e42;
        --color-text:          #eef1f4;
        --color-text-soft:     #cfd3d7;
        --color-text-muted:    #9aa0a6;
        --color-text-faint:    #6b7075;
        --color-accent-onink:  #7fb0ee;
    }
}