/* =========================================================================
   variables.css — Design tokens de REBLE.
   Referencia: REBLE_Base_Marca_Web_Claude.md §11 y CLAUDE.md §8.

   Sistema pequeño y escalable. Todo lo que se repite en la web debería
   salir de aquí. Añadir tokens solo cuando exista una necesidad real.
   ========================================================================= */

:root {

    /* ===== Color · paleta REBLE ========================================= */
    --color-carbon: #171715;   /* texto, fondos oscuros, estructura */
    --color-piedra: #E8E4DC;   /* superficies, separadores */
    --color-cal:    #F7F5EF;   /* fondo principal */
    --color-cereal: #C9A65A;   /* acento cálido, identidad */
    --color-azul:   #315CFF;   /* interacción: enlaces, botones, foco */

    /* Derivados de apoyo */
    --color-azul-hover: #2549E0;   /* azul un punto más oscuro para hover */
    --color-on-accent:  #FFFFFF;   /* texto sobre Azul REBLE (contraste AA) */

    /* ===== Color · roles semánticos =================================== */
    --bg-page:      var(--color-cal);
    --bg-surface:   var(--color-piedra);
    --bg-invert:    var(--color-carbon);

    --text-strong:  var(--color-carbon);
    --text-muted:   rgb(23 23 21 / 0.65);
    --text-invert:  var(--color-cal);

    --accent:       var(--color-azul);
    --accent-hover: var(--color-azul-hover);

    --border:        rgb(23 23 21 / 0.14);
    --border-strong: rgb(23 23 21 / 0.30);

    /* Sobre fondo Carbón (secciones oscuras): acento legible y línea fina */
    --accent-on-dark: #6E8CFF;                 /* interacción sobre Carbón (AA) */
    --border-on-dark: rgb(247 245 239 / 0.14); /* separadores sobre Carbón */

    --selection-bg:   var(--color-cereal);
    --selection-text: var(--color-carbon);

    --focus-ring: var(--color-azul);

    /* ===== Tipografía ================================================= */
    /* Pila del sistema como fallback. La fuente definitiva de REBLE
       (dirección: Satoshi o una sans contemporánea equivalente) se
       activará más adelante redefiniendo SOLO --font-primary:
         --font-primary: "Satoshi", var(--font-sans);
       No se cargan fuentes externas todavía. */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
                 Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;
    --font-primary: var(--font-sans);

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;

    /* ===== Tamaños de texto · fluidos, mobile-first ================= */
    --fs-100: 0.8125rem;                                       /* 13px · labels técnicos */
    --fs-200: 1rem;                                            /* 16px · cuerpo base */
    --fs-300: clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);    /* entradilla */
    --fs-400: clamp(1.375rem, 1.24rem + 0.65vw, 1.75rem);      /* h3 */
    --fs-500: clamp(1.75rem, 1.45rem + 1.5vw, 2.75rem);        /* h2 */
    --fs-600: clamp(2.25rem, 1.70rem + 2.75vw, 4rem);          /* h1 */

    /* ===== Interlineado ============================================= */
    --lh-tight: 1.12;   /* titulares */
    --lh-snug:  1.3;    /* subtítulos */
    --lh-base:  1.6;    /* texto corrido */

    /* ===== Tracking =============================================== */
    --tracking-tight: -0.02em;   /* titulares grandes */
    --tracking-wide:   0.08em;   /* eyebrows y labels en mayúsculas */

    /* ===== Espaciado ============================================= */
    /* Escala de elemento: 3xs … 2xl */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs:  0.75rem;
    --space-sm:  1rem;
    --space-md:  1.5rem;
    --space-lg:  2.5rem;
    --space-xl:  4rem;
    --space-2xl: 6rem;
    /* Ritmo de página (responsive): sección y bloque dentro de sección */
    --space-section:    clamp(3rem, 7vw, 7.5rem);                    /* padding vertical de sección */
    --space-section-sm: clamp(2.5rem, 5vw, 5rem);                    /* sección compacta / pausa editorial */
    --space-block:      clamp(var(--space-lg), 5vw, var(--space-xl)); /* separación entre bloques de una sección */

    /* ===== Contenedores ========================================= */
    --container-max:    75rem;   /* 1200px · ancho general */
    --container-narrow: 46rem;   /* ~736px · ancho de lectura */
    --container-pad:    clamp(1.25rem, 5vw, 3rem);   /* padding lateral responsive */

    /* ===== Bordes y radios ===================================== */
    --border-width: 1px;
    --radius-sm:   2px;
    --radius-md:   6px;
    --radius-pill: 999px;

    /* ===== Transiciones ======================================= */
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* preciso, sin rebote */

    /* ===== Z-index =========================================== */
    --z-base:    1;
    --z-header:  100;
    --z-overlay: 1000;
}

/* Breakpoints de referencia para las media queries.
   No pueden usarse como custom properties dentro de la condición @media,
   por eso se documentan aquí y se escriben literalmente donde hagan falta:
     sm : 40rem  (640px)
     md : 48rem  (768px)
     lg : 64rem  (1024px)
     xl : 90rem  (1440px)
*/