/* =====================================================================
   CONACOFI · Plataforma Web Centralizada de Control Biológico
   tokens.css — ÚNICO PUNTO DE VERDAD DE COLOR Y TEMA
   ---------------------------------------------------------------------
   Nivel 1 · Paleta institucional (primitivos --pal-*)
     Valores literales. ÚNICO lugar del proyecto donde existen códigos hex.
     Nunca se usan directamente en componentes ni en páginas.
   Nivel 2 · Tokens semánticos (--color-*)
     Lo que consumen Tailwind (assets/js/tailwind.config.js), los
     componentes (assets/css/components.css) y, en producción, Angular.
     Cada tema (data-theme) reasigna los mismos nombres semánticos.
       data-theme="public" → Sitio público, identidad Gobierno de México 2024-2030
       data-theme="admin"  → Panel administrativo (backoffice), neutros cálidos
   Regla: si un color no existe aquí, no existe en la plataforma.
   ===================================================================== */

:root {
  /* ---------- 1.1 Gobierno de México 2024-2030 · Guinda ---------- */
  --pal-guinda-50:  #F9EEF2;
  --pal-guinda-100: #F1D8E1;
  --pal-guinda-200: #E0B0C1;
  --pal-guinda-300: #C77A95;
  --pal-guinda-500: #9B2247; /* Guinda institucional */
  --pal-guinda-700: #611232; /* Guinda oscuro institucional */
  --pal-guinda-800: #4E0E28;
  --pal-guinda-900: #3A0A1E; /* Barra secundaria de navegación gob.mx */

  /* ---------- 1.2 Gobierno de México 2024-2030 · Dorado ---------- */
  --pal-dorado-50:  #FBF6E9;
  --pal-dorado-100: #F4E9C8;
  --pal-dorado-300: #E6D194; /* Dorado claro institucional */
  --pal-dorado-500: #A57F2C; /* Dorado institucional */
  --pal-dorado-700: #7A5D1F;

  /* ---------- 1.3 Gobierno de México 2024-2030 · Verde ----------- */
  --pal-verde-50:  #E9F2EF;
  --pal-verde-100: #CFE3DD;
  --pal-verde-300: #7FA89E;
  --pal-verde-500: #1E5B4F; /* Verde institucional */
  --pal-verde-600: #174A40;
  --pal-verde-900: #002F2A; /* Verde oscuro institucional */

  /* ---------- 1.4 Gobierno de México · Grises institucionales ---- */
  --pal-gris-500: #98989A;  /* Gris institucional */
  --pal-negro:    #161A1D;  /* Negro institucional */

  /* ---------- 1.5 CONACOFI · colores de marca (tomados del logotipo)
     Uso exclusivamente decorativo / de acento; no sustituyen a la paleta
     de Gobierno en el sitio público. */
  --pal-conacofi-verde: #026202;
  --pal-conacofi-bosque: #186230;
  --pal-conacofi-rojo:  #E8003C;

  /* ---------- 1.6 Neutros (escala "piedra", cálida) ---------- */
  --pal-blanco:     #FFFFFF;
  --pal-piedra-50:  #FAFAF9;
  --pal-piedra-100: #F5F5F4;
  --pal-piedra-150: #EFEEEC;
  --pal-piedra-200: #E7E5E4;
  --pal-piedra-300: #D6D3D1;
  --pal-piedra-400: #A8A29E;
  --pal-piedra-500: #78716C;
  --pal-piedra-600: #57534E;
  --pal-piedra-700: #44403C;
  --pal-piedra-800: #292524;
  --pal-piedra-900: #1C1917;

  /* ---------- 1.7 Funcionales (estados) ---------- */
  --pal-exito-50:   #E7F3EC;
  --pal-exito-600:  #2F7D4F;
  --pal-aviso-50:   #FDF3E1;
  --pal-aviso-600:  #A86200;
  --pal-error-50:   #FDECEA;
  --pal-error-600:  #B42318;
  --pal-info-50:    #E8F0F7;
  --pal-info-600:   #1D5E8C;
}

/* =====================================================================
   2. TOKENS SEMÁNTICOS
   ===================================================================== */

