/* ==========================================================================
   ⚠️  ARCHIVO AUTOGENERADO — NO EDITAR A MANO.
   Fuente: ../branding.threelink/brand/brand.json v1.4.0 · Regenerar: node build.mjs
   ThreeLink — Design Tokens (paleta oficial ÚNICA)
   Importá este archivo en CUALQUIER app/web/pieza y usá SOLO estas variables.
   Modo claro por defecto; el oscuro con :root[data-theme="dark"] o el SO.
   ========================================================================== */

:root {
  /* ---- COLOR (modo claro) ---- */
  --bg-page: #f5f6f8;
  --bg-white: #ffffff;
  --bg-subtle: #f0f1f4;
  --text-primary: #1a1f2e;
  --text-muted: #8898aa;
  --border-light: #e4e8ef;
  --color-accent: #37aa9c;
  --color-accent-hover: #2d9088;
  --color-accent-text: #1a6b63;
  --color-on-accent: #1e294c;
  --color-error: #ef4444;
  --shadow-xs: 0 1px 3px rgba(30, 41, 76, 0.06);
  --shadow-sm: 0 2px 6px rgba(30, 41, 76, 0.08);
  --shadow-md: 0 4px 12px rgba(30, 41, 76, 0.10);
  --shadow-lg: 0 8px 24px rgba(30, 41, 76, 0.12);
  --shadow-xl: 0 16px 40px rgba(30, 41, 76, 0.14);
  --bg-muted: #e8eaee;
  --text-secondary: #4a5568;
  --text-disabled: #b0bac9;
  --text-white: #ffffff;
  --border-mid: #d0d6e0;
  --border-accent: #37aa9c;
  --color-accent-light: #edf8f7;
  --color-accent-mid: #c5ebe8;
  --color-cyan: #00aeb5;
  --color-cyan-light: #e0f6f7;
  --color-navy: #1e294c;
  --color-navy-mid: #2e3d6b;
  --color-navy-light: #eef0f6;
  --color-success: #37aa9c;
  --color-success-bg: #edf8f7;
  --color-success-border: #c5ebe8;
  --color-success-text: #1a6b63;
  --color-warning: #f59e0b;
  --color-warning-bg: #fffbeb;
  --color-warning-border: #fde68a;
  --color-warning-text: #92400e;
  --color-error-bg: #fef2f2;
  --color-error-border: #fecaca;
  --color-error-text: #991b1b;
  --color-info: #00aeb5;
  --color-info-bg: #e0f6f7;
  --color-info-border: #99dfe2;
  --color-info-text: #065f6b;
  --color-navy-border: #c8cde0;
  --color-warning-strong: #fbbf24;
  --color-navy-text: #1e294c;
  --color-accent-on-tint: #1a6b63;

  /* ---- SOBRE FONDO SIEMPRE OSCURO (card negra, footer, tooltip) ----
     FIJOS a propósito: no siguen el tema. --text-primary/--text-muted se invierten y
     sobre una superficie oscura fija dejan texto negro sobre negro. Sobre navy #1e294c: blanco 12.6:1 · muted 8.4:1 · danger 6.1:1. Todos AA. */
  --on-dark-text: #ffffff;
  --on-dark-muted: rgba(255,255,255,0.72);
  --on-dark-border: rgba(255,255,255,0.14);

  /* ---- TIPOGRAFÍA ---- */
  --font: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --weight-title: 700;
  --weight-body: 400;
  --weight-caption: 300;
  --text-xs: 0.75rem;  --lh-xs: 1.5;
  --text-sm: 0.875rem;  --lh-sm: 1.5;
  --text-base: 1rem;  --lh-base: 1.5;
  --text-lg: 1.125rem;  --lh-lg: 1.5;
  --text-xl: 1.25rem;  --lh-xl: 1.375;
  --text-2xl: 1.5rem;  --lh-2xl: 1.375;
  --text-3xl: 1.875rem;  --lh-3xl: 1.2;
  --text-4xl: 2.25rem;  --lh-4xl: 1.2;
  --text-5xl: 3rem;  --lh-5xl: 1.2;
  --text-6xl: 3.75rem;  --lh-6xl: 1.2;
  --text-7xl: 4.5rem;  --lh-7xl: 1.2;

  /* ---- ESPACIADO (base 4) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ---- RADIOS ---- */
  --r-xs: 0.25rem;
  --r-sm: 0.5rem;
  --r-md: 0.75rem;
  --r-lg: 1rem;
  --r-xl: 1.25rem;
  --r-2xl: 1.5rem;
  --r-3xl: 2rem;
  --r-full: 9999px;
  --radius: 0.75rem;


  /* ---- TOKENS PROPIOS DE LA MARCA ---- */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;
  --lh-tight: 1.2;
  --lh-snug: 1.375;
  --lh-normal: 1.5;
  --lh-relaxed: 1.625;
  --container: 1200px;
  --sidebar-w: 248px;
  --t-fast: 150ms ease;
  --t-normal: 250ms ease;
  --t-slow: 400ms ease;
  --t-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --on-dark-danger: #ff8f8f;

  /* ---- MOTION ---- */
  --dur-fast: 150ms;
  --dur-normal: 250ms;
  --dur-slow: 400ms;
  --ease-fast: ease;
  --ease-normal: ease;
  --ease-slow: ease;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- FIRMA VISUAL: ritmo, tipografía y movimiento (brand.json → signature) ---- */
  --sig-container: 1200px;
  --sig-gap: 24px;
  --sig-gap-dense: 20px;
  --sig-pad: 24px;
  --sig-pad-lg: 32px;
  --sig-pad-sm: 20px;
  --sig-section: 80px;
  --sig-section-head: 48px;
  --sig-radius: 24px;
  --sig-radius-lg: 32px;
  --sig-radius-sm: 20px;
  --sig-radius-xs: 16px;
  --sig-nav-height: 73px;
  --sig-sidebar: 248px;
  --sig-control: 40px;
  --sig-control-lg: 46px;
  --sig-badge-pad-x: 10px;
  --sig-h1: 3rem;
  --sig-h1-tracking: -0.02em;
  --sig-h2: 2.25rem;
  --sig-h2-tracking: -0.015em;
  --sig-heading-weight: 700;
  --sig-card-title: 1.25rem;
  --sig-card-title-weight: 600;
  --sig-lead: 1.125rem;
  --sig-lead-leading: 1.625;
  --sig-eyebrow: 0.75rem;
  --sig-eyebrow-weight: 700;
  --sig-eyebrow-tracking: 0.12em;
  --sig-stat: 1.875rem;
  --sig-stat-label: 0.75rem;
  --sig-stat-label-tracking: 0.06em;
  --sig-nav: 0.875rem;
  --sig-button: 0.875rem;
  --sig-badge: 11px;
  --sig-wordmark: 1.35rem;
  --sig-nav-section: 10px;
  --sig-shimmer: 1.5s;
  --sig-z-sticky: 100;
  --sig-z-nav: 200;
  --sig-z-overlay: 300;
  --sig-z-toast: 400;
}

