/* ========================================================================
   KRECIENTE — Design tokens
   Identidad v2 | 2026-09-25
   Símbolo 04F · Red Hat Display · Paleta 1 (petróleo + menta)

   1. Primitivos   escalas aprobadas
   2. Semánticos   roles de UI; preferirlos en componentes nuevos
   3. Datos        paleta de gráficas validada para daltonismo (protan/deutan)
   ======================================================================== */

/* Fuentes: Red Hat Display y Red Hat Text se cargan desde index.html con
   preconnect, no con @import aquí (un @import encadena y bloquea el render). */

:root {
  /* ---------------------------------------------------------------------
     1. Primitivos
     --------------------------------------------------------------------- */
  --kc-white:#FFFFFF;
  --kc-white-rgb:255,255,255;
  --kc-black:#000000;
  --kc-tinta:#0E2A33;
  --kc-tinta-suave:#3B5A63;

  /* Petróleo: primario (marca = 800) */
  --kc-petroleo-50:#EBFAFF;
  --kc-petroleo-100:#D3F3FE;
  --kc-petroleo-200:#B1E2F3;
  --kc-petroleo-300:#88CBE1;
  --kc-petroleo-400:#5CB0CA;
  --kc-petroleo-500:#3195B1;
  --kc-petroleo-600:#077D97;
  --kc-petroleo-700:#04657C;
  --kc-petroleo-800:#0F4C5C;
  --kc-petroleo-900:#013C4A;
  --kc-petroleo-950:#012A35;
  --kc-petroleo-950-rgb:1,42,53;

  /* Menta: acento (marca = 500; 25 = fondo de marca) */
  --kc-menta-25:#F5FFFC;
  --kc-menta-50:#E0FFF7;
  --kc-menta-100:#CBF8ED;
  --kc-menta-200:#A5E9DA;
  --kc-menta-300:#73D4C0;
  --kc-menta-400:#37BBA4;
  --kc-menta-500:#2FA38F;
  --kc-menta-600:#008371;
  --kc-menta-700:#026A5B;
  --kc-menta-800:#045649;
  --kc-menta-900:#033F36;
  --kc-menta-950:#012D25;

  /* Neutro: grises con matiz petróleo */
  --kc-neutro-25:#F8FCFD;
  --kc-neutro-50:#F3F8F9;
  --kc-neutro-100:#E8EEF0;
  --kc-neutro-200:#D2DBDE;
  --kc-neutro-300:#B6C1C5;
  --kc-neutro-400:#99A6AA;
  --kc-neutro-500:#7C8A8F;
  --kc-neutro-600:#657377;
  --kc-neutro-700:#505D62;
  --kc-neutro-800:#404B4F;
  --kc-neutro-900:#2E373A;
  --kc-neutro-950:#1F2729;

  /* Colores de apoyo */
  --kc-coral-50:#FEF4F2;
  --kc-coral-100:#FEE7E1;
  --kc-coral-200:#FECCBF;
  --kc-coral-300:#FEA58E;
  --kc-coral-400:#EE7F63;
  --kc-coral-500:#D55E40;
  --kc-coral-600:#BA4326;
  --kc-coral-700:#9F2D0E;
  --kc-coral-800:#841E00;
  --kc-coral-900:#641400;
  --kc-coral-950:#480C00;

  --kc-ambar-50:#FEF5EA;
  --kc-ambar-100:#FFE9CD;
  --kc-ambar-200:#FAD29C;
  --kc-ambar-300:#EAB569;
  --kc-ambar-400:#D4952F;
  --kc-ambar-500:#B57A02;
  --kc-ambar-600:#966504;
  --kc-ambar-700:#7B5101;
  --kc-ambar-800:#634101;
  --kc-ambar-900:#492F02;
  --kc-ambar-950:#342101;

  --kc-violeta-50:#F8F5FF;
  --kc-violeta-100:#EFE9FE;
  --kc-violeta-200:#DED1FF;
  --kc-violeta-300:#C8B0FF;
  --kc-violeta-400:#AF8CF5;
  --kc-violeta-500:#956DDE;
  --kc-violeta-600:#7E53C4;
  --kc-violeta-700:#683EA9;
  --kc-violeta-800:#552E8F;
  --kc-violeta-900:#401E6E;
  --kc-violeta-950:#2D1351;

  --kc-ciruela-50:#FEF3F8;
  --kc-ciruela-100:#FFE5F0;
  --kc-ciruela-200:#FFC7E0;
  --kc-ciruela-300:#F3A3C9;
  --kc-ciruela-400:#DD81AE;
  --kc-ciruela-500:#C36193;
  --kc-ciruela-600:#A9487B;
  --kc-ciruela-700:#8F3465;
  --kc-ciruela-800:#772452;
  --kc-ciruela-900:#5B163D;
  --kc-ciruela-950:#420D2B;

  --kc-oliva-50:#EFFCE1;
  --kc-oliva-100:#E3F4CF;
  --kc-oliva-200:#CAE3AD;
  --kc-oliva-300:#ACCC83;
  --kc-oliva-400:#8CB258;
  --kc-oliva-500:#6F9730;
  --kc-oliva-600:#587E07;
  --kc-oliva-700:#476704;
  --kc-oliva-800:#385300;
  --kc-oliva-900:#283D00;
  --kc-oliva-950:#1B2B01;

  /* ---------------------------------------------------------------------
     2. Semánticos
     --------------------------------------------------------------------- */

  /* Marca */
  --kc-color-primary:var(--kc-petroleo-800);
  --kc-color-primary-rgb:15,76,92;
  --kc-color-secondary:var(--kc-petroleo-600);
  --kc-color-secondary-rgb:7,125,151;
  --kc-color-accent:var(--kc-menta-500);
  --kc-color-accent-rgb:47,163,143;
  --kc-color-accent-soft:var(--kc-menta-50);

  /* Superficies */
  --kc-bg-page:var(--kc-menta-25);
  --kc-bg-surface:var(--kc-white);
  --kc-bg-subtle:var(--kc-neutro-50);
  --kc-bg-muted:var(--kc-menta-50);
  --kc-bg-dark:var(--kc-petroleo-800);
  --kc-bg-dark-deep:var(--kc-petroleo-950);
  --kc-bg-surface-translucent:rgba(var(--kc-white-rgb),.96);
  --kc-bg-inverse-hover:rgba(var(--kc-white-rgb),.08);
  --kc-bg-inverse-active:rgba(var(--kc-white-rgb),.14);
  --kc-bg-overlay:rgba(var(--kc-petroleo-950-rgb),.62);

  /* Texto (todos >= 4.5:1 sobre blanco y fondo de página) */
  --kc-text-primary:var(--kc-tinta);
  --kc-text-secondary:var(--kc-tinta-suave);
  --kc-text-muted:var(--kc-neutro-600);
  --kc-text-inverse:var(--kc-white);
  --kc-text-inverse-muted:rgba(var(--kc-white-rgb),.78);
  --kc-text-inverse-subtle:rgba(var(--kc-white-rgb),.58);
  --kc-text-accent-on-dark:var(--kc-menta-300);
  --kc-text-link:var(--kc-petroleo-800);
  --kc-text-link-hover:var(--kc-petroleo-900);

  /* Bordes */
  --kc-border-subtle:var(--kc-neutro-100);
  --kc-border-default:var(--kc-neutro-200);
  --kc-border-strong:var(--kc-neutro-400);
  --kc-border-focus:var(--kc-menta-600);
  --kc-border-inverse:rgba(var(--kc-white-rgb),.12);

  /* Estados: base = relleno/ícono; -text = texto e íconos sobre -soft */
  --kc-success:#218A45;
  --kc-success-soft:#EBFBED;
  --kc-success-border:#AEDBB6;
  --kc-success-text:#137738;
  --kc-warning:#EAB532;
  --kc-warning-soft:#FEF5E3;
  --kc-warning-border:#E3CB99;
  --kc-warning-text:#7E5E01;
  --kc-alert:#E4762C;
  --kc-alert-soft:#FFF3ED;
  --kc-alert-border:#F4C1A5;
  --kc-alert-text:#9B4804;
  --kc-danger:#BA2B2E;
  --kc-danger-soft:#FFF3F1;
  --kc-danger-border:#F9BDB7;
  --kc-danger-text:#BA2B2E;
  --kc-info:#1479B0;
  --kc-info-soft:#EEF7FE;
  --kc-info-border:#A5D5F7;
  --kc-info-text:#026A9D;

  /* Gradientes (solo superficies de marca, nunca en el logo) */
  --kc-gradient-brand:linear-gradient(135deg,var(--kc-petroleo-800) 0%,var(--kc-menta-500) 55%,var(--kc-menta-50) 100%);
  --kc-gradient-brand-soft:linear-gradient(135deg,rgba(15,76,92,.10) 0%,rgba(47,163,143,.10) 45%,rgba(224,255,247,.90) 100%);
  --kc-gradient-dark:linear-gradient(135deg,var(--kc-petroleo-950) 0%,var(--kc-petroleo-800) 55%,var(--kc-petroleo-600) 100%);

  /* Tipografía */
  --kc-font-display:'Red Hat Display',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --kc-font-body:'Red Hat Text',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --kc-fw-regular:400;
  --kc-fw-medium:500;
  --kc-fw-semibold:600;
  --kc-fw-bold:700;
  --kc-fs-2xs:.6875rem;
  --kc-fs-xs:.75rem;
  --kc-fs-sm:.875rem;
  --kc-fs-md:1rem;
  --kc-fs-lg:1.125rem;
  --kc-fs-xl:1.25rem;
  --kc-fs-2xl:1.5rem;
  --kc-fs-3xl:1.875rem;
  --kc-fs-4xl:2.25rem;
  --kc-fs-5xl:3rem;
  --kc-fs-6xl:3.75rem;
  --kc-fs-7xl:4.5rem;
  --kc-line-tight:1.05;
  --kc-line-heading:1.15;
  --kc-line-body:1.6;
  --kc-line-ui:1.4;
  --kc-letter-tight:-.025em;
  --kc-letter-wide:.04em;
  --kc-letter-caps:.12em;

  /* Espaciado (base 4px) */
  --kc-space-0:0;
  --kc-space-1:.25rem;
  --kc-space-2:.5rem;
  --kc-space-3:.75rem;
  --kc-space-4:1rem;
  --kc-space-5:1.25rem;
  --kc-space-6:1.5rem;
  --kc-space-8:2rem;
  --kc-space-10:2.5rem;
  --kc-space-12:3rem;
  --kc-space-16:4rem;
  --kc-space-20:5rem;
  --kc-space-24:6rem;
  --kc-space-32:8rem;
  --kc-spacing-xs:var(--kc-space-1);
  --kc-spacing-sm:var(--kc-space-2);
  --kc-spacing-md:var(--kc-space-4);
  --kc-spacing-lg:var(--kc-space-6);
  --kc-spacing-xl:var(--kc-space-8);
  --kc-spacing-2xl:var(--kc-space-12);
  --kc-spacing-3xl:var(--kc-space-16);

  /* Radios */
  --kc-radius-xs:4px;
  --kc-radius-sm:8px;
  --kc-radius-md:12px;
  --kc-radius-lg:16px;
  --kc-radius-xl:24px;
  --kc-radius-2xl:32px;
  --kc-radius-pill:999px;

  /* Sombras (tinta de marca) */
  --kc-shadow-xs:0 1px 2px rgba(14,42,51,.05);
  --kc-shadow-sm:0 2px 4px rgba(14,42,51,.05),0 1px 2px rgba(14,42,51,.03);
  --kc-shadow-md:0 8px 24px rgba(14,42,51,.08),0 2px 8px rgba(14,42,51,.04);
  --kc-shadow-lg:0 16px 40px rgba(14,42,51,.12),0 4px 12px rgba(14,42,51,.05);
  --kc-shadow-xl:0 24px 64px rgba(14,42,51,.16),0 8px 24px rgba(14,42,51,.08);

  /* Layout */
  --kc-container-sm:720px;
  --kc-container-md:960px;
  --kc-container-lg:1200px;
  --kc-container-xl:1280px;
  --kc-container-2xl:1440px;
  --kc-gutter-mobile:20px;
  --kc-gutter-tablet:32px;
  --kc-gutter-desktop:48px;
  --kc-header-height:76px;

  /* Movimiento y foco */
  --kc-duration-fast:120ms;
  --kc-duration-normal:200ms;
  --kc-duration-slow:320ms;
  --kc-ease:cubic-bezier(.2,.8,.2,1);
  --kc-focus-ring:0 0 0 4px rgba(47,163,143,.30);

  /* Capas */
  --kc-z-dropdown:1000;
  --kc-z-sticky:1020;
  --kc-z-overlay:1040;
  --kc-z-modal:1050;
  --kc-z-tooltip:1080;
  --kc-z-toast:1100;

  /* ---------------------------------------------------------------------
     3. Datos
     Categórica: asignar en este orden, nunca en ciclo; máx. 7 series
     (el resto va a "Otros"). En dispersión, máx. 3. El ámbar claro
     (<3:1 sobre blanco) exige etiqueta directa o tabla.
     --------------------------------------------------------------------- */
  --kc-chart-1:#00899F;
  --kc-chart-2:#E2684A;
  --kc-chart-3:#7145B5;
  --kc-chart-4:#2FA38F;
  --kc-chart-5:#E8A127;
  --kc-chart-6:#B94F87;
  --kc-chart-7:#6D952C;

  /* Misma paleta para superficies oscuras (--kc-chart-surface-dark) */
  --kc-chart-1-dark:#2C94B0;
  --kc-chart-2-dark:#D76549;
  --kc-chart-3-dark:#8557C8;
  --kc-chart-4-dark:#099F8A;
  --kc-chart-5-dark:#C38406;
  --kc-chart-6-dark:#C0558D;
  --kc-chart-7-dark:#698E2F;

  --kc-chart-surface:var(--kc-white);
  --kc-chart-surface-dark:var(--kc-petroleo-950);
  --kc-chart-grid:var(--kc-neutro-100);
  --kc-chart-axis:var(--kc-neutro-300);
  --kc-chart-label:var(--kc-neutro-600);

  /* Secuencial (magnitud): un solo matiz, claro -> oscuro */
  --kc-chart-seq-1:var(--kc-petroleo-200);
  --kc-chart-seq-2:var(--kc-petroleo-300);
  --kc-chart-seq-3:var(--kc-petroleo-400);
  --kc-chart-seq-4:var(--kc-petroleo-500);
  --kc-chart-seq-5:var(--kc-petroleo-600);
  --kc-chart-seq-6:var(--kc-petroleo-700);
  --kc-chart-seq-7:var(--kc-petroleo-800);
  --kc-chart-seq-8:var(--kc-petroleo-900);

  /* Divergente (bajo / sobre meta): coral <-> neutro <-> petróleo */
  --kc-chart-div-neg-3:var(--kc-coral-700);
  --kc-chart-div-neg-2:var(--kc-coral-500);
  --kc-chart-div-neg-1:var(--kc-coral-300);
  --kc-chart-div-mid:var(--kc-neutro-100);
  --kc-chart-div-pos-1:var(--kc-petroleo-300);
  --kc-chart-div-pos-2:var(--kc-petroleo-500);
  --kc-chart-div-pos-3:var(--kc-petroleo-700);
}