/* ---------- 2.A Tema público · Gobierno de México ---------- */
:root,
[data-theme="public"] {
  --color-canvas:          var(--pal-blanco);
  --color-surface:         var(--pal-blanco);
  --color-surface-alt:     var(--pal-piedra-100);
  --color-surface-sunken:  var(--pal-piedra-150);
  --color-line:            var(--pal-piedra-200);
  --color-line-strong:     var(--pal-piedra-300);

  --color-fg:              var(--pal-negro);
  --color-fg-muted:        var(--pal-piedra-600);
  --color-fg-subtle:       var(--pal-piedra-500);
  --color-fg-inverse:      var(--pal-blanco);

  --color-primary:         var(--pal-guinda-700);
  --color-primary-hover:   var(--pal-guinda-800);
  --color-primary-soft:    var(--pal-guinda-50);
  --color-primary-fg:      var(--pal-blanco);
  --color-primary-strong:  var(--pal-guinda-500);

  --color-accent:          var(--pal-dorado-500);
  --color-accent-soft:     var(--pal-dorado-50);
  --color-accent-line:     var(--pal-dorado-300);
  --color-accent-fg:       var(--pal-blanco);

  --color-brand-bar:       var(--pal-guinda-700);
  --color-brand-deep:      var(--pal-guinda-900);
  --color-brand-fg:        var(--pal-blanco);
  --color-brand-fg-muted:  var(--pal-guinda-200);

  --color-nav:             var(--pal-blanco);
  --color-nav-fg:          var(--pal-piedra-700);
  --color-nav-active:      var(--pal-guinda-50);
  --color-nav-active-fg:   var(--pal-guinda-700);

  --color-focus:           var(--pal-dorado-500);
  --color-ph-a:            var(--pal-piedra-150);
  --color-ph-b:            var(--pal-piedra-100);
  --color-ph-fg:           var(--pal-piedra-400);
}

/* ---------- 2.B Tema administrativo · neutros cálidos ---------- */
[data-theme="admin"] {
  --color-canvas:          var(--pal-piedra-100);
  --color-surface:         var(--pal-blanco);
  --color-surface-alt:     var(--pal-piedra-50);
  --color-surface-sunken:  var(--pal-piedra-150);
  --color-line:            var(--pal-piedra-200);
  --color-line-strong:     var(--pal-piedra-300);

  --color-fg:              var(--pal-piedra-900);
  --color-fg-muted:        var(--pal-piedra-600);
  --color-fg-subtle:       var(--pal-piedra-500);
  --color-fg-inverse:      var(--pal-blanco);

  --color-primary:         var(--pal-verde-500);
  --color-primary-hover:   var(--pal-verde-600);
  --color-primary-soft:    var(--pal-verde-50);
  --color-primary-fg:      var(--pal-blanco);
  --color-primary-strong:  var(--pal-verde-900);

  --color-accent:          var(--pal-dorado-500);
  --color-accent-soft:     var(--pal-dorado-50);
  --color-accent-line:     var(--pal-dorado-300);
  --color-accent-fg:       var(--pal-blanco);

  --color-brand-bar:       var(--pal-piedra-900);
  --color-brand-deep:      var(--pal-piedra-800);
  --color-brand-fg:        var(--pal-blanco);
  --color-brand-fg-muted:  var(--pal-piedra-400);

  --color-nav:             var(--pal-blanco);
  --color-nav-fg:          var(--pal-piedra-600);
  --color-nav-active:      var(--pal-verde-50);
  --color-nav-active-fg:   var(--pal-verde-500);

  --color-focus:           var(--pal-verde-300);
  --color-ph-a:            var(--pal-piedra-200);
  --color-ph-b:            var(--pal-piedra-150);
  --color-ph-fg:           var(--pal-piedra-400);
}

/* ---------- 2.C Tokens compartidos por ambos temas ---------- */
:root {
  --color-success:         var(--pal-exito-600);
  --color-success-soft:    var(--pal-exito-50);
  --color-warning:         var(--pal-aviso-600);
  --color-warning-soft:    var(--pal-aviso-50);
  --color-danger:          var(--pal-error-600);
  --color-danger-soft:     var(--pal-error-50);
  --color-info:            var(--pal-info-600);
  --color-info-soft:       var(--pal-info-50);

  /* Visibilidad de la información (IP-1) */
  --color-vis-public:      var(--pal-verde-500);
  --color-vis-public-soft: var(--pal-verde-50);
  --color-vis-restricted:      var(--pal-dorado-700);
  --color-vis-restricted-soft: var(--pal-dorado-100);

  /* Marca CONACOFI (acentos decorativos) */
  --color-conacofi:        var(--pal-conacofi-verde);
  --color-conacofi-alt:    var(--pal-conacofi-rojo);

  /* Geometría */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgb(0 0 0 / .04), 0 1px 1px rgb(0 0 0 / .03);
  --shadow-pop:  0 10px 30px -10px rgb(0 0 0 / .25);
}