/*
 * Tokens de diseño de Repeti. Único lugar con hex (ADR 0026).
 * Los nombres y su uso están en docs/diseno.md. Las fuentes viven en ./fuentes/.
 * --acento-comercio no vive acá: se calcula por request desde la receta del logo del comercio.
 */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fuentes/instrument-serif-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("./fuentes/instrument-serif-italic.woff2") format("woff2");
}

/* Subset solo dígitos, punto y coma: el número protagonista del sello. */
@font-face {
  font-family: "Instrument Serif Digitos";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fuentes/instrument-serif-digitos.woff2") format("woff2");
}

/* La sans de todas las superficies (ADR 0026 p.8, #406 · D-261): Geist variable, autohospedada. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fuentes/geist-variable.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fuentes/jetbrains-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fuentes/jetbrains-mono-500.woff2") format("woff2");
}

:root {
  /* Color: escalas */
  --tomate-50: #fff1ee;
  --tomate-100: #ffddd5;
  --tomate-200: #ffb9a9;
  --tomate-300: #fb8d74;
  --tomate-400: #f2674a;
  --tomate-500: #e2462a;
  --tomate-600: #c2361d;
  --tomate-700: #9c2b18;
  --tomate-800: #722114;
  --tomate-900: #4a170e;

  --papel-0: #ffffff;
  --papel-50: #faf7f2;
  --papel-100: #f3eee6;
  --papel-200: #e6dfd4;
  --papel-300: #d2c9bb;
  --papel-400: #a99f90;
  --papel-500: #7d7466;
  --papel-600: #5c5449;
  --papel-700: #413b33;
  --papel-800: #2a2621;
  --papel-900: #1a1714;

  --vuelve-50: #e6f2ea;
  --vuelve-500: #2f7d4f;
  --vuelve-700: #1e5a37;
  --riesgo-50: #fcf0d6;
  --riesgo-500: #c27a06;
  --riesgo-700: #8a5300;
  --perdido-50: #efebe4;
  --perdido-500: #7d7466;
  --perdido-700: #4d463d;
  --nuevo-50: #e5ecf7;
  --nuevo-500: #2e5da8;
  --nuevo-700: #1f407a;

  /* Color: fundamentos */
  --papel: var(--papel-50);
  --tinta: var(--papel-900);
  --tomate: var(--tomate-500);

  /* Color: semánticos */
  --bg-app: var(--papel-50);
  --surface-card: var(--papel-0);
  --surface-sunken: var(--papel-100);
  --surface-inverse: var(--papel-900);
  --surface-inverse-hover: var(--papel-800);
  --border-subtle: var(--papel-200);
  --border-strong: var(--papel-300);
  --border-focus: var(--tomate-500);
  --fg-1: var(--papel-900);
  --fg-2: var(--papel-600);
  --fg-3: var(--papel-500);
  --fg-on-accent: #ffffff;
  --fg-on-inverse: var(--papel-50);
  --accent: var(--tomate-500);
  --accent-hover: var(--tomate-600);
  --accent-press: var(--tomate-700);
  --accent-soft: var(--tomate-50);
  --accent-fg: var(--tomate-700);
  --text-body: var(--fg-1);
  --text-muted: var(--fg-2);
  --text-link: var(--tomate-600);
  --success: var(--vuelve-500);
  --warning: var(--riesgo-500);
  --danger: var(--riesgo-700);
  --info: var(--nuevo-500);
  /* El par de un badge de estado: el 50 de fondo y el 700 del texto de la misma escala. */
  --success-soft: var(--vuelve-50);
  --success-strong: var(--vuelve-700);
  --warning-soft: var(--riesgo-50);
  --warning-strong: var(--riesgo-700);
  --focus-ring: 0 0 0 3px color-mix(in oklch, var(--tomate-500) 30%, transparent);

  /* Tipografía */
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-sello: "Instrument Serif Digitos", var(--font-display);
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-56: 56px;
  --fs-72: 72px;
  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --tracking-tight: -0.01em;
  --tracking-caps: 0.06em;
  --type-display-xl: 400 var(--fs-72) / 1 var(--font-display);
  --type-display-l: 400 var(--fs-56) / 1.02 var(--font-display);
  --type-display-m: 400 var(--fs-40) / 1.08 var(--font-display);
  --type-heading-l: 600 var(--fs-24) / 1.25 var(--font-sans);
  --type-heading-m: 600 var(--fs-18) / 1.3 var(--font-sans);
  --type-heading-s: 600 var(--fs-14) / 1.4 var(--font-sans);
  --type-body-l: 400 var(--fs-16) / 1.55 var(--font-sans);
  --type-body: 400 var(--fs-14) / 1.5 var(--font-sans);
  --type-caption: 400 var(--fs-12) / 1.4 var(--font-sans);
  --type-overline: 600 var(--fs-11) / 1.3 var(--font-sans);
  --type-metric: 400 var(--fs-40) / 1 var(--font-display);
  /* Los datos van en la sans con cifras tabulares: el shorthand `font` no lleva
     `font-variant-numeric`, así que `tabular-nums` lo pone quien consume el token
     (ADR 0026 p.8). */
  --type-data: 500 var(--fs-13) / 1.4 var(--font-sans);

  /* Espaciado, radios y medidas */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --control-h-sm: 32px;
  --control-h-md: 40px;
  --control-h-lg: 48px;
  --sidebar-w: 232px;
  --chart-h: 300px;
  --content-max: 1280px;
  --content-max-cliente: 32rem;

  /* Efectos */
  --shadow-xs: 0 1px 2px rgba(26, 23, 20, 0.06);
  --shadow-sm: 0 1px 2px rgba(26, 23, 20, 0.06), 0 2px 6px -2px rgba(26, 23, 20, 0.08);
  --shadow-md: 0 1px 2px rgba(26, 23, 20, 0.06), 0 8px 20px -6px rgba(26, 23, 20, 0.14);
  --shadow-card: 0 1px 1px rgba(26, 23, 20, 0.03), 0 2px 8px -2px rgba(26, 23, 20, 0.05);
  --shadow-raised: 0 1px 2px rgba(26, 23, 20, 0.05), 0 10px 24px -8px rgba(26, 23, 20, 0.12);
  --shadow-lg: 0 2px 4px rgba(26, 23, 20, 0.06), 0 24px 48px -12px rgba(26, 23, 20, 0.22);
  --border-1: 1px solid var(--border-subtle);
  --border-2: 1px solid var(--border-strong);
  --scrim: rgba(26, 23, 20, 0.42);
  /* Trama de puntos del fondo de las pantallas de Repeti (#406 · D-87). Va como capa: background: var(--trama), var(--bg-app). */
  --trama:
    radial-gradient(color-mix(in oklch, var(--papel-900) 12%, transparent) 0.8px, transparent 0.9px)
    0 0 / 10px 10px;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}