/* ============================================================
   IDONEA — Design Tokens
   Sistema atómico de identidad. Cambia variables aquí, no en
   los componentes. Todo el resto del sistema lee desde aquí.
   ============================================================ */

:root {
  /* ---------- Marca: Rojo IDONEA ---------- */
  --idn-red-50:  #FFF1F3;
  --idn-red-100: #FFE0E5;
  --idn-red-200: #FFC2CC;
  --idn-red-300: #FF8896;
  --idn-red-400: #F1455D;
  --idn-red-500: #D11933;   /* Brand primary */
  --idn-red-600: #B91C2F;   /* Pantone-aprox del logo */
  --idn-red-700: #951424;
  --idn-red-800: #6E0F1A;
  --idn-red-900: #4A0A12;

  /* ---------- Pinks de soporte ---------- */
  --idn-pink-50:  #FFF7F8;
  --idn-pink-100: #FDEAEE;   /* Fondo hero certificaciones */
  --idn-pink-200: #F9D2DA;
  --idn-pink-300: #F2A8B6;

  /* ---------- Neutrales (tinte rojizo) ---------- */
  --idn-neutral-0:   #FFFFFF;
  --idn-neutral-25:  #FBF8F9;
  --idn-neutral-50:  #F7F2F4;
  --idn-neutral-100: #EFE6E9;
  --idn-neutral-200: #E0D2D7;
  --idn-neutral-300: #C6B3BA;
  --idn-neutral-400: #9A858C;
  --idn-neutral-500: #6E5D63;
  --idn-neutral-600: #4D3F44;
  --idn-neutral-700: #352B2F;
  --idn-neutral-800: #221B1E;
  --idn-neutral-900: #14101 2;
  --idn-neutral-950: #0A0708;

  /* ---------- Semánticos ---------- */
  --idn-success-50:  #ECFDF3;
  --idn-success-100: #D1FADF;
  --idn-success-500: #12B76A;
  --idn-success-600: #039855;
  --idn-success-700: #027A48;

  --idn-warning-50:  #FFFAEB;
  --idn-warning-100: #FEF0C7;
  --idn-warning-500: #F79009;
  --idn-warning-600: #DC6803;
  --idn-warning-700: #B54708;

  --idn-info-50:  #EFF8FF;
  --idn-info-100: #D1E9FF;
  --idn-info-500: #2E90FA;
  --idn-info-600: #1570EF;
  --idn-info-700: #175CD3;

  --idn-danger-50:  #FEF3F2;
  --idn-danger-100: #FEE4E2;
  --idn-danger-500: #F04438;
  --idn-danger-600: #D92D20;
  --idn-danger-700: #B42318;

  /* ---------- Roles semánticos (light) ---------- */
  --idn-bg:           var(--idn-neutral-0);
  --idn-bg-soft:      var(--idn-pink-50);
  --idn-bg-muted:     var(--idn-pink-100);
  --idn-surface:      var(--idn-neutral-0);
  --idn-surface-alt:  var(--idn-neutral-25);
  --idn-surface-sunken: var(--idn-neutral-50);

  --idn-border:       var(--idn-neutral-100);
  --idn-border-strong:var(--idn-neutral-200);
  --idn-border-brand: var(--idn-red-200);

  --idn-text:         var(--idn-neutral-800);
  --idn-text-strong:  var(--idn-neutral-900);
  --idn-text-muted:   var(--idn-neutral-500);
  --idn-text-subtle:  var(--idn-neutral-400);
  --idn-text-on-brand:#FFFFFF;
  --idn-text-on-soft: var(--idn-red-700);

  --idn-brand:        var(--idn-red-600);
  --idn-brand-hover:  var(--idn-red-700);
  --idn-brand-active: var(--idn-red-800);
  --idn-brand-soft:   var(--idn-red-50);

  /* ---------- Tipografía ---------- */
  --idn-font-sans: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --idn-font-display: 'Poppins', system-ui, sans-serif;
  --idn-font-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  --idn-text-2xs: 11px;
  --idn-text-xs:  12px;
  --idn-text-sm:  14px;
  --idn-text-md:  16px;
  --idn-text-lg:  18px;
  --idn-text-xl:  20px;
  --idn-text-2xl: 24px;
  --idn-text-3xl: 30px;
  --idn-text-4xl: 36px;
  --idn-text-5xl: 48px;
  --idn-text-6xl: 60px;

  --idn-leading-tight: 1.15;
  --idn-leading-snug:  1.3;
  --idn-leading-normal:1.5;
  --idn-leading-loose: 1.7;

  --idn-tracking-tight: -0.02em;
  --idn-tracking-normal: 0;
  --idn-tracking-wide: 0.08em;
  --idn-tracking-wider: 0.14em;

  /* ---------- Espaciado (escala 4px) ---------- */
  --idn-space-0:  0;
  --idn-space-1:  2px;
  --idn-space-2:  4px;
  --idn-space-3:  8px;
  --idn-space-4:  12px;
  --idn-space-5:  16px;
  --idn-space-6:  20px;
  --idn-space-7:  24px;
  --idn-space-8:  32px;
  --idn-space-9:  40px;
  --idn-space-10: 48px;
  --idn-space-11: 64px;
  --idn-space-12: 80px;
  --idn-space-13: 96px;

  /* ---------- Radios ---------- */
  --idn-radius-xs:  4px;
  --idn-radius-sm:  6px;
  --idn-radius-md:  10px;
  --idn-radius-lg:  14px;
  --idn-radius-xl:  20px;
  --idn-radius-2xl: 28px;
  --idn-radius-pill: 999px;

  /* ---------- Sombras ---------- */
  --idn-shadow-xs:  0 1px 2px rgba(74, 10, 18, 0.06);
  --idn-shadow-sm:  0 1px 3px rgba(74, 10, 18, 0.08), 0 1px 2px rgba(74, 10, 18, 0.04);
  --idn-shadow-md:  0 4px 12px rgba(74, 10, 18, 0.08), 0 2px 4px rgba(74, 10, 18, 0.04);
  --idn-shadow-lg:  0 12px 28px rgba(74, 10, 18, 0.10), 0 4px 8px rgba(74, 10, 18, 0.04);
  --idn-shadow-xl:  0 24px 48px rgba(74, 10, 18, 0.14);
  --idn-shadow-brand:0 8px 24px rgba(209, 25, 51, 0.28);
  --idn-shadow-focus:0 0 0 4px rgba(209, 25, 51, 0.22);
  --idn-shadow-focus-danger: 0 0 0 4px rgba(240, 68, 56, 0.22);

  /* ---------- Z-index ---------- */
  --idn-z-base: 1;
  --idn-z-dropdown: 100;
  --idn-z-sticky: 200;
  --idn-z-overlay: 800;
  --idn-z-modal: 900;
  --idn-z-toast: 1000;
  --idn-z-tooltip: 1100;

  /* ---------- Motion ---------- */
  --idn-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --idn-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --idn-dur-fast: 120ms;
  --idn-dur-base: 200ms;
  --idn-dur-slow: 320ms;
}

