/* ============================================================================
 * tokens.css — Panadería Trubia
 * Fuente única de verdad para colores, tipografía, espaciados, sombras.
 * Reemplaza:
 *   - css/design-system.css (:root)
 *   - admin/css/variables.css
 *   - admin/css/design-tokens.css
 *
 * Convención de prefijos:
 *   --pt-*  (Panadería Trubia) — tokens globales, sin ambigüedad de zona
 * ============================================================================ */

:root {

  /* =========================================================================
   * COLORES DE MARCA
   * Marrón cálido + dorado — artesanal, tradicional, cálido.
   * Derivados del hero del sitio público (coherencia visual con la marca).
   * ========================================================================= */

  --pt-primary-50:   #FDF6EC;   /* casi blanco tostado */
  --pt-primary-100:  #F6DFB5;   /* beige muy claro */
  --pt-primary-200:  #E8C890;
  --pt-primary-300:  #D4A466;
  --pt-primary-400:  #B8834A;
  --pt-primary-500:  #8B5A2B;   /* MARRÓN PRINCIPAL — base de marca */
  --pt-primary-600:  #7A4E25;
  --pt-primary-700:  #6A4219;   /* marrón oscuro */
  --pt-primary-800:  #5C3D2E;
  --pt-primary-900:  #3D2819;

  --pt-gold-50:      #FEF9ED;
  --pt-gold-100:     #FBEED0;
  --pt-gold-200:     #F6DFB5;
  --pt-gold-300:     #E4C088;
  --pt-gold-400:     #D6AD60;
  --pt-gold-500:     #C69A40;   /* DORADO — acento / highlights */
  --pt-gold-600:     #B68A35;
  --pt-gold-700:     #96712B;

  /* =========================================================================
   * COLORES FUNCIONALES
   * Tonos suaves y armónicos con los marrones (no Bootstrap saturado).
   * ========================================================================= */

  --pt-success:      #5D8A5F;   /* verde salvia */
  --pt-success-bg:   #E8F1E9;
  --pt-warning:      #D68C45;   /* ámbar */
  --pt-warning-bg:   #FBEAD6;
  --pt-danger:       #B85450;   /* rojo tierra (no semáforo) */
  --pt-danger-bg:    #F5DDDC;
  --pt-info:         #5E7F9E;   /* azul pizarra */
  --pt-info-bg:      #E1EAF2;

  /* =========================================================================
   * NEUTROS
   * Fondo cálido (no blanco puro) + escala de grises tintados.
   * ========================================================================= */

  --pt-bg:           #FEF9F1;   /* fondo base — beige cálido */
  --pt-bg-alt:       #F8F5EF;   /* fondo alterno para zonas */
  --pt-surface:      #FFFFFF;   /* tarjetas, modales */
  --pt-surface-alt:  #FAF7F2;   /* superficie sutil */

  --pt-gray-50:      #F9F7F3;
  --pt-gray-100:     #EFEBE4;
  --pt-gray-200:     #DDD6CB;
  --pt-gray-300:     #BFB6A7;
  --pt-gray-400:     #9A9184;
  --pt-gray-500:     #6C635A;
  --pt-gray-600:     #4D463F;
  --pt-gray-700:     #3A342E;
  --pt-gray-800:     #26221D;
  --pt-gray-900:     #1F1A12;   /* negro cálido, no #000 */

  --pt-text:         var(--pt-gray-900);
  --pt-text-muted:   var(--pt-gray-500);
  --pt-text-soft:    var(--pt-gray-400);
  --pt-text-on-dark: #FFFFFF;
  --pt-border:       var(--pt-gray-200);
  --pt-border-soft:  var(--pt-gray-100);

  /* =========================================================================
   * TIPOGRAFÍA
   * Playfair Display (títulos, serif elegante) + Raleway (cuerpo, sans ligero).
   * Se eliminan Merriweather, Open Sans, Inter — reduciendo carga de webfonts.
   * ========================================================================= */

  --pt-font-heading: 'Playfair Display', Georgia, serif;
  --pt-font-body:    'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pt-font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Escala tipográfica (modular — ratio 1.25) */
  --pt-text-xs:   0.75rem;    /* 12px */
  --pt-text-sm:   0.875rem;   /* 14px */
  --pt-text-base: 1rem;       /* 16px */
  --pt-text-md:   1.125rem;   /* 18px */
  --pt-text-lg:   1.25rem;    /* 20px */
  --pt-text-xl:   1.5rem;     /* 24px */
  --pt-text-2xl:  2rem;       /* 32px */
  --pt-text-3xl:  2.5rem;     /* 40px */
  --pt-text-4xl:  3rem;       /* 48px */

  --pt-font-weight-light:    300;
  --pt-font-weight-normal:   400;
  --pt-font-weight-medium:   500;
  --pt-font-weight-semibold: 600;
  --pt-font-weight-bold:     700;

  --pt-line-height-tight: 1.2;
  --pt-line-height-snug:  1.4;
  --pt-line-height-base:  1.6;
  --pt-line-height-loose: 1.8;

  /* =========================================================================
   * ESPACIADOS (8pt grid, en rem)
   * ========================================================================= */

  --pt-space-1:   0.25rem;   /* 4px  */
  --pt-space-2:   0.5rem;    /* 8px  */
  --pt-space-3:   0.75rem;   /* 12px */
  --pt-space-4:   1rem;      /* 16px */
  --pt-space-5:   1.5rem;    /* 24px */
  --pt-space-6:   2rem;      /* 32px */
  --pt-space-7:   3rem;      /* 48px */
  --pt-space-8:   4rem;      /* 64px */
  --pt-space-9:   6rem;      /* 96px */
  --pt-space-10:  8rem;      /* 128px */

  /* =========================================================================
   * BORDER RADIUS
   * ========================================================================= */

  --pt-radius-xs:   0.25rem;  /* 4px  — inputs pequeños */
  --pt-radius-sm:   0.5rem;   /* 8px  — botones base */
  --pt-radius-md:   0.75rem;  /* 12px — cards */
  --pt-radius-lg:   1rem;     /* 16px — modales */
  --pt-radius-xl:   1.5rem;   /* 24px — heros, contenedores grandes */
  --pt-radius-full: 9999px;   /* pills, avatars */

  /* =========================================================================
   * SOMBRAS (tintadas con el marrón, no grises neutros)
   * ========================================================================= */

  --pt-shadow-xs:   0 1px 2px rgba(139, 90, 43, 0.05);
  --pt-shadow-sm:   0 2px 6px rgba(139, 90, 43, 0.08);
  --pt-shadow-md:   0 4px 12px rgba(139, 90, 43, 0.10);
  --pt-shadow-lg:   0 8px 20px rgba(139, 90, 43, 0.12);
  --pt-shadow-xl:   0 16px 32px rgba(139, 90, 43, 0.15);
  --pt-shadow-2xl:  0 24px 48px rgba(139, 90, 43, 0.18);

  /* Sombra de focus (accesibilidad) */
  --pt-ring:        0 0 0 3px rgba(139, 90, 43, 0.25);
  --pt-ring-danger: 0 0 0 3px rgba(184, 84, 80, 0.25);

  /* =========================================================================
   * TRANSICIONES
   * ========================================================================= */

  --pt-transition-fast: 150ms ease;
  --pt-transition-base: 250ms ease;
  --pt-transition-slow: 400ms ease;
  --pt-transition-spring: 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* =========================================================================
   * Z-INDEX (escala controlada)
   * ========================================================================= */

  --pt-z-base:     1;
  --pt-z-dropdown: 100;
  --pt-z-sticky:   200;
  --pt-z-fixed:    300;
  --pt-z-backdrop: 400;
  --pt-z-modal:    500;
  --pt-z-popover:  600;
  --pt-z-tooltip:  700;
  --pt-z-toast:    800;

  /* =========================================================================
   * BREAKPOINTS (para referencia — usar en @media directamente)
   * sm  >= 640px
   * md  >= 768px
   * lg  >= 1024px
   * xl  >= 1280px
   * 2xl >= 1536px
   * ========================================================================= */

  --pt-bp-sm:  640px;
  --pt-bp-md:  768px;
  --pt-bp-lg:  1024px;
  --pt-bp-xl:  1280px;
  --pt-bp-2xl: 1536px;
}