/* ---------------------------------------------------------------------
   4. Theme overrides (ADR-034)
   Semantic tokens only: component structure and behavior stay identical.
   --------------------------------------------------------------------- */

html[data-theme="dark"] {
  --kc-color-primary:var(--kc-menta-300);
  --kc-color-primary-rgb:115,212,192;
  --kc-color-secondary:var(--kc-petroleo-300);
  --kc-color-secondary-rgb:136,203,225;
  --kc-color-accent:var(--kc-menta-400);
  --kc-color-accent-rgb:55,187,164;
  --kc-color-accent-soft:var(--kc-menta-950);

  --kc-bg-page:#111B1F;
  --kc-bg-surface:var(--kc-neutro-950);
  --kc-bg-subtle:var(--kc-neutro-900);
  --kc-bg-muted:var(--kc-petroleo-950);
  --kc-bg-dark:var(--kc-petroleo-950);
  --kc-bg-dark-deep:#071419;
  --kc-bg-surface-translucent:rgba(31,39,41,.96);
  --kc-bg-inverse-hover:rgba(var(--kc-white-rgb),.09);
  --kc-bg-inverse-active:rgba(var(--kc-white-rgb),.15);
  --kc-bg-overlay:rgba(0,0,0,.70);

  --kc-text-primary:var(--kc-neutro-50);
  --kc-text-secondary:var(--kc-neutro-300);
  --kc-text-muted:var(--kc-neutro-400);
  --kc-text-link:var(--kc-menta-300);
  --kc-text-link-hover:var(--kc-menta-200);

  --kc-border-subtle:var(--kc-neutro-800);
  --kc-border-default:var(--kc-neutro-700);
  --kc-border-strong:var(--kc-neutro-600);
  --kc-border-focus:var(--kc-menta-400);

  --kc-success:#63C77B;
  --kc-success-soft:#163A22;
  --kc-success-border:#285F37;
  --kc-success-text:#8ADA9A;
  --kc-warning:#F0C45B;
  --kc-warning-soft:#3B3016;
  --kc-warning-border:#66521F;
  --kc-warning-text:#F3CF79;
  --kc-alert:#F29A62;
  --kc-alert-soft:#402519;
  --kc-alert-border:#74412A;
  --kc-alert-text:#FFB081;
  --kc-danger:#F17A7D;
  --kc-danger-soft:#421D20;
  --kc-danger-border:#733337;
  --kc-danger-text:#FF9A9D;
  --kc-info:#6CBCE8;
  --kc-info-soft:#173142;
  --kc-info-border:#285773;
  --kc-info-text:#8DD0F4;

  --kc-shadow-xs:0 1px 2px rgba(0,0,0,.20);
  --kc-shadow-sm:0 2px 6px rgba(0,0,0,.24);
  --kc-shadow-md:0 8px 24px rgba(0,0,0,.28);
  --kc-shadow-lg:0 16px 40px rgba(0,0,0,.32);
  --kc-shadow-xl:0 24px 64px rgba(0,0,0,.40);

  --kc-chart-surface:var(--kc-neutro-950);
  --kc-chart-grid:var(--kc-neutro-800);
  --kc-chart-axis:var(--kc-neutro-700);
  --kc-chart-label:var(--kc-neutro-300);
}