/* Fix typo in 900 */
:root { --idn-neutral-900: #141012; }

/* ============================================================
   Dark mode — overrides
   ============================================================ */
[data-theme="dark"] {
  --idn-bg:           #0E090B;
  --idn-bg-soft:      #160E11;
  --idn-bg-muted:     #1E1419;
  --idn-surface:      #1A1115;
  --idn-surface-alt:  #221619;
  --idn-surface-sunken: #100A0D;

  --idn-border:       #2B1F23;
  --idn-border-strong:#3A2A2F;
  --idn-border-brand: #5A1C28;

  --idn-text:         #F4E9EC;
  --idn-text-strong:  #FFFFFF;
  --idn-text-muted:   #B59CA3;
  --idn-text-subtle:  #816A71;
  --idn-text-on-brand:#FFFFFF;
  --idn-text-on-soft: #FFC2CC;

  --idn-brand:        var(--idn-red-500);
  --idn-brand-hover:  var(--idn-red-400);
  --idn-brand-active: var(--idn-red-300);
  --idn-brand-soft:   #2A1218;

  --idn-success-50:  #052E1E;
  --idn-warning-50:  #2E1F05;
  --idn-info-50:     #08203B;
  --idn-danger-50:   #2E0D0B;

  --idn-shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.4);
  --idn-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.5);
  --idn-shadow-md:  0 4px 12px rgba(0, 0, 0, 0.5);
  --idn-shadow-lg:  0 12px 28px rgba(0, 0, 0, 0.55);
  --idn-shadow-xl:  0 24px 48px rgba(0, 0, 0, 0.7);
  --idn-shadow-brand:0 8px 24px rgba(209, 25, 51, 0.4);
  --idn-shadow-focus:0 0 0 4px rgba(241, 69, 93, 0.32);
}

/* ============================================================
   Variantes visuales (3 direcciones)
   ============================================================ */
[data-variant="balanced"] {
  --idn-radius-md: 10px;
  --idn-radius-lg: 14px;
  --idn-radius-xl: 20px;
}
[data-variant="classic"] {
  /* friendly, soft, espaciada — la actual evolucionada */
  --idn-radius-md: 12px;
  --idn-radius-lg: 18px;
  --idn-radius-xl: 24px;
  --idn-radius-pill: 999px;
  --idn-bg-soft:      var(--idn-pink-50);
  --idn-bg-muted:     var(--idn-pink-100);
}
[data-variant="bold"] {
  /* más dramático, tipografía grande, contrastes fuertes */
  --idn-radius-md: 6px;
  --idn-radius-lg: 8px;
  --idn-radius-xl: 12px;
  --idn-tracking-tight: -0.035em;
}