/*
 * Design tokens base del proyecto.
 * Paleta corporativa derivada de app-icons:
 * - Azul profundo: #052959 / #072B5A
 * - Azul marca: #0478C5 / #0C8ED8
 * - Azul claro: #B2D1DC
 * - Acento: #FDB91D
 * - Fondo claro: #F8F9FA
 */

:root {
    /* Brand palette */
    --brand-navy-900: #052959;
    --brand-navy-800: #072b5a;
    --brand-blue-600: #0478c5;
    --brand-blue-500: #0c8ed8;
    --brand-sky-200: #b2d1dc;
    --brand-gold-500: #fdb91d;
    --brand-bg-50: #f8f9fa;
    --brand-white: #ffffff;

    /* Text */
    --color-text-base: #1f2f44;
    --color-text-strong: var(--brand-navy-900);
    --color-text-muted: #5f6f82;
    --color-text-disabled: #9facb9;
    --color-text-inverse: var(--brand-white);
    --color-text-link: var(--brand-blue-600);
    --color-text-link-hover: #065da1;
    --color-text-accent: #7a5600;

    /* Surfaces */
    --color-bg-page: var(--brand-bg-50);
    --color-bg-surface: var(--brand-white);
    --color-bg-muted: #eef3f6;
    --color-bg-brand-soft: #e6f2f9;

    /* Buttons */
    --color-button-secondary-background: var(--brand-gold-500);
    --color-button-secondary-background-hover: #e3a400;
    --color-button-secondary-text: #2f2300;
    --color-button-tertiary-background: #2f7d4f;
    --color-button-tertiary-background-hover: #256741;
    --color-button-tertiary-text: var(--brand-white);

    /* Borders */
    --color-border-base: #d6e2ea;
    --color-border-strong: #b2d1dc;
    --color-border-focus: var(--brand-blue-500);

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(5, 41, 89, 0.08);
    --shadow-sm: 0 3px 8px rgba(5, 41, 89, 0.11);
    --shadow-md: 0 10px 24px rgba(5, 41, 89, 0.16);

    /* Radius and spacing */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;

    /* Motion */
    --transition-fast: 140ms ease;
    --transition-base: 220ms ease;

    /* Typography */
    --font-family-base: "Source Sans 3", "Segoe UI", Tahoma, sans-serif;
    --font-family-display: "Barlow", "Source Sans 3", "Segoe UI", Tahoma, sans-serif;
}

html,
body {
    background: var(--color-bg-page);
    color: var(--color-text-base);
    font-family: var(--font-family-base);
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-text-strong);
    font-family: var(--font-family-display);
    letter-spacing: 0.01em;
}

a {
    color: var(--color-text-link);
    transition: color var(--transition-fast);
}

a:hover,
a:focus {
    color: var(--color-text-link-hover);
}

:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

/* Text helpers */
.text-base {
    color: var(--color-text-base);
}

.text-strong {
    color: var(--color-text-strong);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-disabled {
    color: var(--color-text-disabled);
}

.text-accent {
    color: var(--color-text-accent);
}

/* Borders and elevations */
.border-base {
    border: 1px solid var(--color-border-base);
}

.border-strong {
    border: 1px solid var(--color-border-strong);
}

.shadow-xs {
    box-shadow: var(--shadow-xs);
}

.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

/* Generic surfaces */
.surface {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-md);
}

.surface-muted {
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-md);
}