/* =============================================================
   DTS Design Tokens
   Basado en el Manual de Marca DTS (Marzo 2025)
   Paleta: #292C48 navy · #45A4B6 teal · #50357E purple · #3D699C steel
   Tipos web: League Spartan (títulos) + Poppins (cuerpo)
   Estilo: claro + colorido, inspirado en coffee-tech.com
   ============================================================= */

:root {
  /* ---------- BRAND COLORS (exactos del manual) ---------- */
  --brand-navy: #292c48;
  --brand-teal: #45a4b6;
  --brand-purple: #50357e;
  --brand-steel: #3d699c;

  /* ---------- Escalas expandidas para uso colorido ---------- */
  --navy-50: #eef0f5;
  --navy-100: #d4d8e3;
  --navy-200: #a9b1c7;
  --navy-300: #7e8aab;
  --navy-400: #53638f;
  --navy-500: #3c4771;
  --navy-600: #292c48;
  --navy-700: #1f2236;
  --navy-800: #141724;
  --navy-900: #0a0b12;

  --teal-50: #e5f4f6;
  --teal-100: #c4e6eb;
  --teal-200: #8accd6;
  --teal-300: #5eb6c3;
  --teal-400: #45a4b6;
  --teal-500: #37899a;
  --teal-600: #2a6b79;
  --teal-700: #1f5059;
  --teal-800: #13333a;
  --teal-900: #0a1b1f;

  --purple-50: #f1ecfa;
  --purple-100: #dcd0f0;
  --purple-200: #b9a2e0;
  --purple-300: #9674d0;
  --purple-400: #7348c0;
  --purple-500: #50357e;
  --purple-600: #432c69;
  --purple-700: #35235a;
  --purple-800: #211437;
  --purple-900: #110a1c;

  --steel-50: #eaf1f7;
  --steel-100: #c9dbeb;
  --steel-200: #96b8d3;
  --steel-300: #6b94b9;
  --steel-400: #4a7ba7;
  --steel-500: #3d699c;
  --steel-600: #315481;
  --steel-700: #264265;
  --steel-800: #182d47;
  --steel-900: #0b1828;

  --white: #ffffff;
  --black: #000000;
  --ink: #101324;
  --ink-soft: #2a2f44;
  --muted: #606680;
  --muted-soft: #8a90a8;
  --line: rgba(41, 44, 72, 0.1);
  --line-strong: rgba(41, 44, 72, 0.18);
  --bg: #ffffff;
  --bg-alt: #f6f8fb;
  --bg-soft: #eef2f8;

  /* ---------- SEMANTIC TOKENS ---------- */
  --color-bg: var(--bg);
  --color-bg-alt: var(--bg-alt);
  --color-bg-soft: var(--bg-soft);
  --color-bg-dark: var(--navy-700);
  --color-bg-darker: var(--navy-800);

  --color-text: var(--ink);
  --color-text-soft: var(--ink-soft);
  --color-text-muted: var(--muted);
  --color-text-on-dark: #ffffff;
  --color-text-muted-on-dark: rgba(255, 255, 255, 0.72);

  --color-primary: var(--brand-teal);
  --color-primary-hover: var(--teal-500);
  --color-primary-ink: #ffffff;

  --color-accent: var(--brand-purple);
  --color-accent-hover: var(--purple-600);

  --color-link: var(--brand-teal);
  --color-link-hover: var(--teal-600);

  --color-border: var(--line);
  --color-border-strong: var(--line-strong);

  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-sunk: var(--bg-alt);

  /* Back-compat aliases (para no romper selectores heredados si quedaran) */
  --color-primary-navy: var(--brand-navy);
  --color-primary-teal: var(--brand-teal);
  --color-secondary-purple: var(--brand-purple);
  --color-secondary-steel: var(--brand-steel);
  --bg-light: var(--bg);
  --bg-soft: var(--bg-alt);
  --bg-dark: var(--navy-700);
  --text: var(--ink);
  --text-muted: var(--muted);
  --text-on-dark: #ffffff;
  --text-muted-on-dark: rgba(255, 255, 255, 0.72);
  --border: var(--line);
  --surface: #ffffff;

  /* ---------- GRADIENTES ---------- */
  --gradient-brand: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-steel) 40%, var(--brand-teal) 100%);
  --gradient-spectrum: linear-gradient(120deg, var(--brand-purple) 0%, var(--brand-navy) 35%, var(--brand-steel) 65%, var(--brand-teal) 100%);
  --gradient-teal: linear-gradient(135deg, var(--teal-300) 0%, var(--brand-teal) 50%, var(--teal-600) 100%);
  --gradient-purple: linear-gradient(135deg, var(--purple-400) 0%, var(--brand-purple) 100%);
  --gradient-navy: linear-gradient(180deg, var(--navy-700) 0%, var(--navy-800) 100%);
  --gradient-glow:
    radial-gradient(60% 70% at 30% 30%, rgba(69, 164, 182, 0.45) 0%, transparent 65%),
    radial-gradient(55% 60% at 80% 20%, rgba(80, 53, 126, 0.35) 0%, transparent 60%),
    radial-gradient(70% 80% at 70% 100%, rgba(61, 105, 156, 0.4) 0%, transparent 70%);
  --gradient-card-teal: linear-gradient(180deg, var(--teal-50) 0%, #ffffff 100%);
  --gradient-card-purple: linear-gradient(180deg, var(--purple-50) 0%, #ffffff 100%);
  --gradient-card-steel: linear-gradient(180deg, var(--steel-50) 0%, #ffffff 100%);
  --gradient-card-navy: linear-gradient(180deg, var(--navy-50) 0%, #ffffff 100%);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: "League Spartan", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", Menlo, Monaco, Consolas, monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --fs-display: clamp(3rem, 6.5vw, 5.75rem);
  --fs-h1: clamp(2.25rem, 4.5vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 3.2vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.625rem);
  --fs-h4: 1.25rem;
  --fs-lede: clamp(1.0625rem, 1.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xsmall: 0.8125rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-base: 1.55;
  --lh-relaxed: 1.7;

  --ls-tight: -0.025em;
  --ls-normal: 0;
  --ls-wide: 0.02em;
  --ls-wider: 0.12em;
  --ls-widest: 0.22em;

  /* ---------- SPACING ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 10rem;

  /* ---------- RADII ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --radius-pill: 999px;
  --radius-blob: 42% 58% 55% 45% / 52% 48% 52% 48%;

  /* ---------- SHADOWS ---------- */
  --shadow-xs: 0 1px 2px rgba(16, 19, 36, 0.05);
  --shadow-sm: 0 2px 6px rgba(16, 19, 36, 0.06), 0 1px 2px rgba(16, 19, 36, 0.04);
  --shadow-md: 0 10px 20px rgba(16, 19, 36, 0.08), 0 2px 6px rgba(16, 19, 36, 0.04);
  --shadow-lg: 0 18px 40px rgba(16, 19, 36, 0.12), 0 4px 10px rgba(16, 19, 36, 0.05);
  --shadow-xl: 0 28px 60px rgba(16, 19, 36, 0.18);
  --shadow-teal: 0 18px 40px rgba(69, 164, 182, 0.32);
  --shadow-purple: 0 18px 40px rgba(80, 53, 126, 0.32);
  --shadow-navy: 0 18px 40px rgba(41, 44, 72, 0.28);
  --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-glow-teal: 0 0 0 6px rgba(69, 164, 182, 0.15), 0 10px 30px rgba(69, 164, 182, 0.35);

  /* ---------- LAYOUT ---------- */
  --container-xl: 1240px;
  --container-lg: 1120px;
  --container-md: 960px;
  --container-sm: 720px;
  --nav-h: 74px;

  /* ---------- MOTION ---------- */
  --ease-smooth: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.64, 0, 0.78, 0);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast: 150ms;
  --dur-base: 320ms;
  --dur-medium: 500ms;
  --dur-slow: 700ms;
  --dur-slower: 1100ms;

  /* ---------- Z-INDEX ---------- */
  --z-hide: -1;
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 30;
  --z-nav: 50;
  --z-overlay: 70;
  --z-modal: 90;
  --z-loader: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-medium: 0ms;
    --dur-slow: 0ms;
    --dur-slower: 0ms;
  }
}