/* ==========================================================================
   Asistente IA Pymes · Tokens
   Primitivas → semánticos. Los componentes usan SOLO tokens semánticos.
   Mobile first: valores base = mobile (< 768 px).
   ========================================================================== */

:root {
  /* --- Color · primitivas --- */
  --color-orange-500: #FF6D1C;   /* CTA, acento */
  --color-orange-400: #F2800D;   /* hover CTA */
  --color-orange-700: #B84A00;   /* texto naranja sobre claro (5.2:1) */
  --color-orange-800: #8A3700;
  --color-orange-100: #FFE9DB;   /* fondo de icono */
  --color-orange-50:  #FFF1E5;   /* placeholder [ ] */
  --color-navy-900:   #101222;
  --color-navy-800:   #282A39;
  --color-neutral-600:#4A4C5C;
  --color-neutral-300:#C9CBD6;
  --color-neutral-200:#E4E5EA;
  --color-neutral-100:#F6F6F6;
  --color-blue-50:    #E5F2FF;
  --color-blue-600:   #5B7FA8;
  --color-white:      #FFFFFF;
  --color-red-600:    #B42318;
  --color-red-50:     #FDECEA;
  --color-green-700:  #1F7A4D;
  --color-green-50:   #E8F5EE;
  /* Gráfico del ejemplo visual (Figma) */
  --color-chart-blue:  #6699E0;
  --color-chart-paper: #F8F8F4;
  --color-chart-grey:  #777A74;   /* 4.1:1 sobre paper, a 8 px: no llega a AA · decisión de diseño */
  --color-chart-line:  #DDE1DA;
  --color-chart-ink:   #171916;

  /* --- Color · semánticos --- */
  --text-primary:        var(--color-navy-900);     /* 18.6:1 */
  --text-secondary:      var(--color-navy-800);     /* 14.2:1 */
  --text-muted:          var(--color-neutral-600);  /* 8.5:1 */
  --text-accent:         var(--color-orange-700);   /* 5.2:1 (4.8 sobre bg-alt) */
  --text-accent-bright:  var(--color-orange-500);   /* solo etiqueta del hero: 2.9:1, no llega a AA · decisión de diseño */
  --text-on-dark:        var(--color-white);
  --text-on-dark-muted:  var(--color-neutral-300);  /* 11.5:1 sobre navy */
  --text-on-dark-accent: var(--color-orange-500);   /* 6.6:1 sobre navy */
  --text-on-cta:         var(--color-white);        /* decisión de diseño (Figma): 2.9:1, no llega a AA */
  --text-error:          var(--color-red-600);
  --text-success:        var(--color-green-700);
  --text-chart:          var(--color-chart-grey);
  --text-chart-title:    var(--color-chart-ink);

  --bg-page:        var(--color-white);
  --bg-alt:         var(--color-neutral-100);
  --bg-info:        var(--color-blue-50);
  --bg-dark:        var(--color-navy-900);
  --bg-dark-raised: var(--color-navy-800);
  --bg-cta:         var(--color-orange-500);
  --bg-cta-hover:   var(--color-orange-400);
  --bg-icon:        var(--color-orange-100);
  --bg-placeholder: var(--color-orange-50);
  --bg-placeholder-dark: #2A1D1A;
  --bg-error:       var(--color-red-50);
  --bg-success:     var(--color-green-50);
  --bg-chart:       var(--color-chart-paper);
  --bg-chart-bar:   var(--color-chart-blue);

  --border-default:     var(--color-neutral-200);
  --border-input:       var(--color-neutral-600);
  --border-strong:      var(--color-navy-900);
  --border-placeholder: var(--color-orange-700);
  --border-placeholder-dark: #FF8A47;
  --border-error:       var(--color-red-600);
  --border-success:     var(--color-green-700);
  --border-image-slot:  var(--color-blue-600);
  --border-chart:       var(--color-chart-line);
  --focus-ring:         var(--color-navy-900);
  --focus-ring-on-dark: var(--color-white);

  /* --- Tipografía · Poppins --- */
  --font-family: "Poppins", system-ui, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-display: 32px;   /* h1 · desktop 56 */
  --fs-h2:      28px;   /* desktop 40 */
  --fs-h3:      20px;   /* desktop 24 */
  --fs-figure:  56px;   /* cifra caso · desktop 80 */
  --fs-price:   34px;   /* desktop 40 (48 destacada) */
  --fs-body-lg: 18px;   /* desktop 20 */
  --fs-body:    18px;   /* base en todas las vistas */
  --fs-body-sm: 16px;
  --fs-caption: 14px;
  --fs-micro:   13px;

  --lh-display: 1.15;
  --lh-heading: 1.22;
  --lh-h3:      1.3;
  --lh-body:    1.6;
  --lh-tight:   1.1;

  /* --- Espaciado · base 8 --- */
  --space-0-5: 4px;
  --space-1:   8px;
  --space-1-5: 12px;
  --space-2:   16px;
  --space-3:   24px;
  --space-4:   32px;
  --space-5:   40px;
  --space-6:   48px;
  --space-7:   56px;
  --space-8:   64px;
  --space-10:  80px;
  --space-12:  96px;
  --space-15:  120px;

  /* --- Radios · máximo 16; los elementos pequeños bajan en proporción hasta 4 --- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-full: 999px;     /* solo círculos y píldoras */
  --radius-control: var(--radius-sm);   /* botones y campos */

  /* --- Sombras --- */
  --shadow-sm: 0 1px 2px rgba(16, 18, 34, 0.06);
  --shadow-md: 0 8px 24px rgba(16, 18, 34, 0.10);
  --shadow-lg: 0 16px 40px rgba(16, 18, 34, 0.14);

  /* --- Grid y layout --- */
  --grid-columns: 4;
  --grid-gutter:  16px;
  --grid-margin:  16px;
  /* 1440 hasta 1440 de ventana; crece en continuo hasta 1680 a 1920 (contenido útil 1200 → 1440) */
  --container-max: clamp(1440px, calc(720px + 50vw), 1680px);
  --section-py:   var(--space-7);   /* 56 · desktop 96 */
  --block-gap:    var(--space-2);   /* separación interna de sección */
  --header-h:     64px;             /* desktop 88 */

  /* --- Controles --- */
  --tap-min:   44px;
  --control-h: 56px;
  --control-h-sm: 48px;
  --focus-width: 3px;
  --focus-offset: 3px;

  /* --- Movimiento --- */
  --duration-fast: 150ms;
  --duration-base: 200ms;
}

/* Tablet ≥ 768 */
@media (min-width: 768px) {
  :root {
    --grid-columns: 8;
    --grid-gutter:  24px;
    --grid-margin:  40px;
    --fs-display: 44px;
    --fs-h2:      34px;
    --fs-h3:      22px;
    --fs-body-lg: 20px;
    --fs-figure:  72px;
    --section-py: var(--space-10);
    --block-gap:  var(--space-3);
  }
}

/* Desktop ≥ 1024 */
@media (min-width: 1024px) {
  :root {
    --grid-columns: 12;
    --grid-gutter:  24px;
    --grid-margin:  64px;
    --fs-display: 56px;
    --fs-h2:      40px;
    --fs-h3:      24px;
    --fs-figure:  80px;
    --fs-price:   40px;
    --lh-display: 1.12;
    --lh-heading: 1.2;
    --section-py: var(--space-12);
    --block-gap:  var(--space-5);
    --header-h:   88px;
  }
}

/* Desktop ancho ≥ 1280 · margen de diseño 120 (contenedor 1200 a 1440) */
@media (min-width: 1280px) {
  :root { --grid-margin: 120px; }
}