/* ==========================================================================
   AMBITON GLOBAL GROUP — DESIGN SYSTEM TOKENS
   v1.0 · Author: Equipo Élite · Last update: 2026-05-04
   --------------------------------------------------------------------------
   Filosofía: Diseño Atómico. Estos tokens son los ÁTOMOS.
   Inspiración: Coinbase (financial-grade trust) + identidad propia Ambiton.
   Reglas: Mobile-first · Semántica · A11y AAA en color de marca sobre blanco.
   ========================================================================== */

:root {
  /* ====================================================================
     1. PALETA DE COLOR — ROLES SEMÁNTICOS (no nombres de color)
     -------------------------------------------------------------------- */

  /* Brand · Identidad Ambiton */
  --color-brand-primary:        #24318D;   /* Ambiton Blue · CTA, links, headlines de marca */
  --color-brand-primary-hover:  #1A2570;   /* -10% L · hover/pressed states */
  --color-brand-primary-soft:   #EEF0F8;   /* Tinte muy claro · backgrounds sutiles */

  --color-brand-accent:         #00E5FF;   /* Cyan vibrante · acentos puntuales, NO body */
  --color-brand-accent-hover:   #00B8CC;   /* -15% L · hover sobre accent */
  --color-brand-accent-soft:    #E0FBFF;   /* Background de bloques destacados */

  /* Neutrales · Escala de grises calibrada */
  --color-neutral-0:    #FFFFFF;   /* Surface primary */
  --color-neutral-50:   #F7F8FA;   /* Surface secondary (light alt) */
  --color-neutral-100:  #EEF0F4;   /* Surface tertiary, dividers light */
  --color-neutral-200:  #D9DCE3;   /* Borders default */
  --color-neutral-300:  #B3B9C5;   /* Borders strong, disabled text */
  --color-neutral-400:  #8892B0;   /* Slate · captions, metadata, icons UI */
  --color-neutral-500:  #5A647D;   /* Body secondary text */
  --color-neutral-600:  #3D465C;   /* Body primary text dark surfaces */
  --color-neutral-700:  #1F2438;   /* Headings sobre claro */
  --color-neutral-900:  #0A0D1A;   /* Near-black · dark sections, max contrast */

  /* Estados funcionales */
  --color-success:  #0E7C3A;
  --color-warning:  #B8590B;
  --color-danger:   #B42318;
  --color-info:     var(--color-brand-primary);

  /* Tokens semánticos — usar SIEMPRE estos en componentes */
  --bg-page:           var(--color-neutral-0);
  --bg-surface-alt:    var(--color-neutral-50);
  --bg-surface-dark:   var(--color-neutral-900);
  --bg-brand:          var(--color-brand-primary);
  --bg-accent:         var(--color-brand-accent);

  --text-primary:      var(--color-neutral-900);   /* Body sobre claro · 16.5:1 ✅ AAA */
  --text-secondary:    var(--color-neutral-500);   /* Body secundario · 7.2:1 ✅ AAA */
  --text-muted:        var(--color-neutral-400);   /* Captions, metadata · 3.5:1 — solo ≥18px */
  --text-on-brand:     var(--color-neutral-0);     /* Sobre azul de marca */
  --text-on-dark:      var(--color-neutral-0);
  --text-link:         var(--color-brand-primary);
  --text-link-hover:   var(--color-brand-primary-hover);

  --border-subtle:     var(--color-neutral-100);
  --border-default:    var(--color-neutral-200);
  --border-strong:     var(--color-neutral-300);
  --border-brand:      var(--color-brand-primary);


  /* ====================================================================
     2. TIPOGRAFÍA — General Sans (display) + Satoshi (UI/body)
     --------------------------------------------------------------------
     Sistema dual del Indian Type Foundry. Mismo foundry = harmonía
     métrica perfecta + un solo request al CDN. Estética geométrica
     moderna con personalidad propia (no sobre-usada como Inter).
     - General Sans  →  hero headlines, display, H1–H4
     - Satoshi       →  UI, body, formularios, navegación, microcopy
     -------------------------------------------------------------------- */

  --font-display:  "General Sans", "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:     "Satoshi", "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Pesos disponibles · alineados con ambas fuentes */
  --fw-light:       300;   /* Satoshi Light */
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;   /* Solo General Sans · Satoshi salta a 700 */
  --fw-bold:        700;
  --fw-extrabold:   700;   /* Tope práctico de General Sans 700 */
  --fw-black:       900;   /* Solo Satoshi · acentos puntuales */

  /* Escala tipográfica · base 16px · ratio 1.25 (Major Third) — fluida con clamp() */
  --fs-display-xl:  clamp(2.5rem,  4vw + 1rem, 5rem);     /* 40 → 80px · Hero H1 */
  --fs-display-lg:  clamp(2rem,    3vw + 1rem, 4rem);     /* 32 → 64px · H1 secciones */
  --fs-display-md:  clamp(1.75rem, 2.5vw + .8rem, 3.25rem);/* 28 → 52px */
  --fs-h2:          clamp(1.5rem,  1.5vw + .8rem, 2.25rem); /* 24 → 36px */
  --fs-h3:          clamp(1.25rem, 1vw + .7rem, 1.75rem); /* 20 → 28px */
  --fs-h4:          1.25rem;   /* 20px */
  --fs-lead:        1.125rem;  /* 18px · subtítulos / lead text */
  --fs-body:        1rem;      /* 16px · body */
  --fs-small:       0.875rem;  /* 14px · captions */
  --fs-micro:       0.75rem;   /* 12px · legal, metadata */

  /* Line-heights */
  --lh-tight:       1.05;   /* Display headlines */
  --lh-snug:        1.2;    /* Sub-headings */
  --lh-base:        1.5;    /* Body */
  --lh-relaxed:     1.65;   /* Reading-heavy */

  /* Letter-spacing */
  --ls-tight:       -0.02em;   /* Display */
  --ls-base:        0;
  --ls-wide:        0.04em;    /* Captions UPPERCASE */
  --ls-wider:       0.08em;


  /* ====================================================================
     3. ESPACIADO — Sistema 4/8 (base 8px)
     -------------------------------------------------------------------- */

  --space-0:    0;
  --space-1:    0.25rem;   /* 4px  · espaciado interno mínimo */
  --space-2:    0.5rem;    /* 8px  */
  --space-3:    0.75rem;   /* 12px */
  --space-4:    1rem;      /* 16px · base */
  --space-5:    1.5rem;    /* 24px */
  --space-6:    2rem;      /* 32px */
  --space-7:    3rem;      /* 48px */
  --space-8:    4rem;      /* 64px · separación de secciones */
  --space-9:    6rem;      /* 96px · padding vertical de section */
  --space-10:   8rem;      /* 128px · hero */
  --space-11:   12rem;     /* 192px · landing dramático */


  /* ====================================================================
     4. LAYOUT · Containers & Grid
     -------------------------------------------------------------------- */

  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1440px;     /* default desktop */
  --container-4k:   1920px;     /* ultra-wide cap */

  --gutter-mobile:   1.25rem;   /* 20px */
  --gutter-tablet:   2rem;      /* 32px */
  --gutter-desktop:  4rem;      /* 64px */
  --gutter-wide:     6rem;      /* 96px · ≥1440px */


  /* ====================================================================
     5. BORDER RADIUS · Escala progresiva
     -------------------------------------------------------------------- */

  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    8px;          /* default cards */
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   24px;
  --radius-pill:  999px;        /* CTAs corporativos pill-shaped */
  --radius-full:  100%;


  /* ====================================================================
     6. ELEVACIÓN · Sombras minimalistas (depth via contraste, no blur)
     -------------------------------------------------------------------- */

  --shadow-xs:   0 1px 2px rgba(10, 13, 26, 0.04);
  --shadow-sm:   0 2px 4px rgba(10, 13, 26, 0.06);
  --shadow-md:   0 4px 12px rgba(10, 13, 26, 0.08);
  --shadow-lg:   0 12px 32px rgba(10, 13, 26, 0.12);
  --shadow-brand: 0 8px 24px rgba(36, 49, 141, 0.18);


  /* ====================================================================
     7. MOTION · Transiciones uniformes
     -------------------------------------------------------------------- */

  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:  150ms;
  --duration-base:  250ms;
  --duration-slow:  450ms;


  /* ====================================================================
     8. Z-INDEX · Capas controladas
     -------------------------------------------------------------------- */

  --z-base:         0;
  --z-content:      1;
  --z-sticky:       100;
  --z-header:       200;
  --z-dropdown:     300;
  --z-modal:        400;
  --z-toast:        500;
}


/* ==========================================================================
   BREAKPOINTS — Mobile-first
   --------------------------------------------------------------------------
   Uso en CSS:  @media (min-width: 768px) { ... }
   Tokens en JS: ver tokens.js (export de mismos valores)
   ========================================================================== */

/*  xs:  ≥ 400px   — phablet
    sm:  ≥ 576px
    md:  ≥ 768px   — tablet
    lg:  ≥ 1024px  — laptop
    xl:  ≥ 1280px  — desktop
    2xl: ≥ 1440px  — wide desktop
    4k:  ≥ 1920px  — ultra-wide
*/


/* ==========================================================================
   RESET MÍNIMO + DEFAULTS GLOBALES
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--text-primary);
  background-color: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  margin: 0 0 var(--space-4);
}

h1 { font-size: var(--fs-display-xl); }
h2 { font-size: var(--fs-display-lg); }
h3 { font-size: var(--fs-h2); }
h4 { font-size: var(--fs-h3); }
h5 { font-size: var(--fs-h4); }
h6 { font-size: var(--fs-lead); font-weight: var(--fw-semibold); }

p { margin: 0 0 var(--space-4); max-width: 65ch; }

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--text-link-hover); text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* Accesibilidad — respeta preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}