/* =========================================================
   Dataico — Tokens oficiales de marca (versión Herramientas)
   =========================================================

   Fuente: dprk-ui-library/SKILL/tokens.css (autoritativo).
   Esta versión es HÍBRIDA a propósito: trae los @font-face,
   las custom properties y unas pocas utilidades — pero NO
   trae resets de elemento (html/body/h1/p...), porque estas
   herramientas usan Tailwind CDN y los resets pelearían con
   su preflight.

   Uso en cada herramienta (un nivel de profundidad):
     <link rel="stylesheet" href="../access/dataico-tokens.css">
   Cárgalo ANTES del <script> de Tailwind, y mapea los tokens
   en tailwind.config (ver la skill estandar-diseno-dataico,
   assets/tailwind-config-oficial.html).

   fonts/ debe quedar hermano de este archivo — los @font-face
   resuelven a ./fonts/.
   ========================================================= */

/* =========================================================
   @font-face
   ========================================================= */

/* Safiro se distribuye SOLO en Medium (500). Nunca pidas 600/700:
   el navegador sintetiza una negrita falsa. Si necesitas más peso,
   usa Satoshi o Safiro 500 a mayor tamaño. */
@font-face {
  font-family: 'Safiro';
  src: url('./fonts/Safiro-Medium.woff2') format('woff2'),
       url('./fonts/Safiro-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Satoshi — eje variable + cortes estáticos de respaldo. */
@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Variable.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   Custom properties — set completo de tokens
   ========================================================= */
:root {
  /* ---------- Escala Coral (1 más claro → 9 más oscuro) ----------
     Coral 5 es el coral de marca. SOLO 4 y 6 son estados de UI
     (hover / pressed). 1–3 y 7–9 son editorial y data-viz: nunca
     un hover, nunca un disabled. */
  --coral-1: #FFE7E6;
  --coral-2: #F7AFAC;
  --coral-3: #F3918D;
  --coral-4: #F0746F;  /* estado UI — hover sobre CTA coral */
  --coral-5: #ED5650;  /* CORAL DE MARCA — el acento por defecto */
  --coral-6: #CF4741;  /* estado UI — pressed sobre CTA coral */
  --coral-7: #B13833;
  --coral-8: #932824;
  --coral-9: #751915;

  /* ---------- Escala Gris (1 más claro → 9 más oscuro, + 50 medio) ----------
     Gris 2 = mist (marca) · Gris 4 = gray (marca) · Gris 8 = charcoal (marca). */
  --gris-1:  #F7F7F7;
  --gris-2:  #F1F1F1;
  --gris-3:  #E6E6E6;
  --gris-4:  #D5D6D7;
  --gris-50: #ADADAE;  /* medio — estado disabled */
  --gris-6:  #9E9E9E;
  --gris-7:  #575757;
  --gris-8:  #333333;
  --gris-9:  #1D1D1D;

  /* ---------- Dark (superficies de tema inverso) ---------- */
  --dark:     #232323;
  --dark--10: #3C3C3C;
  --dark--20: #404040;
  --dark--25: #ADADAE;

  /* ---------- Acentos (SOLO editorial / data-viz) ----------
     Nunca en chrome de UI: ni botones, ni alertas, ni chips.
     Solo portadas editoriales y series de gráficas. */
  --accent-blue:    #62EFFF;
  --accent-lime-2:  #9DDD05;
  --accent-lime:    #D2FF55;
  --accent-lime--1: #F4FFC7;
  --accent-yellow:  #DDCB05;

  /* ---------- Alias de marca (sistema de cuatro colores) ----------
     Rojo Coral  — Coral    — CMYK 69·60·56·66
     Gris Oscuro — Charcoal — CMYK  0·74·55·0
     Gris Neutro — Gray     — CMYK 19·13·14·0
     Gris Claro  — Mist     — CMYK  7·5·5·0
     Proporción de uso: 45 Charcoal · 35 Mist · 15 Gray · 5 Coral.
     En contexto WEB (que es el de estas herramientas):
     70 Mist · 15 Coral · 10 Charcoal · 5 Gray. */
  --brand-coral:    var(--coral-5);
  --brand-charcoal: var(--gris-8);
  --brand-gray:     var(--gris-4);
  --brand-mist:     var(--gris-2);
  --brand-white:    #FFFFFF;

  /* ---------- Superficies semánticas ---------- */
  --bg-default: var(--brand-mist);
  --bg-surface: var(--brand-white);
  --bg-strong:  var(--brand-charcoal);
  --bg-accent:  var(--brand-coral);

  /* ---------- Texto semántico ---------- */
  --text-default: var(--brand-charcoal);
  --text-muted:   rgba(51, 51, 51, 0.65); /* charcoal @ 65% */
  --text-inverse: var(--brand-mist);
  --text-accent:  var(--brand-coral);

  /* ---------- Bordes / focus / overlay ---------- */
  --border-soft:   var(--brand-gray);
  --border-strong: var(--brand-charcoal);
  --focus-ring:    var(--brand-coral);
  --overlay-scrim: rgba(51, 51, 51, 0.48);

  /* ---------- Familias tipográficas ---------- */
  --font-display: 'Safiro', 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:    'Satoshi', 'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Tamaños de fuente ---------- */
  --fs-display-xl: 2rem;      /* 32px — título de página / hero */
  --fs-display-lg: 1.625rem;  /* 26px — título de sección */
  --fs-title-md:   1.125rem;  /* 18px — título de tarjeta */
  --fs-body-md:    1rem;      /* 16px — párrafo */
  --fs-body-sm:    0.875rem;  /* 14px — UI densa, metadata */
  --fs-caption:    0.75rem;   /* 12px — caption, timestamp */
  --fs-numeric-xl: 3rem;      /* 48px — cifra protagonista */
  --fs-numeric-lg: 2rem;      /* 32px — cifra secundaria */

  /* ---------- Interlineado ---------- */
  --lh-tight:   1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* ---------- Pesos ---------- */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* ---------- Espaciado (base 8) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  48px;
  --space-9:  64px;
  --space-10: 80px;
  --space-11: 96px;

  /* ---------- Radios ----------
     Nunca mezcles radios entre componentes hermanos. */
  --r-none: 0;
  --r-sm:   4px;
  --r-md:   8px;    /* inputs */
  --r-lg:   12px;   /* botones */
  --r-xl:   16px;
  --r-chip: 14px;
  --r-card: 20px;
  --r-pill: 999px;
  --r-full: 9999px;

  /* ---------- Elevación ----------
     Sombras NEUTRAS. Prohibidas las sombras tintadas
     (shadow-emerald-950/20, shadow-slate-900/20, etc.). */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);

  /* ---------- Trazo ---------- */
  --stroke-thin:    1px;    /* divisores */
  --stroke-regular: 1.5px;  /* iconos y contornos activos */

  /* ---------- Grid ---------- */
  --grid-max:      1280px;
  --grid-gutter-d: 24px;
  --grid-gutter-t: 16px;
  --grid-gutter-m: 16px;

  /* =========================================================
     Canales RGB — los MISMOS colores de arriba, como triplete
     sin envolver en rgb().
     ¿Por qué existen? Tailwind no puede inyectar opacidad en un
     color declarado como `var(--x)`: una clase como `bg-coral-500/20`
     no genera nada y el elemento queda TRANSPARENTE, en silencio.
     Con el canal suelto, la config puede declarar
        'rgb(var(--coral-5-rgb) / <alpha-value>)'
     y entonces `bg-coral-500`, `bg-coral-500/20` y `/50` funcionan.
     Si cambias un color arriba, cambia también su canal aquí.
     ========================================================= */
  --coral-1-rgb: 255 231 230;
  --coral-2-rgb: 247 175 172;
  --coral-3-rgb: 243 145 141;
  --coral-4-rgb: 240 116 111;
  --coral-5-rgb: 237  86  80;
  --coral-6-rgb: 207  71  65;
  --coral-7-rgb: 177  56  51;
  --coral-8-rgb: 147  40  36;
  --coral-9-rgb: 117  25  21;

  --gris-1-rgb:  247 247 247;
  --gris-2-rgb:  241 241 241;
  --gris-3-rgb:  230 230 230;
  --gris-4-rgb:  213 214 215;
  --gris-50-rgb: 173 173 174;
  --gris-6-rgb:  158 158 158;
  --gris-7-rgb:   87  87  87;
  --gris-8-rgb:   51  51  51;
  --gris-9-rgb:   29  29  29;

  --brand-mist-rgb:     241 241 241;
  --brand-charcoal-rgb:  51  51  51;
  --brand-coral-rgb:    237  86  80;
}

/* =========================================================
   Utilidades mínimas
   Solo lo que Tailwind no da y la marca sí exige. Nada de
   resets de elemento — eso lo maneja el preflight de Tailwind.
   ========================================================= */

/* Anillo de foco de marca: 2px coral, offset 2px. No lo sobreescribas
   con box-shadow ni con outline:none. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Cifras — Safiro Medium con numerales tabulares, para que las
   columnas de montos no bailen. Obligatorio en resultados de
   calculadoras y liquidadores. */
.numeric-xl,
.numeric-lg,
.price {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.numeric-xl { font-size: var(--fs-numeric-xl); line-height: 1; }
.numeric-lg { font-size: var(--fs-numeric-lg); line-height: 1.1; }
.price      { font-size: var(--fs-body-md);    line-height: 1; }

/* Cualquier tabla o lista de montos: numerales tabulares. */
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }