/* Truly Inbound · design system
   ============================================================================
   La piel NO se inventa acá: sale del sistema del sitio de Truly Nolen Tech
   (`web/tokens.css`), que Pablo ya aprobó. Muestrear un color de una captura da
   un tono parecido y equivocado — ya costó un rechazo. Los primitivos de abajo
   son LITERALES de ese archivo.

   Lo que SÍ es propio de este repo es la capa semántica de PRODUCTO: un sitio de
   marketing y una superficie de trabajo no necesitan los mismos nombres. Acá hay
   filas, barras laterales, estados y densidad; allá hay héroes y escenas.

   Tres capas, y la regla dura: **los componentes consumen SÓLO la capa 2 y 3**.
   Cero hex fuera de este archivo — lo vigila `scripts/gate-cero-hex.mjs`.
   ============================================================================ */

@font-face{font-family:Bricolage;src:url('/fuentes/bricolage.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:Hanken;src:url('/fuentes/hanken-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Hanken;src:url('/fuentes/hanken-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Hanken;src:url('/fuentes/hanken-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Hanken;src:url('/fuentes/hanken-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/fuentes/jetbrains-mono.woff2') format('woff2');font-weight:400 700;font-display:swap}

:root{
  /* ── Capa 1 · primitivos — LITERALES del sistema del sitio ──────────────── */
  --brand-yellow:#ffd900; --brand-yellow-light:#fff2a1; --brand-yellow-deep:#bf8b00;
  --brand-cobalt:#1737ef; --brand-navy:#071750; --brand-ink:#111d39; --white:#fff;
  --tint-soft:#f2f5fc; --tint-message:#eaf0ff; --tint-yellow-hover:#ffe64c;
  /* Los únicos primitivos NUEVOS: una superficie de trabajo necesita decir
     «bien», «cuidado» y «mal», y el sitio no los tenía porque no los necesitaba. */
  --signal-ok:#0f7a4a; --signal-warn:#a86400; --signal-bad:#b3261e;
  --grey-50:#f7f8fb; --grey-100:#eef1f7; --grey-200:#dee3ee; --grey-400:#8a94ab; --grey-600:#4f5c75;

  --font-display:Bricolage,sans-serif;
  --font-body:Hanken,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  /* Escala de 4, la que converge en Polaris/Primer/Carbon. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px;

  /* Motion con números: nada por encima de 300 ms en una superficie de trabajo. */
  --t-micro:120ms; --t-ui:200ms; --t-panel:260ms;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* ── Capa 2 · semánticos — lo ÚNICO que consumen los componentes ────────── */
  --bg-app:var(--grey-50);
  --bg-surface:var(--white);
  --bg-sunken:var(--grey-100);
  --bg-deep:var(--brand-navy);
  --bg-accent:var(--brand-yellow);
  --bg-hover:var(--grey-100);
  --bg-selected:var(--tint-message);
  --bg-mine:var(--brand-navy);

  --fg:var(--brand-ink);
  --fg-muted:var(--grey-600);
  --fg-faint:var(--grey-400);
  --fg-on-deep:var(--white);
  --fg-on-deep-muted:#d8e0ff;
  --fg-on-accent:var(--brand-navy);
  --fg-link:var(--brand-cobalt);

  --line:var(--grey-200);
  --line-strong:#c6cede;
  --line-on-deep:#52638b;

  --action-primary:var(--brand-cobalt);
  --action-primary-fg:var(--white);
  --action-primary-hover:#0f2bc4;
  --action-accent:var(--brand-yellow);
  --action-accent-hover:var(--tint-yellow-hover);

  --ok:var(--signal-ok); --warn:var(--signal-warn); --bad:var(--signal-bad);
  --ok-soft:#e6f4ec; --warn-soft:#fdf2e0; --bad-soft:#fdeceb;

  --focus:var(--brand-cobalt);

  /* ── Capa 3 · de componente ─────────────────────────────────────────────── */
  --lateral-w:248px;           /* 256 menos el borde, la medida que converge */
  --fila-h:44px;               /* fila de lista cómoda; 32 sería densa */
  --control-h:38px;            /* inputs y botones: 36-40 */
  --mapa-frio:var(--brand-cobalt);
  --mapa-transicion:var(--signal-ok);
  --mapa-medio:var(--brand-yellow);
  --mapa-caliente:var(--signal-bad);
  --radio:10px; --radio-sm:6px; --radio-pill:999px;
  --sombra-panel:0 18px 48px color-mix(in srgb,var(--brand-navy) 10%,transparent),
                 0 1px 3px color-mix(in srgb,var(--brand-navy) 6%,transparent);
  --sombra-sutil:0 1px 2px color-mix(in srgb,var(--brand-navy) 8%,transparent);

  --txt-xs:12px; --txt-sm:13px; --txt:14px; --txt-md:15px; --txt-lg:18px; --txt-xl:22px;

  color:var(--fg); background:var(--bg-app);
  font-family:var(--font-body); font-size:var(--txt); font-synthesis:none;
  -webkit-font-smoothing:antialiased;
}

*,*::before,*::after{box-sizing:border-box}
html,body,#root{height:100%}
body{margin:0}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--fg-link);text-decoration:none}
a:hover{text-decoration:underline}

/* Un solo anillo de foco en todo el producto. Si cada componente inventa el
   suyo, el teclado deja de sentirse como un solo lugar. */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--radio-sm);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── El dedo no es el ratón ────────────────────────────────────────────────
   La altura de los controles es un TOKEN, así que su versión para dedo va acá
   y no en el kit: en el kit queda por debajo de esta hoja en el orden de
   importación y no se aplica — medido, el selector de país quedaba en 36 px.
   `pointer:coarse` y no un ancho: un iPad en horizontal mide más de 900 px y
   se toca con el dedo igual. La vara la pone el dedo. */
@media (pointer:coarse){
  :root{--control-h:44px}
}