/* ============================================================
   Inglés 360 — Design Tokens v6.5
   Fuente de verdad de diseño. NO inventar valores fuera de aquí.
   ============================================================ */

:root {
  /* ----------  Color · Navy / Blue  ---------- */
  --i360-navy-950: #060A22;
  --i360-navy-900: #0A1340;
  --i360-navy-800: #0F1B5E;
  --i360-navy-700: #1A2A8A;
  --i360-blue-600: #2E46D9;
  --i360-blue-500: #4A6BFF;

  /* ----------  Color · Neón signature  ---------- */
  --i360-cyan-400:    #2BE6E0;
  --i360-cyan-300:    #5EF2C8;
  --i360-cyan-200:    #A6F7E0;
  --i360-magenta-500: #B14CFF;
  --i360-magenta-400: #D072FF;
  --i360-pink-400:    #FF5FA8;
  --i360-amber-400:   #FFB36B;
  --i360-amber-300:   #FFD7A8;

  /* ----------  Gradientes firma  ---------- */
  --i360-grad: linear-gradient(120deg, #2BE6E0 0%, #4A6BFF 45%, #B14CFF 100%);
  --i360-grad-warm: linear-gradient(120deg, #4A6BFF 0%, #B14CFF 55%, #FF5FA8 100%);
  --i360-grad-soft: linear-gradient(120deg, rgba(43,230,224,.10) 0%, rgba(74,107,255,.10) 45%, rgba(177,76,255,.10) 100%);

  /* ============================================================
     ADHD-friendly color coding por contexto.
     SIEMPRE acompañar con label, icono o forma — nunca color solo.
     ============================================================ */
  /* Tints (low-opacity backgrounds for chips/cards) */
  /* Lines (border / accent stroke) */
  /* Deep (foreground text-on-tint, must pass AA contrast against the tint over white/light) */
  /* On-deep (text on filled-deep bg, always white) */

  --route-immersion-tint:   rgba(43,230,224,0.14);
  --route-immersion-line:   #2BE6E0;
  --route-immersion-deep:   #0E8E89;
  --route-immersion-on:     #FFFFFF;

  --route-activation-tint:  rgba(74,107,255,0.14);
  --route-activation-line:  #6A85FF;
  --route-activation-deep:  #2E46D9;
  --route-activation-on:    #FFFFFF;

  --route-social-tint:      rgba(177,76,255,0.14);
  --route-social-line:      #C470FF;
  --route-social-deep:      #7A1FCB;
  --route-social-on:        #FFFFFF;

  --route-private-tint:     rgba(15,27,94,0.10);
  --route-private-line:     #2A3F8C;
  --route-private-deep:     #1A2A8A;
  --route-private-on:       #FFFFFF;

  --route-reallife-tint:    rgba(43,189,224,0.14);
  --route-reallife-line:    #2BC8E6;
  --route-reallife-deep:    #0E7A99;
  --route-reallife-on:      #FFFFFF;

  --route-overload-tint:    rgba(255,179,107,0.18);
  --route-overload-line:    #E08A3A;
  --route-overload-deep:    #A35A1F;
  --route-overload-on:      #FFFFFF;

  --route-feedback-tint:    rgba(94,242,200,0.16);
  --route-feedback-line:    #2FBD89;
  --route-feedback-deep:    #137A55;
  --route-feedback-on:      #FFFFFF;

  /* ----------  Color · Neutrals  ---------- */
  --i360-ink-900: #0A0E1F;
  --i360-ink-700: #2A2F4A;
  --i360-ink-500: #595F7E;
  --i360-ink-400: #8388A6;
  --i360-ink-300: #B6BACE;
  --i360-ink-200: #D9DCEA;
  --i360-ink-100: #ECEEF6;
  --i360-paper:   #F7F8FC;

  /* ----------  Color · Semánticos  ---------- */
  --i360-success: #1FBF7B;
  --i360-warn:    #FFB020;
  --i360-error:   #FF5C6E;
  --i360-info:    #4A6BFF;

  /* ----------  Glows  ---------- */
  --glow-cyan:    0 0 24px rgba(43,230,224,.55), 0 0 56px rgba(43,230,224,.25);
  --glow-blue:    0 0 24px rgba(74,107,255,.55), 0 0 56px rgba(74,107,255,.25);
  --glow-magenta: 0 0 24px rgba(177,76,255,.55), 0 0 56px rgba(177,76,255,.25);
  --glow-soft:    0 0 32px rgba(74,107,255,.35), 0 0 64px rgba(177,76,255,.20);

  /* ----------  Sombras  ---------- */
  --shadow-1: 0 1px 2px rgba(10,19,64,.06), 0 1px 3px rgba(10,19,64,.05);
  --shadow-2: 0 4px 12px rgba(10,19,64,.08), 0 2px 4px rgba(10,19,64,.06);
  --shadow-3: 0 12px 32px rgba(10,19,64,.12), 0 4px 8px rgba(10,19,64,.06);
  --shadow-4: 0 24px 64px rgba(10,19,64,.18), 0 8px 16px rgba(10,19,64,.08);
  --shadow-card-hover: 0 22px 48px rgba(74,107,255,.22), 0 6px 18px rgba(177,76,255,.12);

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

  /* ----------  Espaciado  ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ----------  Tipografía  ---------- */
  /* Heading display: Plus Jakarta Sans (Visual Rev 5 — premium, modern, warm) */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-hand:    'Caveat', 'Brush Script MT', cursive;

  --fs-h1:      64px;   --lh-h1:      1.05;   --tracking-h1: -0.02em;
  --fs-h2:      40px;   --lh-h2:      1.15;   --tracking-h2: -0.02em;
  --fs-h3:      26px;   --lh-h3:      1.2;
  --fs-h4:      18px;   --lh-h4:      1.3;
  --fs-eyebrow: 11px;   --tracking-eyebrow: 0.12em;
  --fs-lead:    19px;   --lh-lead:    1.6;
  --fs-body:    16px;   --lh-body:    1.5;
  --fs-small:   14px;   --lh-small:   1.5;
  --fs-meta:    12px;   --tracking-meta: 0.04em;
  --fs-hand:    38px;

  /* ----------  Motion  ---------- */
  --ease-brand: cubic-bezier(.16,.84,.3,1);
  --ease-liquid: cubic-bezier(.22,1,.36,1);
  --transition-fast: all .14s var(--ease-brand);
  --transition-base: all .24s var(--ease-brand);
  --transition-slow: all .42s var(--ease-liquid);
}

/* ============================================================
   Dark mode overrides
   ============================================================ */
[data-theme="dark"] {
  --i360-paper:   #060A22;
  --i360-ink-900: #F0F2FF;
  --i360-ink-700: #C8CCEE;
  --i360-ink-500: #8388A6;
  --i360-ink-200: #1E2444;
  --i360-ink-100: #161A36;

  /* Dark mode: brighter tints + lighter "deep" text so chips remain legible on navy */
  --route-immersion-tint:   rgba(43,230,224,0.20);
  --route-immersion-deep:   #5EF2C8;
  --route-activation-tint:  rgba(106,133,255,0.22);
  --route-activation-deep:  #A6B6FF;
  --route-social-tint:      rgba(196,112,255,0.22);
  --route-social-deep:      #E2A8FF;
  --route-private-tint:     rgba(255,255,255,0.08);
  --route-private-deep:     #C8CCEE;
  --route-reallife-tint:    rgba(43,200,230,0.22);
  --route-reallife-deep:    #7AE2FF;
  --route-overload-tint:    rgba(255,179,107,0.22);
  --route-overload-deep:    #FFD2A0;
  --route-feedback-tint:    rgba(94,242,200,0.22);
  --route-feedback-deep:    #6FE6BA;
}