/* tokens.css — valores reales copiados de design-tokens-reference.md
   (Score Board Click Seguros / _ds / tokens/*.css + styles.css).
   NO es infraestructura del Design System original: son los VALORES, declarados
   como variables CSS propias de este proyecto. */

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Inter:wght@400..800&family=Urbanist:wght@400..800&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* Marca: Click Orange */
  --orange-100: #FF6D50;
  --orange-200: #FF5736;
  --orange-300: #FF411B;
  --orange-400: #FF2A00;
  --orange-500: #E02500;
  --orange-600: #C92100;
  --orange-700: #AE1D00;
  --orange-800: #941800;
  --orange-900: #791400;

  /* Marca: Click Navy / Blue */
  --blue-050: #F6F9FE;
  --blue-100: #D1E0FA;
  --blue-200: #A3C2F5;
  --blue-300: #75A3F0;
  --blue-400: #4885EA;
  --blue-500: #1A67E5;
  --blue-600: #1552B7;
  --blue-700: #0F458A;
  --blue-800: #0A2E5C;
  --blue-900: #05172E;
  --blue-info: #0D70E7;

  /* Neutrales */
  --white: #FFFFFF;
  --neutral-050: #FAFAFA;
  --neutral-100: #DFDFDF;
  --neutral-150: #CACACA;
  --neutral-200: #B5B5B5;
  --neutral-300: #9F9F9F;
  --neutral-400: #8A8A8A;
  --neutral-500: #757575;
  --neutral-600: #606060;
  --neutral-700: #4A4A4A;
  --neutral-800: #353535;
  --neutral-900: #202020;
  --black: #000000;

  /* Acento de marketing */
  --accent-yellow: #F5C518;
  --accent-ocre: #DDD2A1;

  /* Semánticos */
  --success-400: #44E67D;
  --success-500: #1ED760;
  --success-600: #18AC4C;
  --success-700: #159441;
  --success-800: #117D37;

  --warning-400: #FFB554;
  --warning-500: #FFA42B;
  --warning-600: #ED8600;
  --warning-700: #D17600;
  --warning-800: #B86800;

  --error-400: #EF4354;
  --error-500: #E91429;
  --error-600: #BC1021;

  --info-400: #65A6F6;
  --info-500: #3D91F4;
  --info-600: #0D70E7;

  /* Alias semánticos usados por el .dc.html */
  --surface-page: var(--neutral-050);
  --surface-card: var(--white);
  --surface-raised: var(--white);
  --surface-subtle: var(--neutral-050);
  --surface-inverse: var(--blue-900);
  --surface-brand: var(--blue-700);
  --surface-tint: var(--blue-050);

  --text-heading: var(--blue-900);
  --text-title: var(--blue-700);
  --text-body: var(--neutral-600);
  --text-muted: var(--neutral-500);
  --text-subtle: var(--neutral-400);
  --text-on-brand: var(--white);
  --text-on-primary: var(--white);
  --text-link: var(--blue-700);
  --text-primary: var(--orange-500);

  --border-subtle: var(--neutral-100);
  --border-default: var(--neutral-150);
  --border-strong: var(--neutral-300);
  --border-focus: var(--blue-500);

  --action-primary: var(--orange-500);
  --action-primary-hover: var(--orange-600);
  --action-primary-active: var(--orange-700);
  --action-secondary: var(--blue-700);
  --action-secondary-hover: var(--blue-800);

  --focus-ring: 0 0 0 3px rgba(26, 103, 229, 0.35);

  /* Hex literales del .dc.html — NO son tokens del design system, son decisiones
     puntuales de pantalla. Se preservan EXACTOS porque las fórmulas de semáforo
     los referencian por valor. Ver design-tokens-reference.md. */
  --lit-sin-dato: #B7BFC9;
  --lit-dona-vacia: #F1F3F7;
  --lit-en-riesgo: #D99400;
  --lit-aceptable-texto: #B8930F;
  --lit-perdiendo-chevron: #B3261E;
  --lit-aceptable-barra: #F5C518;
  --lit-fondo-rojo: #FDEDEE;
  --lit-fondo-verde: #EAF9EF;
  --lit-fondo-ambar: #FDF8E7;
  --lit-fondo-gris: #F4F6F9;
  --lit-pista-vacia: #DDE2E9;
  --lit-borde-sutil: #E6E9EF;
  --lit-texto-secundario: #8FA3BF;
  --lit-input-bg: #FFF7E0;
  --lit-input-border: #F5DFA0;
  --lit-conf-bg: #EAF9EF;
  --lit-conf-border: #A8E5BF;
  --lit-grid-bg: #EEF1F5;
  --lit-facebook: #1877F2;

  /* Tipografía */
  --font-sans: "Open Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ui: "Inter", "Open Sans", -apple-system, sans-serif;
  --font-display: "Urbanist", "Open Sans", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 28px;
  --text-3xl: 32px;
  --text-4xl: 40px;
  --text-5xl: 48px;
  --text-6xl: 56px;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  /* Espaciado / radios / sombras / movimiento */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;

  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 24px; --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(5, 23, 46, 0.06);
  --shadow-sm: 0 1px 3px rgba(5, 23, 46, 0.08), 0 1px 2px rgba(5, 23, 46, 0.04);
  --shadow-md: 0 4px 12px rgba(5, 23, 46, 0.08);
  --shadow-lg: 0 8px 28px rgba(5, 23, 46, 0.10);
  --shadow-xl: 0 18px 48px rgba(5, 23, 46, 0.14);
  --shadow-focus: 0 0 0 3px rgba(26, 103, 229, 0.35);

  --border-width: 1px;
  --container-max: 1200px;
  --tap-target: 44px;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
}