/**
 * Design tokens — Renegades School of Jiu Jitsu
 * -----------------------------------------------------------------------
 * Identidad: fondo negro total, tipografía blanca, grises para acentos.
 * Ángulos rectos / agresivos. Sin colores de marca (carmesí/dorado).
 *
 * Tipografía:
 * - Anton → títulos
 * - League Spartan → subtítulos / eyebrows
 * - Montserrat → texto general
 */

:root {
	/* -----------------------------------------------------------------
	   1) Paleta monocromática
	----------------------------------------------------------------- */
	--rjj-color-black: #000000;
	--rjj-color-ink: #0a0a0a;
	--rjj-color-ink-soft: #141414;
	--rjj-color-charcoal: #1a1a1a;
	--rjj-color-gray-900: #222222;
	--rjj-color-gray-800: #2e2e2e;
	--rjj-color-gray-700: #3d3d3d;
	--rjj-color-gray-600: #555555;
	--rjj-color-gray-500: #6b6b6b;
	--rjj-color-gray-400: #8a8a8a;
	--rjj-color-gray-300: #b0b0b0;
	--rjj-color-gray-200: #d4d4d4;
	--rjj-color-gray-100: #e8e8e8;
	--rjj-color-white: #ffffff;

	/* -----------------------------------------------------------------
	   2) Roles semánticos
	----------------------------------------------------------------- */
	--rjj-color-bg: var(--rjj-color-black);
	--rjj-color-bg-alt: var(--rjj-color-ink);
	--rjj-color-bg-elevated: var(--rjj-color-charcoal);
	--rjj-color-bg-dark: var(--rjj-color-black);
	--rjj-color-bg-white: var(--rjj-color-white);

	--rjj-color-text: var(--rjj-color-white);
	--rjj-color-text-muted: var(--rjj-color-gray-400);
	--rjj-color-text-on-dark: var(--rjj-color-white);
	--rjj-color-text-on-dark-muted: var(--rjj-color-gray-400);
	--rjj-color-text-on-light: var(--rjj-color-black);

	--rjj-color-primary: var(--rjj-color-white);
	--rjj-color-primary-hover: var(--rjj-color-gray-200);
	--rjj-color-primary-soft: var(--rjj-color-gray-300);

	--rjj-color-accent: var(--rjj-color-gray-300);
	--rjj-color-accent-hover: var(--rjj-color-white);
	--rjj-color-highlight: var(--rjj-color-white);
	--rjj-color-secondary: var(--rjj-color-gray-600);

	--rjj-color-border: rgb(255 255 255 / 14%);
	--rjj-color-border-strong: rgb(255 255 255 / 28%);
	--rjj-color-border-on-dark: rgb(255 255 255 / 14%);

	/* -----------------------------------------------------------------
	   3) Tipografía
	----------------------------------------------------------------- */
	--rjj-font-heading: "Anton", Impact, "Arial Narrow", sans-serif;
	--rjj-font-subtitle: "League Spartan", "Arial Narrow", sans-serif;
	--rjj-font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--rjj-font-size-eyebrow: 0.75rem;
	--rjj-font-size-sm: 0.875rem;
	--rjj-font-size-base: 1rem;
	--rjj-font-size-lg: 1.125rem;
	--rjj-font-size-xl: 1.5rem;
	--rjj-font-size-2xl: clamp(2rem, 4.5vw, 3.25rem);
	--rjj-font-size-3xl: clamp(2.75rem, 8vw, 5.5rem);

	--rjj-letter-spacing-eyebrow: 0.18em;
	--rjj-letter-spacing-heading: 0.02em;
	--rjj-line-height-heading: 0.95;
	--rjj-line-height-body: 1.65;

	/* -----------------------------------------------------------------
	   4) Espaciado
	----------------------------------------------------------------- */
	--rjj-space-2xs: 6px;
	--rjj-space-xs: 10px;
	--rjj-space-sm: 18px;
	--rjj-space-md: 28px;
	--rjj-space-lg: 56px;
	--rjj-space-xl: 96px;

	/* Gap vertical estándar entre secciones (evita doble padding al apilar bloques) */
	--rjj-section-gap: var(--rjj-space-lg);
	--rjj-section-gap-compact: var(--rjj-space-md);
	--rjj-section-gap-stacked: clamp(28px, 3vw, 35px);

	--rjj-container-padding: clamp(20px, 5vw, 64px);
	--rjj-container-max: 1280px;
	--rjj-header-offset: 88px;

	/* -----------------------------------------------------------------
	   5) Forma: ángulos rectos (sin pills / sin radius suave)
	----------------------------------------------------------------- */
	--rjj-radius-sm: 0;
	--rjj-radius-md: 0;
	--rjj-radius-lg: 0;
	--rjj-radius-pill: 0;
	--rjj-transition: 220ms cubic-bezier(0.22, 1, 0.36, 1);
	--rjj-shadow-soft: 0 16px 40px rgb(0 0 0 / 45%);
	--rjj-shadow-dark: 0 28px 60px rgb(0 0 0 / 65%);

	--rjj-gradient-overlay-bottom: linear-gradient(180deg, rgb(0 0 0 / 7%) 0%, rgb(0 0 0 / 24%) 45%, rgb(0 0 0 / 41%) 100%);
	--rjj-gradient-overlay-top: linear-gradient(0deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 33%) 100%);
	--rjj-gradient-ink-deep: linear-gradient(180deg, #111111 0%, #000000 100%);
	--rjj-gradient-blaze: linear-gradient(135deg, rgb(255 255 255 / 12%) 0%, rgb(0 0 0 / 61%) 100%);

	--rjj-image-filter: contrast(1.08) brightness(0.946) saturate(0.85);
	--rjj-hero-image-filter: contrast(1.08) brightness(0.956) saturate(0.85);

	/* Tipografía legible para horarios / datos densos */
	--rjj-font-size-schedule: clamp(0.8125rem, 1.5vw, 1rem);
	--rjj-font-size-schedule-head: clamp(0.875rem, 1.7vw, 1.0625rem);

	/* Ángulos agresivos (clip / skew) */
	--rjj-clip-cut: 18px;
	--rjj-skew-accent: -12deg;
}