/* =================================================================
   ANDÉN MOBILITY — Design Tokens (v2)
   Premium mobility platform.  Mobile-first · Dark by default · SaaS-grade.

   Color philosophy:
     - Neutros tintados con sutil cool blue undertone (OLED-friendly)
     - Brand emerald saturado (Stripe/Linear-tier) con escala completa
     - Accent system: violet (info+secondary) + amber (warn) + rose (danger)
     - WCAG AA contrast en ambos modos (text-0 ≥ 7:1, text-1 ≥ 4.5:1)
     - Surfaces con elevation tonal (no shadow-based) para mejor jerarquía
   ================================================================= */

:root {
  /* Hint a los navegadores para form controls + scrollbars nativos. */
  color-scheme: dark;

  /* ====================================================================
     Brand · Emerald — saturado, vibrante, suficientemente oscuro en CTA
     para texto blanco con contraste AAA en estados normales.
     ==================================================================== */
  --brand-50:  #ecfdf5;
  --brand-100: #d1fae5;
  --brand-200: #a7f3d0;
  --brand-300: #6ee7b7;
  --brand-400: #34d399;
  --brand-500: #10b981;   /* primary · emerald-500 */
  --brand-600: #059669;
  --brand-700: #047857;
  --brand-800: #065f46;
  --brand-900: #064e3b;

  /* ====================================================================
     Surfaces — Dark mode (default).
     Curva de tonos calibrada para OLED + monitor LCD: cool undertone
     (matiz 220° HSL) que da sensación de profundidad sin sobre-saturar.
     Cada nivel +4-6 puntos de luminosidad sobre el anterior.
     ==================================================================== */
  --bg-0: #0b0d12;   /* App background — OLED-friendly near-black */
  --bg-1: #11141c;   /* Card / panel resting state */
  --bg-2: #161a25;   /* Card hover · subtle elevation */
  --bg-3: #1d2230;   /* Input bg · dropdown · floating */
  --bg-4: #262b3b;   /* High elevation · modals · tooltips */
  --bg-5: #303749;   /* Maximum elevation */

  /* Surface "elevated" with hint of brand (used for CTAs, primary cards) */
  --bg-brand-soft: rgba(16, 185, 129, 0.08);
  --bg-brand-hover: rgba(16, 185, 129, 0.14);

  /* ====================================================================
     Text — tinted warm grays for premium feel (not pure white).
     Contraste validado: text-0 ≥ 16:1 sobre bg-0, text-1 ≥ 7:1, text-2 ≥ 4.5:1.
     ==================================================================== */
  --text-0: #f4f5fa;
  --text-1: #c8cdda;
  --text-2: #8a91a3;
  --text-3: #5d6275;
  --text-disabled: #3d4252;
  --text-inverse: #0b0d12;

  /* ====================================================================
     Borders — alpha tiers for glassy/layered surfaces.
     ==================================================================== */
  --border:        rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.12);
  --border-bold:   rgba(255,255,255,0.20);
  --border-focus:  var(--brand-500);

  /* ====================================================================
     Status colors — dual-token (solid + soft bg + soft border).
     Calibrados para mantenerse legibles en bg-0 y bg-1.
     ==================================================================== */
  --success:        #22c55e;
  --success-bg:     rgba(34, 197, 94, 0.12);
  --success-border: rgba(34, 197, 94, 0.30);
  --success-text:   #6ee7b7;

  --warning:        #f59e0b;
  --warning-bg:     rgba(245, 158, 11, 0.12);
  --warning-border: rgba(245, 158, 11, 0.30);
  --warning-text:   #fcd34d;

  --danger:         #ef4444;
  --danger-bg:      rgba(239, 68, 68, 0.12);
  --danger-border:  rgba(239, 68, 68, 0.30);
  --danger-text:    #fca5a5;

  --info:           #3b82f6;
  --info-bg:        rgba(59, 130, 246, 0.12);
  --info-border:    rgba(59, 130, 246, 0.30);
  --info-text:      #93c5fd;

  /* Backwards-compat alias para CSS legacy */
  --success-soft: var(--success-bg);
  --warning-soft: var(--warning-bg);
  --danger-soft:  var(--danger-bg);
  --info-soft:    var(--info-bg);

  /* ====================================================================
     Accents — palette secundaria (violet, amber, rose, sapphire).
     ==================================================================== */
  --accent-violet:   #8b5cf6;   /* primary accent · info */
  --accent-violet-2: #a78bfa;
  --accent-amber:    #f59e0b;
  --accent-rose:     #f43f5e;
  --accent-sapphire: #3b82f6;
  --accent-cyan:     #06b6d4;

  --accent:   var(--accent-violet);
  --accent-2: var(--accent-cyan);

  --primary-soft: rgba(16, 185, 129, 0.12);
  --primary-glow: rgba(16, 185, 129, 0.40);

  /* ====================================================================
     Service tiers — Andén mobility tiers, semantic colors.
     ==================================================================== */
  --tier-standard: var(--info);
  --tier-comfort:  var(--brand-500);
  --tier-xl:       var(--accent-amber);
  --tier-premium:  var(--accent-violet);

  /* ====================================================================
     Gradients — usados con moderación, generan jerarquía premium.
     ==================================================================== */
  --gradient-brand:  linear-gradient(135deg, #10b981 0%, #059669 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(16,185,129,0.18) 0%, rgba(5,150,105,0.06) 100%);
  --gradient-accent: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
  --gradient-warm:   linear-gradient(135deg, #f59e0b 0%, #f43f5e 100%);
  --gradient-hero:   linear-gradient(135deg, #0b0d12 0%, #11141c 45%, #1d2230 100%);
  --gradient-glass:  linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
  --gradient-shimmer: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%);

  /* ====================================================================
     Shadows — sombras tintadas (cool blue) para sentido de profundidad.
     ==================================================================== */
  --shadow-xs:  0 1px 2px rgba(8, 11, 20, 0.32);
  --shadow-sm:  0 2px 4px rgba(8, 11, 20, 0.32), 0 1px 2px rgba(8, 11, 20, 0.20);
  --shadow-md:  0 4px 12px rgba(8, 11, 20, 0.40), 0 2px 4px rgba(8, 11, 20, 0.16);
  --shadow-lg:  0 12px 32px rgba(8, 11, 20, 0.48), 0 4px 8px rgba(8, 11, 20, 0.20);
  --shadow-xl:  0 24px 48px rgba(8, 11, 20, 0.55), 0 8px 16px rgba(8, 11, 20, 0.24);
  --shadow-2xl: 0 40px 80px rgba(8, 11, 20, 0.65), 0 16px 32px rgba(8, 11, 20, 0.30);

  /* Focus ring premium (uses brand color + soft glow) */
  --shadow-focus: 0 0 0 3px rgba(16, 185, 129, 0.32);
  --shadow-focus-danger: 0 0 0 3px rgba(239, 68, 68, 0.32);

  /* Inner shadow / highlight para inputs */
  --shadow-inner: inset 0 1px 0 rgba(255,255,255,0.04);

  /* ====================================================================
     Spacing — 4pt base scale.
     ==================================================================== */
  --sp-0: 0;
  --sp-1: 0.25rem;   /*  4 */
  --sp-2: 0.5rem;    /*  8 */
  --sp-3: 0.75rem;   /* 12 */
  --sp-4: 1rem;      /* 16 */
  --sp-5: 1.25rem;   /* 20 */
  --sp-6: 1.5rem;    /* 24 */
  --sp-7: 2rem;      /* 32 */
  --sp-8: 2.5rem;    /* 40 */
  --sp-9: 3rem;      /* 48 */
  --sp-10: 4rem;     /* 64 */
  --sp-11: 5rem;     /* 80 */
  --sp-12: 6rem;     /* 96 */

  /* ====================================================================
     Radii — progressive scale.
     ==================================================================== */
  --r-0: 0;
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 8px;
  --r-4: 12px;
  --r-5: 16px;
  --r-6: 20px;
  --r-7: 24px;
  --r-8: 28px;
  --r-pill: 9999px;

  /* ====================================================================
     Typography — Inter (body) + Outfit (display) + JetBrains Mono.
     Sistema SaaS premium estilo Stripe/Linear/Vercel: Inter para máxima
     legibilidad en cualquier tamaño, Outfit para titulares con personalidad,
     JetBrains Mono para código.  Calibrado para mobile y desktop.
     ==================================================================== */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --font-display: 'Outfit', 'Inter', system-ui, sans-serif;

  /* Feature settings: variantes estilísticas + tabular nums + slashed zero.
     Inter expone cv02 (round-l) y ss01 (alt-a) por defecto, cv11 (single-story-g). */
  --font-features-prose:   'cv02', 'cv11', 'ss01', 'ss03';
  --font-features-numeric: 'tnum', 'zero', 'ss01';

  --fs-2xs: 0.6875rem;  /* 11 */
  --fs-xs:  0.75rem;    /* 12 */
  --fs-sm:  0.8125rem;  /* 13 */
  --fs-base:0.875rem;   /* 14 */
  --fs-md:  0.9375rem;  /* 15 */
  --fs-lg:  1rem;       /* 16 */
  --fs-xl:  1.125rem;   /* 18 */
  --fs-2xl: 1.375rem;   /* 22 */
  --fs-3xl: 1.75rem;    /* 28 */
  --fs-4xl: 2.25rem;    /* 36 */
  --fs-5xl: 3rem;       /* 48 */
  --fs-6xl: 3.75rem;    /* 60 */

  --lh-none:  1;
  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.025em;
  --tracking-wider:    0.05em;
  --tracking-widest:   0.10em;

  /* ====================================================================
     Breakpoints (referenciables desde JS y como CSS vars).
     Mobile-first: las queries usan min-width.
     ==================================================================== */
  --bp-sm:  640px;   /* móviles grandes / phablets */
  --bp-md:  768px;   /* tablets */
  --bp-lg:  1024px;  /* laptops */
  --bp-xl:  1280px;  /* desktops */
  --bp-2xl: 1536px;  /* monitores grandes */

  /* ====================================================================
     Z indexes — stack semántico.
     ==================================================================== */
  --z-base:     1;
  --z-dropdown: 10;
  --z-sticky:   20;
  --z-fixed:    30;
  --z-overlay:  900;
  --z-modal:    1000;
  --z-popover:  1050;
  --z-toast:    1100;
  --z-tooltip:  1200;
  --z-loader:   2000;

  /* ====================================================================
     Motion — easings + durations.
     ==================================================================== */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);

  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;
  --dur-slower:  500ms;
  --dur-page:    560ms;

  /* ====================================================================
     Layout shell.
     ==================================================================== */
  --shell-sidebar-w:           260px;
  --shell-sidebar-w-collapsed:  72px;
  --shell-topbar-h:             64px;
  --shell-bottomnav-h:          68px;
  --container-max: 1440px;
  --content-max:   1240px;
  --content-narrow: 640px;

  /* Safe-area insets para iOS PWAs (notch + home indicator) */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

/* =====================================================================
   Light theme — white surfaces, deep ink text, blue-tinted shadows.
   Mantiene los mismos brand tokens; cambia sólo neutros y shadows.
   ===================================================================== */
:root[data-theme="light"] {
  color-scheme: light;

  --bg-0: #f7f8fb;   /* App background */
  --bg-1: #ffffff;   /* Card resting */
  --bg-2: #f3f5f9;   /* Subtle elevation / hover */
  --bg-3: #eaedf3;   /* Input bg */
  --bg-4: #dde2eb;   /* Modal / max elevation */
  --bg-5: #cdd3df;

  --bg-brand-soft: rgba(16, 185, 129, 0.10);
  --bg-brand-hover: rgba(16, 185, 129, 0.16);

  --text-0: #0b0d12;
  --text-1: #353a47;
  --text-2: #6b7080;
  --text-3: #9099a8;
  --text-disabled: #c5cad3;
  --text-inverse: #ffffff;

  --border:        rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.14);
  --border-bold:   rgba(15, 23, 42, 0.22);

  /* Brand mantiene los mismos valores; status idem */
  --success-text:   #047857;
  --warning-text:   #b45309;
  --danger-text:    #b91c1c;
  --info-text:      #1d4ed8;

  --gradient-hero:  linear-gradient(135deg, #ffffff 0%, #f7f8fb 45%, #eaedf3 100%);
  --gradient-glass: linear-gradient(180deg, rgba(15,23,42,0.025) 0%, rgba(15,23,42,0.005) 100%);

  --shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm:  0 2px 4px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:  0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg:  0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06);
  --shadow-xl:  0 24px 48px rgba(15, 23, 42, 0.16), 0 8px 16px rgba(15, 23, 42, 0.08);
  --shadow-2xl: 0 40px 80px rgba(15, 23, 42, 0.20), 0 16px 32px rgba(15, 23, 42, 0.10);

  --shadow-focus: 0 0 0 3px rgba(16, 185, 129, 0.22);
  --shadow-focus-danger: 0 0 0 3px rgba(239, 68, 68, 0.22);
  --shadow-inner: inset 0 1px 0 rgba(0,0,0,0.04);
}

/* =====================================================================
   Reduced motion — respeta preferencias del usuario.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   High contrast (Windows / a11y mode) — refuerza bordes.
   ===================================================================== */
@media (prefers-contrast: more) {
  :root {
    --border:        rgba(255,255,255,0.18);
    --border-strong: rgba(255,255,255,0.30);
    --border-bold:   rgba(255,255,255,0.50);
  }
  :root[data-theme="light"] {
    --border:        rgba(15,23,42,0.22);
    --border-strong: rgba(15,23,42,0.36);
    --border-bold:   rgba(15,23,42,0.55);
  }
}