/* ============================================================================
 * ALIAS DE COMPATIBILIDAD (transición suave desde los archivos antiguos)
 * Estas variables se mantienen para no romper el CSS existente.
 * Se pueden eliminar progresivamente conforme se migren archivos.
 * ============================================================================ */

:root {
  /* Compat con design-system.css */
  --color-primary:          var(--pt-primary-500);
  --color-primary-light:    var(--pt-primary-400);
  --color-primary-dark:     var(--pt-primary-700);
  --color-secondary:        var(--pt-gold-500);
  --color-secondary-light:  var(--pt-gold-300);
  --color-secondary-dark:   var(--pt-gold-600);
  --color-bg-light:         var(--pt-bg);
  --color-bg-white:         var(--pt-surface);
  --color-bg-gray:          var(--pt-bg-alt);
  --color-bg-dark:          var(--pt-primary-800);
  --color-text-primary:     var(--pt-text);
  --color-text-secondary:   var(--pt-gray-700);
  --color-text-muted:       var(--pt-text-muted);
  --color-text-white:       var(--pt-text-on-dark);
  --color-success:          var(--pt-success);
  --color-info:             var(--pt-info);
  --color-warning:          var(--pt-warning);
  --color-error:            var(--pt-danger);

  /* Compat con admin/css/variables.css */
  --admin-primary:          var(--pt-primary-500);
  --admin-primary-light:    var(--pt-primary-400);
  --admin-primary-dark:     var(--pt-primary-700);
  --admin-secondary:        var(--pt-gold-400);
  --admin-success:          var(--pt-success);
  --admin-warning:          var(--pt-warning);
  --admin-danger:           var(--pt-danger);
  --admin-info:             var(--pt-info);
  --admin-white:            var(--pt-surface);
  --admin-light:            var(--pt-bg-alt);
  --admin-lighter:          var(--pt-bg);
  --admin-border-radius:    var(--pt-radius-md);
  --admin-shadow-sm:        var(--pt-shadow-sm);
  --admin-shadow-md:        var(--pt-shadow-md);
  --admin-shadow-lg:        var(--pt-shadow-lg);
  --admin-transition:       var(--pt-transition-base);

  /* Compat con dashboard.css — variables sueltas */
  --gold:     var(--pt-gold-500);
  --brown:    var(--pt-primary-500);
  --positive: var(--pt-success);
  --negative: var(--pt-danger);
}