/* ============================================================================
   SURA — Design tokens
   Paleta, tipografía, radios, sombras y breakpoints extraídos de sura.co.
   Fuente de verdad para la plantilla y para la landing de Tibot.
   ========================================================================== */

:root {
  /* ---- Ocean (azules de marca) ---- */
  --ocean-900: #0033a0;
  --ocean-800: #26328c;
  --ocean-600: #032642;
  --ocean-500: #2d6df6;
  --ocean-300: #0471f5;
  --ocean-250: #2f80ed;
  --ocean-200: #81b1ff;
  --ocean-150: #c6d7fc;
  --ocean-100: #dfeaff;

  /* ---- Carbon (neutros) ---- */
  --carbon-800: #3f3f41;
  --carbon-600: #585f63;
  --carbon-500: #888b8d;
  --carbon-400: #b4b4b5;
  --carbon-300: #e7e7e7;
  --carbon-250: #e7e6e6;
  --carbon-200: #f4f4f4;
  --carbon-100: #f8f8f8;

  /* ---- Acentos de marca ---- */
  --sura-yellow: #e3e829;
  --sura-yellow-hover: #d7de17;
  --sura-cyan: #00aec7;
  --sura-red: #db1a40;
  --sura-coral: #ff7768;
  --sura-ice: #e5f7fb;

  /* ---- Semánticos ---- */
  --color-primary: var(--ocean-500);
  --color-primary-dark: var(--ocean-900);
  --color-primary-deep: var(--ocean-800);
  --color-on-primary: #ffffff;
  --color-cta: var(--sura-yellow);
  --color-cta-text: var(--ocean-800);
  --color-text: var(--carbon-800);
  --color-heading: var(--carbon-800);
  --color-muted: var(--carbon-600);
  --color-subtle: var(--carbon-500);
  --color-border: var(--carbon-300);
  --color-bg: #ffffff;
  --color-surface: var(--carbon-100);

  /* ---- Tipografía ---- */
  --font-sans: 'SuraSans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-script: 'Covered By Your Grace', 'SuraSans', cursive;

  /* Escala medida del sitio (px / line-height) */
  --text-display: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); /* 32 → 56 */
  --text-display-lh: clamp(2.5rem, 2.1rem + 1.8vw, 4.5rem); /* 40 → 72 */
  --text-h2: clamp(1.75rem, 1.35rem + 1.8vw, 3rem); /* 28 → 48 */
  --text-h2-lh: clamp(2.25rem, 1.85rem + 1.6vw, 3.75rem);
  --text-h3: clamp(1.5rem, 1.35rem + 0.6vw, 2rem); /* 24 → 32 */
  --text-h3-lh: clamp(2rem, 1.8rem + 0.5vw, 2.5rem);
  --text-body: 1rem; /* 16 */
  --text-body-lh: 1.5rem; /* 24 */
  --text-small: 0.875rem; /* 14 */
  --text-small-lh: 1.25rem; /* 20 */
  --text-label: 1rem;
  --text-label-lh: 1.5rem;

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Espaciado ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 7rem;

  /* ---- Radios ---- */
  --radius-sm: 0.5rem; /* 8 */
  --radius-md: 0.75rem; /* 12 */
  --radius-lg: 1rem; /* 16 */
  --radius-xl: 1.5rem; /* 24 */
  --radius-pill: 999px;

  /* ---- Sombras ---- */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 6px 20px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.14);

  /* ---- Breakpoints (referencia) ---- */
  --bp-sm: 40rem; /* 640 */
  --bp-md: 48rem; /* 768 */
  --bp-lg: 64rem; /* 1024 */
  --bp-xl: 80rem; /* 1280 */

  /* ---- Layout ---- */
  --container: 70rem; /* 1120, el nav mide 1128 en escritorio */
  --header-height: 6rem; /* 96 */
}