/* ============ MODO OSCURO (explícito) ============ */
:root[data-theme="dark"] {
  --bg-page: #0e1220;
  --bg-white: #161d30;
  --bg-subtle: #1c2438;
  --text-primary: #e8eaf0;
  --text-muted: #8d99b2;
  --border-light: #252e44;
  --color-accent: #37aa9c;
  --color-accent-hover: #4FC4B5;
  --color-accent-text: #37aa9c;
  --color-on-accent: #1e294c;
  --color-error: #f87171;
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.36);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.50);
  --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.58);
  --bg-muted: #242d44;
  --text-secondary: #a8b3c9;
  --text-disabled: #6b7488;
  --text-white: #ffffff;
  --border-mid: #333d57;
  --border-accent: #37aa9c;
  --color-accent-light: #12312e;
  --color-accent-mid: #1d4a45;
  --color-cyan: #22C3CA;
  --color-cyan-light: #0b2f33;
  --color-navy: #1F2B4A;
  --color-navy-mid: #2A3860;
  --color-navy-light: #20305E;
  --color-success: #37aa9c;
  --color-success-bg: #12312e;
  --color-success-border: #1d4a45;
  --color-success-text: #6fd3c6;
  --color-warning: #f59e0b;
  --color-warning-bg: #2e2410;
  --color-warning-border: #4a3a14;
  --color-warning-text: #fbbf24;
  --color-error-bg: #2e1616;
  --color-error-border: #4a1f1f;
  --color-error-text: #fca5a5;
  --color-info: #22C3CA;
  --color-info-bg: #0b2f33;
  --color-info-border: #14484d;
  --color-info-text: #5cd2d8;
  --color-navy-border: #3d4a6b;
  --color-warning-strong: #d97706;
  --color-navy-text: #aab6d6;
  --color-accent-on-tint: #6fd3c6;
}

/* ============ MODO OSCURO (preferencia del SO) ============ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page: #0e1220;
    --bg-white: #161d30;
    --bg-subtle: #1c2438;
    --text-primary: #e8eaf0;
    --text-muted: #8d99b2;
    --border-light: #252e44;
    --color-accent: #37aa9c;
    --color-accent-hover: #4FC4B5;
    --color-accent-text: #37aa9c;
    --color-on-accent: #1e294c;
    --color-error: #f87171;
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.30);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.36);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.42);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.50);
    --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.58);
    --bg-muted: #242d44;
    --text-secondary: #a8b3c9;
    --text-disabled: #6b7488;
    --text-white: #ffffff;
    --border-mid: #333d57;
    --border-accent: #37aa9c;
    --color-accent-light: #12312e;
    --color-accent-mid: #1d4a45;
    --color-cyan: #22C3CA;
    --color-cyan-light: #0b2f33;
    --color-navy: #1F2B4A;
    --color-navy-mid: #2A3860;
    --color-navy-light: #20305E;
    --color-success: #37aa9c;
    --color-success-bg: #12312e;
    --color-success-border: #1d4a45;
    --color-success-text: #6fd3c6;
    --color-warning: #f59e0b;
    --color-warning-bg: #2e2410;
    --color-warning-border: #4a3a14;
    --color-warning-text: #fbbf24;
    --color-error-bg: #2e1616;
    --color-error-border: #4a1f1f;
    --color-error-text: #fca5a5;
    --color-info: #22C3CA;
    --color-info-bg: #0b2f33;
    --color-info-border: #14484d;
    --color-info-text: #5cd2d8;
    --color-navy-border: #3d4a6b;
    --color-warning-strong: #d97706;
    --color-navy-text: #aab6d6;
    --color-accent-on-tint: #6fd3c6;
  }
}

/* ---- Helpers base ---- */
body        { background: var(--bg-page); color: var(--text-primary); font-family: var(--font); }
.threelink-title   { font-weight: var(--weight-title); }
.threelink-caption { font-weight: var(--weight-caption); color: var(--text-muted); }

/* ---- Accesibilidad: motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .01ms !important; scroll-behavior: auto !important; }
}