/*
 * Ríos Espinosa — Design tokens
 * Single source of truth para color, tipografía, espaciado, radii, sombras, contenedores.
 * Consumido por main.css y todos los componentes via custom properties.
 *
 * Capa raw  → valores brutos del manual corporativo (no consumir directamente desde componentes salvo excepciones)
 * Capa semántica → aliases por intención (consumir desde componentes). Permite reasignar paletas (dark, hi-contrast) sin tocar componentes.
 */


/* ============================================================
 * @font-face — GT America self-hosted
 * Licencia web propiedad del cliente. .woff2 subseted a Latin extendido + puntuación tipográfica.
 * Light NO disponible — fallback a Regular en .rios-display hasta conseguirlo.
 * ============================================================ */

@font-face {
    font-family: "GT America";
    src: url("../fonts/GTAmerica-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "GT America";
    src: url("../fonts/GTAmerica-RegularItalic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "GT America";
    src: url("../fonts/GTAmerica-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "GT America";
    src: url("../fonts/GTAmerica-MediumItalic.woff2") format("woff2");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "GT America";
    src: url("../fonts/GTAmerica-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "GT America";
    src: url("../fonts/GTAmerica-BoldItalic.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}


:root {

    /* ============================================================
     * COLOR — capa raw (valores del manual corporativo)
     * ============================================================ */

    /* Primarios oficiales */
    --rios-blue-deep:       #001F63;   /* Pantone 2757 C · primario institucional */
    --rios-blue-light:      #F5F9FF;   /* Pantone 656 C · fondo claro */
    --rios-black:           #121214;   /* Neutral Black C · texto */
    --rios-white:           #FFFFFF;

    /* Variantes derivadas del primario */
    --rios-blue-deep-hover: #001247;   /* primario oscurecido ~10% · estados hover */
    --rios-blue-deep-pressed: #000A2E; /* primario oscurecido ~25% · estados active */

    /* Paleta complementaria · 5 tonos de azul (motivo 4-servicios + filigranas)
     * Aprox. del manual visual — VALIDAR contra PDF antes de prod. */
    --rios-blue-shade-1:    #1A2D5A;   /* oscuro   · Asesoría */
    --rios-blue-shade-2:    #324C7E;   /* medio    · Fincas */
    --rios-blue-shade-3:    #4D5F8D;   /* interm.  · Inmobiliaria */
    --rios-blue-shade-4:    #7081AC;   /* lavanda  · Legal */
    --rios-blue-shade-5:    #B8C2D9;   /* muy claro · filigranas, divisores */

    /* Escala de grises neutros (no es del manual — derivada por necesidad UI) */
    --rios-grey-50:         #FAFBFC;
    --rios-grey-100:        #F2F4F7;
    --rios-grey-200:        #E5E7EB;
    --rios-grey-300:        #D1D5DB;
    --rios-grey-400:        #9CA3AF;
    --rios-grey-500:        #6B7280;
    --rios-grey-600:        #4B5563;
    --rios-grey-700:        #374151;
    --rios-grey-800:        #1F2937;

    /* Alphas del primario (para sombras, focus rings, overlays) */
    --rios-blue-alpha-06:   rgba(0, 31, 99, 0.06);
    --rios-blue-alpha-08:   rgba(0, 31, 99, 0.08);
    --rios-blue-alpha-12:   rgba(0, 31, 99, 0.12);
    --rios-blue-alpha-25:   rgba(0, 31, 99, 0.25);


    /* ============================================================
     * COLOR — capa semántica (consumir desde componentes)
     * ============================================================ */

    /* Superficies */
    --color-bg:             var(--rios-white);
    --color-bg-alt:         var(--rios-blue-light);
    --color-bg-inverse:     var(--rios-blue-deep);
    --color-surface:        var(--rios-white);
    --color-surface-raised: var(--rios-white);
    --color-overlay:        rgba(0, 0, 0, 0.5);

    /* Texto */
    --color-text:           var(--rios-black);
    --color-text-muted:     var(--rios-grey-500);
    --color-text-subtle:    var(--rios-grey-400);
    --color-text-inverse:   var(--rios-white);
    --color-text-brand:     var(--rios-blue-deep);

    /* Bordes y divisores */
    --color-border:         var(--rios-grey-200);
    --color-border-strong:  var(--rios-grey-300);
    --color-border-brand:   var(--rios-blue-deep);
    --color-divider:        var(--rios-blue-shade-5);

    /* Marca / acción */
    --color-brand:          var(--rios-blue-deep);
    --color-brand-hover:    var(--rios-blue-deep-hover);
    --color-brand-pressed:  var(--rios-blue-deep-pressed);
    --color-focus-ring:     var(--rios-blue-alpha-25);

    /* Servicios (motivo degradado de azules — usar para gradientes, badges, secciones por área) */
    --color-service-asesoria:     var(--rios-blue-shade-1);
    --color-service-fincas:       var(--rios-blue-shade-2);
    --color-service-inmobiliaria: var(--rios-blue-shade-3);
    --color-service-legal:        var(--rios-blue-shade-4);
    --color-service-laboral:      var(--rios-blue-shade-5);


    /* ============================================================
     * TIPOGRAFÍA
     * ============================================================ */

    /* Familia */
    --font-sans: "GT America", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Escala modular base 16 / ratio 1.25 (major third) */
    --font-size-xs:   0.75rem;     /* 12px · disclaimers, micro UI */
    --font-size-sm:   0.875rem;    /* 14px · captions, meta */
    --font-size-base: 1rem;        /* 16px · cuerpo */
    --font-size-lg:   1.125rem;    /* 18px · lead, intro */
    --font-size-xl:   1.25rem;     /* 20px · h4 */
    --font-size-2xl:  1.5rem;      /* 24px · h3 */
    --font-size-3xl:  1.875rem;    /* 30px · h2 */
    --font-size-4xl:  2.5rem;      /* 40px · h1 sección */
    --font-size-5xl:  3.5rem;      /* 56px · hero título */
    --font-size-6xl:  5rem;        /* 80px · display gigante (patrón Light manual) */

    /* Pesos disponibles */
    --font-weight-regular: 400;
    --font-weight-medium:  500;
    --font-weight-bold:    700;
    /* --font-weight-light:   300; ← NO DISPONIBLE en woff2 actuales · fallback a regular */

    /* Alturas de línea */
    --leading-tight:   1.1;        /* display, hero */
    --leading-snug:    1.25;       /* h1-h3 */
    --leading-normal:  1.65;       /* cuerpo · subido de 1.55 para más aire vertical */
    --leading-relaxed: 1.75;       /* lead largo */

    /* Letter-spacing */
    --tracking-tighter: -0.02em;   /* hero display */
    --tracking-tight:   -0.01em;   /* h1 grande */
    --tracking-normal:  0;
    --tracking-wide:    0.04em;    /* caps suaves */
    --tracking-caps:    0.18em;    /* CAPS del manual (etiquetas tipo eyebrow) */


    /* ============================================================
     * ESPACIADO — base 4px / escala 8
     * ============================================================ */

    --space-0:   0;
    --space-1:   0.25rem;    /* 4 */
    --space-2:   0.5rem;     /* 8 */
    --space-3:   0.75rem;    /* 12 */
    --space-4:   1rem;       /* 16 */
    --space-5:   1.25rem;    /* 20 */
    --space-6:   1.5rem;     /* 24 */
    --space-8:   2rem;       /* 32 */
    --space-10:  2.5rem;     /* 40 */
    --space-12:  3rem;       /* 48 */
    --space-16:  4rem;       /* 64 */
    --space-20:  5rem;       /* 80 */
    --space-24:  6rem;       /* 96 */
    --space-32:  8rem;       /* 128 */

    /* Espaciados fluidos (clamp) para secciones que respiran con el viewport */
    --space-section-y:  clamp(3rem, 6vw, 6rem);   /* padding vertical de secciones */
    --space-hero-y:     clamp(4rem, 10vw, 9rem);  /* padding vertical de heroes */


    /* ============================================================
     * RADII
     * ============================================================ */

    --radius-none: 0;
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;


    /* ============================================================
     * SHADOWS — tintadas con primario (premium, evita el gris muerto)
     * El manual prohíbe sombras sobre el LOGO, no sobre componentes UI.
     * Usar con criterio: sin abuso, solo elevación funcional (cards interactivas).
     * ============================================================ */

    --shadow-sm:    0 1px 2px var(--rios-blue-alpha-06);
    --shadow-md:    0 2px 8px var(--rios-blue-alpha-08);
    --shadow-lg:    0 8px 24px var(--rios-blue-alpha-12);
    --shadow-focus: 0 0 0 3px var(--color-focus-ring);


    /* ============================================================
     * CONTENEDORES
     * ============================================================ */

    --container-sm:  720px;
    --container-md:  960px;
    --container:     1280px;       /* default — usado en .rios-container · subido de 1180 a 1280 el 27-may */
    --container-lg:  1440px;
    --container-x-padding: clamp(1.25rem, 4vw, 2rem);


    /* ============================================================
     * Z-INDEX
     * ============================================================ */

    --z-base:    1;
    --z-raised:  10;
    --z-sticky:  50;
    --z-overlay: 100;
    --z-modal:   200;
    --z-toast:   300;


    /* ============================================================
     * MOTION
     * ============================================================ */

    --duration-fast:   120ms;
    --duration-base:   200ms;
    --duration-slow:   320ms;
    --easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --easing-emphasis: cubic-bezier(0.2, 0, 0.2, 1.4);

}


/* ============================================================
 * Breakpoints (referencia documental — usar valores absolutos en @media)
 *
 *   sm:  480px
 *   md:  768px
 *   lg:  1024px
 *   xl:  1280px
 *
 * Mobile-first. Escribir media queries con min-width.
 * ============================================================ */


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-base: 0ms;
        --duration-slow: 0ms;
    }
}