/* ============================================================
   Tokens SkyLoop.

   La FONT DE VERITAT és el paquet, no el Figma:
     ~/GitHub/paw-shared-packages/packages/tokens-ui-kit/tokens.json
   Els valors es van mostrejar del node 19:19169 de Restaurant Shifts
   (Figma rf9holiXHB62KhkyM4jW9m) i s'han verificat un a un contra
   `semantic.color.*` d'aquell fitxer: hi coincideixen tots.

   Si cal un token que aquí no hi és, treure'l de tokens.json —
   NO del Figma, i molt menys inventar-lo.

   ⚠️ L'escala d'espaiat NO és una graella de 8pt — veure
   design-system/AUDIT.md §3.3. Els valors es fan servir tal com són.
   ============================================================ */

:root {
  /* Marca */
  --brand-primary:        #f2662b;
  --text-primary-brand:   #f2662b;
  --border-primary:       #f2662b;

  /* Text */
  --text-title:           #1f2937;
  --text-body:            #374151;
  --text-label:           #6b7280;
  --text-inverse:         #ffffff;   /* text.primaryInverse */

  /* Superfícies */
  --bg-neutral:           #ffffff;
  --bg-surface:           #f9fafb;
  --border-neutral:       #e5e7eb;
  --icon-neutral:         #374151;

  /* Estat */
  --status-success:       #16a34a;
  --bg-success:           #f0fdf4;
  /* Error. Tret de tokens-ui-kit i no del node de Figma: allà no hi ha
     cap formulari que validi, així que no hi surt.
       semantic.color.status.error      → red.600  (marca: vora, icona)
       semantic.color.background.error  → red.100
       component.badge.errorText        → red.700  (text)
     Són dos vermells a propòsit, i és el que fa el propi sistema: el
     red.600 a 12px dona 3,44:1 sobre el fons d'error i no arriba a AA,
     el red.700 sí (4,41:1). Marca amb l'un, escriu amb l'altre. */
  --status-error:         #ef4444;
  --text-error:           #dc2626;
  --bg-error:             #fef2f2;
  --accent:               #4f46e5;
  --bg-accent-subtle:     #eef2ff;
  /* Info: semantic.color.status.info (blue.900) i background.info
     (blue.100). 8,88:1 l'un sobre l'altre. */
  --status-info:          #3730a3;
  --bg-info:              #eef2ff;

  /* Estats propis del prototip, derivats de la marca */
  --status-pending:       #f2662b;
  --bg-pending:           #fff7ed;
  --brand-soft:           #fbb47f;   /* orange.400 — estat "en curs" */

  /* Barra de progrés. La barra té els SEUS tokens a tokens-ui-kit i no
     reutilitza els de vora, encara que l'actiu apunti a border.primary:
       component.progressBar.bar.active   → color.border.primary (#f2662b)
       component.progressBar.bar.inactive → color.gray.400       (#d1d5db)
     La pista NO és `--border-neutral`: gray.400 és un to més fosc, i és
     el que fa que una pista de 2px es vegi. */
  --progressbar-bar-active:   #f2662b;
  --progressbar-bar-inactive: #d1d5db;

  /* Vora dels contenidors de formulari (la zona d'escaneig).
     ⚠️ Aquí el Figma i el paquet NO diuen el mateix: `semantic.color
     .border.form` apunta a `gray.600` (#6b7280) a tokens-ui-kit, però
     al fitxer de Figma el mateix token resol a `gray.400` (#d1d5db).
     Es fa servir el del disseny — #6b7280 és un gris de text i com a
     vora d'una caixa gran crida molt més del que el disseny ensenya.
     Val la pena preguntar-ho a qui manté la llibreria. */
  --border-form:          #d1d5db;

  /* Insígnia d'informació (el localitzador del resum).
       component.badge.infoBg   → color.gray.200 (#f3f4f6)
       component.badge.infoText → color.gray.800 (= --text-body) */
  --badge-info-bg:        #f3f4f6;

  /* Tipografia */
  --font-family:          'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fw-medium:            500;
  --fw-semibold:          600;

  --fs-2xs:               12px;  --lh-2xs: 16px;
  --fs-xs:                13px;  --lh-xs:  18px;
  --fs-s:                 14px;  --lh-s:   20px;
  --fs-m:                 16px;  --lh-m:   24px;
  --fs-heading-m:         18px;  --lh-heading-m: 24px;

  /* Radi */
  --radius-sm:            4px;    /* primitive.borderRadius.rounded */
  --radius-lg:            8px;
  --radius-xl:            12px;   /* primitive.borderRadius.rounded-xl */
  --radius-2xl:           16px;
  --radius-3xl:           24px;   /* primitive.borderRadius.rounded-3xl */
  --radius-full:          999px;

  /* Espaiat — índex tal com el defineix el sistema */
  --dim-00:  1px;
  --dim-0:   2px;
  --dim-1:   4px;
  --dim-2:   6px;
  --dim-3:   8px;
  --dim-4:   10px;
  --dim-5:   12px;
  --dim-6:   16px;
  --dim-8:   20px;
  --dim-9:   24px;
  --dim-11:  32px;
  --dim-13:  40px;
  --dim-17:  56px;
  --dim-19:  64px;
}