/*
 * variables.css
 * Tokens de diseño globales del tema O Tinglado.
 * Este archivo se carga primero. No contiene reglas de estilo, solo custom properties.
 */

:root {

	/* -------------------------------------------------- */
	/* COLORES PRINCIPALES                                  */
	/* -------------------------------------------------- */

	--ot-blue:          #007bc4;
	--ot-blue-dark:     #005f9a;
	--ot-blue-darker:   #004677;
	--ot-blue-light:    #3399d4;
	--ot-blue-lighter:  #e6f3fa;

	--ot-white:         #ffffff;
	--ot-black:         #0d0d0d;

	/* -------------------------------------------------- */
	/* COLORES SEMÁNTICOS                                   */
	/* -------------------------------------------------- */

	--ot-color-text:        var(--ot-blue);
	--ot-color-bg:          var(--ot-white);
	--ot-color-text-muted:  #4a7ea0;
	--ot-color-border:      #cce4f3;
	--ot-color-surface:     #f0f7fc;

	/* Header y footer invierten la paleta */
	--ot-color-header-bg:   var(--ot-blue);
	--ot-color-header-text: var(--ot-white);
	--ot-color-footer-bg:   var(--ot-blue);
	--ot-color-footer-text: var(--ot-white);

	/* -------------------------------------------------- */
	/* TIPOGRAFÍA                                           */
	/* -------------------------------------------------- */

	--ot-font-sans:    'XuntaSans', system-ui, -apple-system, sans-serif;
	--ot-font-mono:    ui-monospace, 'Courier New', monospace;

	/* Escala tipográfica (fluid mediante clamp) */
	--ot-text-xs:     0.75rem;    /* 12px */
	--ot-text-sm:     0.875rem;   /* 14px */
	--ot-text-base:   1rem;       /* 16px */
	--ot-text-md:     1.125rem;   /* 18px */
	--ot-text-lg:     1.25rem;    /* 20px */
	--ot-text-xl:     1.5rem;     /* 24px */
	--ot-text-2xl:    clamp(1.75rem, 3vw, 2.25rem);
	--ot-text-3xl:    clamp(2rem, 4vw, 3rem);
	--ot-text-4xl:    clamp(2.5rem, 6vw, 4.5rem);

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

	/* Interlineado */
	--ot-leading-tight:  1.2;
	--ot-leading-snug:   1.4;
	--ot-leading-normal: 1.6;
	--ot-leading-loose:  1.8;

	/* Letter spacing */
	--ot-tracking-tight:  -0.02em;
	--ot-tracking-normal:  0;
	--ot-tracking-wide:    0.06em;
	--ot-tracking-wider:   0.12em;
	--ot-tracking-widest:  0.18em;

	/* -------------------------------------------------- */
	/* ESPACIADO                                            */
	/* -------------------------------------------------- */

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

	/* -------------------------------------------------- */
	/* LAYOUT                                               */
	/* -------------------------------------------------- */

	--ot-max-width:       1280px;
	--ot-max-width-text:  720px;
	--ot-gutter:          2rem;
	--ot-gutter-sm:       1rem;

	/* Header — móbil 96px (inclúe 16px padding vertical no enlace do logo); escritorio 112px */
	--ot-header-height:   96px;

	/* -------------------------------------------------- */
	/* CONTENEDOR                                           */
	/* Arquitectura de contenedor con ancho máximo y       */
	/* padding lateral fijo. Uso: clase .contenedor        */
	/* -------------------------------------------------- */

	--contenedor-width:    1184px;   /* ancho máximo del contenido */
	--contenedor-padding:  16px;     /* padding lateral (mobile y desktop) */

	/* Espazo vertical entre bloques/seccións (blog, etc.) — móbil 60px; escritorio 100px */
	--ot-gap-seccion: 60px;

	/* -------------------------------------------------- */
	/* BORDES Y RADIOS                                      */
	/* -------------------------------------------------- */

	--ot-radius-none:   0;
	--ot-radius-sm:     2px;
	--ot-radius-md:     4px;
	--ot-radius-lg:     8px;
	--ot-radius-full:   9999px;

	--ot-border-width:  1px;
	--ot-border-color:  var(--ot-color-border);

	/* -------------------------------------------------- */
	/* TRANSICIONES                                         */
	/* -------------------------------------------------- */

	--ot-duration-fast:   0.15s;
	--ot-duration-base:   0.22s;
	--ot-duration-slow:   0.4s;
	--ot-ease:            ease;
	--ot-transition:      var(--ot-duration-base) var(--ot-ease);

	/* -------------------------------------------------- */
	/* SOMBRAS                                              */
	/* -------------------------------------------------- */

	--ot-shadow-sm:   0 1px 3px rgba(0, 123, 196, 0.08);
	--ot-shadow-md:   0 4px 16px rgba(0, 123, 196, 0.12);
	--ot-shadow-lg:   0 12px 40px rgba(0, 123, 196, 0.18);

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

	--ot-z-header:   1000;
	--ot-z-overlay:  1100;
	--ot-z-modal:    1200;
}

@media (min-width: 960px) {
	:root {
		--ot-header-height: 112px;
		--ot-gap-seccion:     100px;
	}
}