/* =================================================================
   tokens.css — fb_manager design tokens (v2, T26)

   SINGLE SOURCE OF TRUTH for colour, spacing, typography, radius,
   shadow, motion, and z-index. New code MUST use these tokens —
   never hard-code hex.

   v1 (T17B) covered the basics. v2 (T26) expands:
   - Type scale (added display sizes, refined line-heights)
   - Animation curves
   - Border-focus tokens (per status)
   - Status colour tints in 3 levels
   - Z-scale completa
   - Tokens para tabular numerals
   ================================================================= */

:root {
  /* ── BRAND ─────────────────────────────────────────────────── */
  --t-brand-navy:    #1A2035;
  --t-brand-gold:    #D4A820;
  --t-brand-gold-lt: #E8C96A;

  /* Ficha Productos: paleta de las referencias aprobadas. */
  --t-product-ink:    #0B214D;
  --t-product-muted:  #687C9F;
  --t-product-border: #DFE7F2;
  --t-product-accent: #FF6A00;
  --t-product-soft:   #F7F9FC;

  /* ── NEUTRAL SCALE (Tailwind-aligned) ────────────────────── */
  --t-gray-50:  #F9FAFB;
  --t-gray-100: #F3F4F6;
  --t-gray-200: #E5E7EB;
  --t-gray-300: #D1D5DB;
  --t-gray-400: #9CA3AF;
  --t-gray-500: #6B7280;
  --t-gray-600: #4B5563;
  --t-gray-700: #374151;
  --t-gray-800: #1F2937;
  --t-gray-900: #111827;
  --t-gray-950: #030712;

  /* ── SEMANTIC SURFACES ─────────────────────────────────────── */
  --t-surface:        #FFFFFF;
  --t-surface-soft:   var(--t-gray-50);
  --t-surface-muted:  var(--t-gray-100);
  --t-surface-strong: var(--t-gray-900);
  --t-bg:             #F7F8FA;
  --t-bg-soft:        #FBFCFD;
  --t-border:         var(--t-gray-200);
  --t-border-soft:    var(--t-gray-100);
  --t-border-strong:  var(--t-gray-300);
  --t-border-focus:   #2563EB;

  /* ── SEMANTIC TEXT ─────────────────────────────────────────── */
  --t-text:          var(--t-gray-700);
  --t-text-strong:   var(--t-gray-900);
  --t-text-soft:     var(--t-gray-500);
  --t-text-muted:    var(--t-gray-400);
  --t-text-inverse:  #FFFFFF;
  /* Blanco que NO se invierte: va sobre superficies que siguen siendo oscuras
     en tema claro y en oscuro (cost-box, degradados de marca, overlays).
     --t-text-inverse sí se invierte en dark-mode.css y ahí daría texto
     oscuro sobre fondo oscuro. */
  --t-on-dark:       #FFFFFF;
  --t-text-link:     #2563EB;
  --t-text-link-hover: #1D4ED8;

  /* ── STATUS COLOURS (base / tint / soft-tint / text on tint) ── */
  --t-success:        #059669;
  --t-success-tint:   #D1FAE5;
  --t-success-soft:   #ECFDF5;
  --t-success-text:   #065F46;
  --t-success-border: #6EE7B7;

  --t-warning:        #D97706;
  --t-warning-tint:   #FEF3C7;
  --t-warning-soft:   #FFFBEB;
  --t-warning-text:   #92400E;
  --t-warning-border: #FCD34D;

  --t-danger:         #DC2626;
  --t-danger-tint:    #FEE2E2;
  --t-danger-soft:    #FEF2F2;
  --t-danger-text:    #991B1B;
  --t-danger-border:  #FCA5A5;

  --t-info:           #2563EB;
  --t-info-tint:      #DBEAFE;
  --t-info-soft:      #EFF6FF;
  --t-info-text:      #1E40AF;
  --t-info-border:    #93C5FD;

  /* ── SPACING SCALE (4px base) ──────────────────────────────── */
  --t-space-0:  0;
  --t-space-px: 1px;
  --t-space-1:  4px;
  --t-space-2:  8px;
  --t-space-3:  12px;
  --t-space-4:  16px;
  --t-space-5:  20px;
  --t-space-6:  24px;
  --t-space-7:  28px;
  --t-space-8:  32px;
  --t-space-10: 40px;
  --t-space-12: 48px;
  --t-space-16: 64px;
  --t-space-20: 80px;
  --t-space-24: 96px;

  /* ── RADIUS ─────────────────────────────────────────────────── */
  --t-radius-none: 0;
  --t-radius-xs:   3px;
  --t-radius-sm:   6px;
  --t-radius-md:   10px;
  --t-radius-lg:   14px;
  --t-radius-xl:   20px;
  --t-radius-2xl:  28px;
  --t-radius-pill: 9999px;

  /* ── SHADOWS — material-style elevation, restrained ─────────── */
  --t-shadow-xs: 0 1px 2px 0 rgba(15,23,42,.04);
  --t-shadow-sm: 0 1px 3px 0 rgba(15,23,42,.06), 0 1px 2px -1px rgba(15,23,42,.04);
  --t-shadow-md: 0 4px 8px -2px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.04);
  --t-shadow-lg: 0 12px 18px -4px rgba(15,23,42,.10), 0 4px 8px -4px rgba(15,23,42,.04);
  --t-shadow-xl: 0 24px 32px -8px rgba(15,23,42,.12), 0 8px 12px -6px rgba(15,23,42,.06);
  --t-shadow-2xl: 0 40px 60px -12px rgba(15,23,42,.18);
  --t-shadow-card: var(--t-shadow-sm);
  --t-shadow-card-hover: var(--t-shadow-md);
  --t-shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.16);
  /* La pestaña activa de una ficha, encima de su barra blanca. */
  --t-shadow-tab: 0 -2px 8px -3px rgba(15,23,42,.18);

  /* ── TYPOGRAPHY ─────────────────────────────────────────────
     Inter is loaded in base.html. SF Pro / system-ui as backup. */
  --t-font-sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                   Roboto, Helvetica, Arial, sans-serif;
  --t-font-mono:   "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --t-font-display: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Type scale — modular, paired with line-height.
     2xs es el suelo de las superficies densas (tablas de ingredientes,
     píldoras de estado). Por debajo de 10px no hay texto: lo que había
     entre 7 y 9.5px eran iconos, y esos viven en la pista --t-ic-* de abajo. */
  --t-fs-2xs:     10px;   --t-lh-2xs:     14px;
  --t-fs-xs:      11px;   --t-lh-xs:      16px;
  --t-fs-sm:      12px;   --t-lh-sm:      18px;
  --t-fs-base:    14px;   --t-lh-base:    22px;
  --t-fs-md:      15px;   --t-lh-md:      23px;
  --t-fs-lg:      17px;   --t-lh-lg:      26px;
  --t-fs-xl:      20px;   --t-lh-xl:      28px;
  --t-fs-2xl:     24px;   --t-lh-2xl:     32px;
  --t-fs-3xl:     30px;   --t-lh-3xl:     38px;
  --t-fs-display: 40px;   --t-lh-display: 48px;
  --t-fs-hero:    56px;   --t-lh-hero:    64px;

  /* ── ACENTO ÍNDIGO / VIOLETA ─────────────────────────────────
     Dos roles vecinos que hasta ahora no tenían nombre y vivían como hex
     sueltos en recipes-page.css:
       índigo  → vínculo, chip de grupo, mapeo POS, previsualización de carta
       violeta → todo lo que es SUB-RECETA (fila, píldora, insignia «usada en»)
     Dentro de .esc-row-sub convivían dos púrpuras distintos (#6F42C1 en el
     icono y el nombre, #7C3AED en la unidad y el fondo de la fila); se unifican
     en el violeta, que es el del fondo. */
  --t-accent:        #6366F1;   --t-accent-strong: #4F46E5;
  --t-accent-deep:   #3730A3;   --t-accent-tint:   #E0E7FF;
  --t-accent-soft:   #F0F4FF;   --t-accent-border: #C7D2FE;

  --t-sub:           #7C3AED;   --t-sub-alt:       #8B5CF6;
  --t-sub-deep:      #5B21B6;   --t-sub-tint:      #EDE9FE;
  --t-sub-wash:      rgba(124, 58, 237, .04);
  --t-accent-wash:   rgba(99, 102, 241, .08);
  --t-accent-wash-border: rgba(99, 102, 241, .15);

  /* ── ALFA SOBRE OSCURO ───────────────────────────────────────
     Rampa de blanco para lo que vive encima de una superficie que es oscura
     en los dos temas: barra de selección múltiple, chips activos, overlay de
     foto. Había nueve alfas distintos repartidos entre cinco papeles; los que
     servían a las tarjetas .cost-box / .pvp-est-card cayeron con ellas, que
     eran CSS muerto (ningún marcado las emitía). */
  --t-on-dark-strong: rgba(255, 255, 255, .92);  /* texto principal */
  --t-on-dark-line:   rgba(255, 255, 255, .18);  /* bordes y fondos sutiles */
  --t-on-dark-hair:   rgba(255, 255, 255, .08);  /* filete interior superior */

  /* ── TINTA ───────────────────────────────────────────────────
     Slate-900 a distintos alfas. Las sombras de esta casa son a medida
     (filete interior + caída larga), así que --t-shadow-* no las sustituye:
     lo que se tokeniza es el COLOR, no la sombra entera. */
  --t-ink-04: rgba(15, 23, 42, .04);
  --t-ink-14: rgba(15, 23, 42, .14);

  /* Velos de superposición, de menos a más opaco: sobre una foto en hover,
     detrás de un modal, y el visor de foto a pantalla completa. */
  --t-scrim-soft:   rgba(15, 23, 42, .45);
  --t-scrim:        rgba(15, 23, 42, .55);
  --t-scrim-strong: rgba(15, 23, 42, .72);
  --t-scrim-drop:   rgba(0, 0, 0, .5);          /* sombra bajo la foto ampliada */

  /* ── HALOS Y LAVADOS ─────────────────────────────────────────
     Anillo de color alrededor de un punto de estado o de un botón. Un halo
     NO es un anillo de foco: para el foco está --t-shadow-focus, uno solo
     para toda la app. Aquí había cuatro anillos azules distintos. */
  --t-halo-info:            rgba(37, 99, 235, .18);
  --t-halo-warning:         rgba(217, 119, 6, .18);
  --t-halo-warning-strong:  rgba(217, 119, 6, .30);
  --t-halo-accent:          rgba(99, 102, 241, .25);
  --t-halo-amber:           rgba(252, 211, 77, .18);
  --t-wash-amber:           rgba(245, 158, 11, .06);
  --t-underline-warning:    rgba(146, 64, 14, .30);

  /* ── CATEGORÍAS DE PLATO ─────────────────────────────────────
     Fuente única de la paleta por tipo de plato. Estaba duplicada entre
     CATEGORY_OPTIONS (recipes/header.js) y las filas de .rec-list-table,
     y las dos versiones discrepaban en 6 de 8 categorías: el mismo plato
     salía ámbar en la pastilla y rosa en la lista. */
  --t-cat-main:            #DC2626;  --t-cat-main-soft:       #FEE2E2;
  --t-cat-starter:         #10B981;  --t-cat-starter-soft:    #D1FAE5;
  --t-cat-dessert:         #D97706;  --t-cat-dessert-soft:    #FEF3C7;
  --t-cat-guarnicion:      #65A30D;  --t-cat-guarnicion-soft: #ECFCCB;
  --t-cat-cocktail:        #7C3AED;  --t-cat-cocktail-soft:   #EDE9FE;
  --t-cat-breakfast:       #EA580C;  --t-cat-breakfast-soft:  #FFEDD5;
  --t-cat-snack:           #0891B2;  --t-cat-snack-soft:      #CFFAFE;
  --t-cat-sauce:           #92400E;  --t-cat-sauce-soft:      #FEF3C7;
  --t-cat-sub-recipe:      #475569;  --t-cat-sub-recipe-soft: #F1F5F9;
  --t-cat-unassigned:      #94A3B8;  --t-cat-unassigned-soft: #F8FAFC;

  /* Icon scale — separada del texto a propósito. Un font-size sobre un <i>
     de FontAwesome dimensiona un glifo, no fija una tipografía: mezclarlos
     en la misma escala es lo que produjo 7 pasos en 3px. */
  --t-ic-xs:    9px;    /* glifos inline junto a texto 2xs */
  --t-ic-sm:   11px;    /* iconos de botón denso y de chip */
  --t-ic-md:   13px;    /* iconos de acción en fila y cabecera */
  --t-ic-lg:   18px;    /* iconos de CTA y de zona de importación */
  --t-ic-xl:   28px;    /* ilustración de estado vacío */
  --t-ic-hero: 48px;    /* ilustración de estado vacío a página completa */

  --t-fw-regular:  400;
  --t-fw-medium:   500;
  --t-fw-semibold: 600;
  --t-fw-bold:     700;
  --t-fw-black:    800;

  /* Letter spacing */
  --t-tracking-tight:   -0.02em;
  --t-tracking-snug:    -0.01em;
  --t-tracking-normal:   0;
  --t-tracking-wide:     0.04em;
  --t-tracking-wider:    0.08em;
  --t-tracking-widest:   0.12em;

  /* ── Z-INDEX (one scale, used everywhere) ───────────────────── */
  --t-z-base:     1;
  --t-z-raised:   10;
  --t-z-dropdown: 50;
  --t-z-sticky:   80;
  --t-z-overlay:  90;
  --t-z-modal:    100;
  --t-z-popover:  150;
  --t-z-toast:    200;
  --t-z-max:      999;

  /* ── MOTION ─────────────────────────────────────────────────
     Three timings + four easing curves. Pin one canonical motion
     style across the app. */
  --t-duration-instant: 80ms;
  --t-duration-fast:    120ms;
  --t-duration-base:    180ms;
  --t-duration-slow:    240ms;
  --t-duration-slower:  360ms;

  --t-ease-linear:      linear;
  --t-ease-out:         cubic-bezier(0.4, 0.0, 0.2, 1);
  --t-ease-in:          cubic-bezier(0.4, 0.0, 1, 1);
  --t-ease-in-out:      cubic-bezier(0.4, 0.0, 0.2, 1);
  --t-ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Legacy aliases (v1 transition tokens still in code) */
  --t-transition-fast:  var(--t-duration-fast) var(--t-ease-out);
  --t-transition:       var(--t-duration-base) var(--t-ease-out);
  --t-transition-slow:  var(--t-duration-slow) var(--t-ease-out);

  /* ── LAYOUT ─────────────────────────────────────────────────
     Common content widths and dimensions used across pages. */
  --t-page-max:        1440px;
  --t-content-max:     1280px;
  --t-narrow-max:      720px;
  --t-topbar-height:   56px;
  --t-subtabs-height:  40px;
  --t-sidebar-width:   240px;
}

/* ── BRIDGE TO LEGACY ────────────────────────────────────────── */
:root {
  --brand-navy:    var(--t-brand-navy);
  --brand-gold:    var(--t-brand-gold);
  --brand-gold-lt: var(--t-brand-gold-lt);
}

/* ── REDUCED-MOTION RESPECT ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-duration-instant: 0ms;
    --t-duration-fast:    0ms;
    --t-duration-base:    0ms;
    --t-duration-slow:    0ms;
    --t-duration-slower:  0ms;
  }
}