/* ==========================================================================
   tokens.css — Design tokens del sistema (Grupo CR · RyR)

   Este archivo define las variables del sistema. Para añadir una marca nueva,
   crear un selector [data-brand="X"] y redefinir los tokens de marca.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------ */
  /* SISTEMA — compartido por todas las marcas                          */
  /* ------------------------------------------------------------------ */

  /* Spacing (escala 8px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Font family */
  --font-sans: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Type scale (con clamp para responsive sin media queries) */
  --font-display: clamp(2.75rem, 7vw + 1rem, 5.5rem);    /* hero h1 — billboard */
  --font-h1: clamp(2rem, 3.5vw + 0.75rem, 3rem);         /* section title */
  --font-h2: clamp(1.625rem, 2vw + 0.75rem, 2rem);       /* subsection */
  --font-h3: clamp(1.25rem, 1vw + 0.75rem, 1.5rem);
  --font-h4: 1.125rem;
  --font-body: 1rem;
  --font-small: 0.9375rem;
  --font-caption: 0.875rem;
  --font-micro: 0.75rem;

  /* Line heights */
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-base: 1.5;
  --lh-relaxed: 1.65;

  /* Container */
  --container-max: 1200px;
  --container-px: clamp(1.5rem, 4vw, 3rem);

  /* Shadow base color (slate-tinted, brands can override) */
  --shadow-rgb: 35, 46, 55;
  --shadow-sm: 0 4px 12px rgba(var(--shadow-rgb), 0.10);
  --shadow-md: 0 4px 16px rgba(var(--shadow-rgb), 0.14);
  --shadow-fl: 0 4px 16px rgba(var(--shadow-rgb), 0.18);
  --shadow-press: inset 0 0 0 999px rgba(var(--shadow-rgb), 0.08);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* Header height */
  --header-h-mobile: 72px;
  --header-h-desktop: 88px;

  /* Z-index scale */
  --z-base: 1;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* ====================================================================== */
/* MARCA: CR Ocean Air                                                    */
/* (default — aplica a :root para que funcione sin atributo data-brand)   */
/* ====================================================================== */

:root,
[data-brand="cr"] {
  /* Slate (neutrales) */
  --slate-50:  #F0F8FF;
  --slate-100: #E5EEF5;
  --slate-200: #D2DCE4;
  --slate-300: #B8C3CB;
  --slate-400: #94A0AA;
  --slate-500: #73818C;
  --slate-600: #64727E;
  --slate-700: #58656F;  /* cliente literal */
  --slate-800: #374754;  /* cliente literal */
  --slate-900: #232E37;
  --slate-950: #111B22;

  /* Blue (marca) */
  --blue-50:  #CCFBFF;
  --blue-100: #BCEFFF;
  --blue-200: #A1DCFF;
  --blue-300: #7AC0FF;
  --blue-400: #4CA0FF;
  --blue-500: #0380EE;   /* cliente literal — color de marca */
  --blue-600: #006ACF;   /* CTA primario, AA */
  --blue-700: #0052AD;   /* link, CTA strong, AAA */
  --blue-800: #003C8D;
  --blue-900: #00256E;
  --blue-950: #000F50;

  /* Estado / utilitario */
  --color-white: #FFFFFF;
  --color-wa-green: #25D366;

  /* Roles semánticos */
  --color-bg:            var(--color-white);
  --color-bg-subtle:     var(--slate-50);
  --color-text:          var(--slate-700);
  --color-text-strong:   var(--slate-900);
  --color-text-muted:    var(--slate-600);
  --color-text-tertiary: var(--slate-500);
  --color-text-on-dark:  var(--color-white);
  --color-text-on-dark-muted: var(--slate-300);
  --color-border:        var(--slate-200);
  --color-border-strong: var(--slate-500);
  --color-divider:       var(--slate-100);
  --color-brand:         var(--blue-500);
  --color-cta:           var(--blue-600);
  --color-cta-hover:     var(--blue-700);
  --color-link:          var(--blue-700);
  --color-link-hover:    var(--blue-800);
  --color-footer-bg:     var(--slate-800);
  --color-focus-ring:    rgba(3, 128, 238, 0.45);
}