/* ============================================================
   MultasInfo — Design Tokens
   Fuente única de valores. Regla de oro (Brand Book §13):
   si un valor no sale de este archivo, no entra al CSS.

   Trazabilidad Brand Book (castellano) → código (inglés):
   tinta-950→ink-950 · marino-800→navy-800 · azul-600/500→blue-600/500
   celeste-100→sky-100 · niebla-50→surface-50 · papel→paper
   borde-200→border-200 · gris-500→gray-500 · ok→success
   alerta→warning · error→danger
   ============================================================ */

@layer tokens {
  :root {
    /* ---- Color (Brand Book §5) ---- */
    --ink-950: #0a1524;
    --navy-800: #0e2a4f;
    --blue-600: #1a5bc4;
    --blue-500: #2472e8;
    --sky-100: #eaf2fd;
    --surface-50: #f6f8fb;
    --paper: #ffffff;
    --border-200: #e3e8f0;
    --gray-500: #5a6a80;

    --success-600: #0e9f6e;
    --success-700: #067a54;
    --warning-600: #d97706;
    --warning-700: #92400e;
    --danger-600: #d92d20;
    --danger-700: #b42318;

    /* Color de tercero: solo dentro de su propio elemento (BB §9.11) */
    --whatsapp-green: #25d366;

    /* ---- Tipografía (BB §6) ---- */
    --font-ui: "Instrument Sans", -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Spline Sans Mono", ui-monospace, "SF Mono", monospace;

    /* Escala fluida: 360 px → 1280 px. Rediseño UI: jerarquía pesada */
    --text-display: clamp(2.5rem, 2.01rem + 2.17vw, 3.75rem);   /* 40→60 */
    --text-h2: clamp(1.75rem, 1.51rem + 1.09vw, 2.375rem);      /* 28→38 */
    --text-h3: clamp(1.1875rem, 1.139rem + 0.22vw, 1.3125rem);  /* 19→21 */
    --text-body: 1.0625rem;      /* 17 */
    --text-secondary: 0.9375rem; /* 15 */
    --text-micro: 0.8125rem;     /* 13 */
    --text-data: 0.9375rem;      /* 15, mono */
    --text-plate: 1.5rem;        /* 24: el campo protagonista */
    --text-price: clamp(2.75rem, 2.554rem + 0.87vw, 3.25rem);    /* 44→52 */

    --weight-heading: 700;

    --leading-display: 1.05;
    --leading-heading: 1.12;
    --leading-h3: 1.3;
    --leading-body: 1.55;
    --leading-tight: 1.4;

    --tracking-display: -0.025em;
    --tracking-h2: -0.015em;
    --tracking-h3: -0.01em;
    --tracking-micro: 0.06em;
    --tracking-plate: 0.12em;

    /* ---- Espaciado (BB §7, base 4) ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;

    /* Respiración entre secciones: 80 → 128 (rediseño UI) */
    --section-padding: clamp(5rem, 4rem + 4vw, 8rem);
    --container-max: 70rem; /* 1120 */
    --gutter: clamp(1.25rem, 4vw, 2rem); /* 20→32 */
    --measure: 68ch; /* ancho máximo de lectura */

    /* ---- Radios (BB §8, ajuste institucional) ---- */
    --radius-chip: 8px;
    --radius-button: 12px;
    --radius-input: 12px;
    --radius-input-lg: 16px;
    --radius-card: 16px;
    --radius-panel: 20px;
    --radius-pill: 999px;

    /* ---- Elevación: sutil, institucional; el borde manda ---- */
    --border-300: #d7dee8;
    --shadow-1: 0 1px 2px rgb(10 21 36 / 0.05);
    --shadow-2: 0 4px 12px rgb(10 21 36 / 0.06);
    --shadow-2-up: 0 -4px 12px rgb(10 21 36 / 0.06);
    --shadow-3: 0 10px 28px rgb(14 42 79 / 0.09);

    /* ---- Motion (BB §11) ---- */
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-sweep: 450ms;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* ---- Foco ---- */
    --focus-ring: 0 0 0 3px rgb(36 114 232 / 0.35);

    /* ---- Capas ---- */
    --z-base: 0;
    --z-sticky: 10;
    --z-float: 20;
    --z-modal: 50;

    /* ---- Alturas de componentes: controles más sólidos ---- */
    --control-height-lg: 3.5rem;   /* 56: CTA hero/checkout */
    --control-height-md: 2.75rem;  /* 44: nav, sticky */
    --control-height-sm: 2.25rem;  /* 36: inline */
    --input-height: 3rem;          /* 48 */
    --plate-input-height: 4rem;    /* 64: el campo protagonista */
  }
}