/* =============================================================
   Ilumina Murcia — core/tokens.css
   Variables de diseño + reset minimal.
   Centralizadas aquí para poder reescribir TODA la identidad
   visual cambiando sólo este bloque.
   ============================================================= */

:root {

    /* --- Paleta institucional --- */
    /* Azul institucional (referencia Ayuntamiento de Murcia) */
    --color-primary:        #00497a;
    --color-primary-dark:   #003355;
    --color-primary-soft:   #e6eef5;   /* fondos muy claros */
    --color-primary-accent: #009ddc;   /* azul claro brillante para énfasis */

    /* Acento sostenibilidad — verde institucional */
    --color-accent:         #2d8b3e;
    --color-accent-dark:    #1f6a2c;
    --color-accent-soft:    #e8f2ea;

    /* Naranja "energía" — uso muy puntual (1 CTA destacado por página) */
    --color-energy:         #f39200;
    --color-energy-dark:    #c87600;

    /* Texto */
    --color-text:           #1a1a1a;
    --color-text-muted:     #5f6470;
    --color-text-inverse:   #ffffff;

    /* Superficies */
    --color-bg:             #ffffff;
    --color-bg-soft:        #f7f8fa;   /* gris muy suave */
    --color-bg-dark:        #00316b;   /* secciones invertidas */

    /* Bordes y separadores */
    --color-border:         #e6e8ec;
    --color-border-strong:  #c9ced8;

    /* Estados semánticos */
    --color-success:        #2d8b3e;
    --color-warning:        #f39200;
    --color-danger:         #c82333;
    --color-info:           #009ddc;


    /* --- Tipografía --- */
    --font-serif:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-sans:   'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Escala fluida (clamp = se adapta sin media queries) */
    --fs-xs:    0.8125rem;                       /* 13 px */
    --fs-sm:    0.9375rem;                       /* 15 px */
    --fs-base:  1rem;                            /* 16 px */
    --fs-lg:    1.125rem;                        /* 18 px */
    --fs-xl:    clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --fs-h3:    clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
    --fs-h2:    clamp(2rem,   1.5rem + 2.2vw, 2.75rem);
    --fs-h1:    clamp(2.5rem, 1.8rem + 3.2vw, 4rem);

    /* Pesos */
    --fw-regular:   400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;

    /* Interlineado */
    --lh-tight:     1.15;
    --lh-snug:      1.3;
    --lh-normal:    1.55;
    --lh-relaxed:   1.7;


    /* --- Espaciado (escala 4 px) --- */
    --sp-1:     0.25rem;     /* 4 px */
    --sp-2:     0.5rem;      /* 8 px */
    --sp-3:     0.75rem;     /* 12 px */
    --sp-4:     1rem;        /* 16 px */
    --sp-5:     1.5rem;      /* 24 px */
    --sp-6:     2rem;        /* 32 px */
    --sp-7:     3rem;        /* 48 px */
    --sp-8:     4rem;        /* 64 px */
    --sp-9:     6rem;        /* 96 px */
    --sp-10:    8rem;        /* 128 px */


    /* --- Radios --- */
    --radius-sm:    4px;
    --radius-md:    8px;
    --radius-lg:    12px;
    --radius-xl:    20px;
    --radius-pill:  9999px;


    /* --- Sombras --- */
    --shadow-sm:  0 1px 2px rgba(15, 23, 42, .06);
    --shadow-md:  0 4px 12px rgba(15, 23, 42, .08);
    --shadow-lg:  0 12px 32px rgba(15, 23, 42, .12);
    --shadow-xl:  0 24px 48px rgba(15, 23, 42, .15);


    /* --- Layout --- */
    --container-max:    1200px;
    --container-narrow: 880px;
    --container-wide:   1440px;

    --header-height:    72px;
    --header-height-sm: 60px;


    /* --- Transiciones --- */
    --t-fast:   .15s ease;
    --t-base:   .25s ease;
    --t-slow:   .4s ease;
}


/* =============================================================
   Reset minimal — solo lo imprescindible
   ============================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--t-fast);
}
a:hover {
    color: var(--color-primary-dark);
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

p {
    margin: 0 0 var(--sp-4);
}

/* Garantiza que el atributo HTML `hidden` siempre oculte el elemento */
[hidden] {
    display: none !important;
}

/* Respeta a quienes prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}