/* Valori POS — typography tokens
   Space Grotesk for display/headline (--font-display, negative tracking),
   Inter for titles/body/forms (--font-sans), JetBrains Mono for EVERY monetary
   amount (--font-mono, always tabular-nums via the [data-numeric] attribute).
   The money amount is the hero of almost every screen — mono keeps digits a
   fixed width so totals never "dance" while typing and statement columns align. */

:root {
  --font-display: "Space Grotesk", "Inter", -apple-system, system-ui, sans-serif;
  --font-sans:    "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Display / headline — Space Grotesk, tight tracking */
  --text-display:  700 40px/1.1 var(--font-display);
  --text-headline: 700 28px/1.15 var(--font-display);
  --tracking-display:  -0.5px;
  --tracking-headline: -0.25px;
  /* back-compat aliases */
  --text-display-xl: var(--text-display);
  --text-h1: var(--text-headline);

  /* Titles & body — Inter */
  --text-title:    600 20px/1.3 var(--font-sans);   /* card titles, headers */
  --text-subtitle: 500 16px/1.4 var(--font-sans);   /* button labels, subtitles */
  --text-body:     400 14px/1.5 var(--font-sans);   /* running text, lists */
  --text-body-lg:  400 16px/1.5 var(--font-sans);
  --text-body-sm:  400 13px/1.45 var(--font-sans);
  --text-caption:  400 12px/1.4 var(--font-sans);   /* legends, badges, metadata */
  --text-label:    500 13px/1.2 var(--font-sans);
  --text-overline: 600 11px/1.2 var(--font-sans);   /* + uppercase + tracking-wide */
  --tracking-caption: 0.1px;
  --tracking-wide: 0.08em;
  /* back-compat aliases */
  --text-h2: var(--text-title);
  --text-h3: var(--text-subtitle);
  --tracking-heading: -0.25px;

  /* Money — JetBrains Mono, tabular figures. The amount is the hero. */
  --text-amount:    700 40px/1.05 var(--font-mono); /* hero monetary value */
  --tracking-amount: -0.5px;
  --text-data-xl:   700 32px/1.1 var(--font-mono);
  --text-data-lg:   500 20px/1.2 var(--font-mono);
  --text-data:      500 13px/1.4 var(--font-mono);
  --text-data-sm:   500 11px/1.3 var(--font-mono);
}

/* Overline helper — the only uppercase in the system */
.overline {
  font: var(--text-overline);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Every number opts into tabular figures with this attribute */
[data-numeric] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}