/* ==========================================================
   KYRA CRM · Design tokens v1.0
   Marca: Tinta #0F1B3D + Naranja #FF5A36 · Logo A (embudo horizontal)
   Uso: cargar este archivo antes que cualquier otro CSS del CRM.
   Tema oscuro: <html data-ky-theme="dark"> (o automático por prefers-color-scheme).
   ========================================================== */
@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&family=Nunito:wght@800;900&display=swap");

:root{
  /* ---- 1. Paleta base (no usar directo en componentes, usar los semánticos) ---- */
  --ky-ink:#0F1B3D;          /* Tinta: texto, sidebar, fondos de marca */
  --ky-orange:#FF5A36;       /* Naranja: acción principal y acento */
  --ky-white:#FFFFFF;
  --ky-marine-1:#0A1330; --ky-marine-2:#14224D; --ky-marine-3:#223A78;

  /* Escala neutra azulada */
  --ky-n-50:#F4F6FB; --ky-n-100:#E7EBF6; --ky-n-200:#D9DFEE; --ky-n-300:#BCC6E0;
  --ky-n-400:#8FA0C8; --ky-n-500:#6B7AA3; --ky-n-600:#4D5A7C;
  --ky-n-700:#34416A; --ky-n-800:#14224D; --ky-n-900:#0F1B3D; --ky-n-950:#0A1330;

  /* Escala naranja */
  --ky-o-50:#FFF1ED; --ky-o-100:#FFDDD3; --ky-o-300:#FF9C84; --ky-o-400:#FF7A5C;
  --ky-o-500:#FF5A36; --ky-o-600:#E8431E; --ky-o-700:#C23316;

  /* Estados del producto */
  --ky-green:#1FB67A; --ky-green-text:#12875A; --ky-green-bg:#E3F6EE;
  --ky-amber:#F2A93B; --ky-amber-text:#8F5C0B; --ky-amber-bg:#FDF1DC;
  --ky-red:#E5484D;   --ky-red-text:#BF2F34;   --ky-red-bg:#FCE8E9;
  --ky-blue:#3B82F6;  --ky-blue-text:#2159C0;  --ky-blue-bg:#E6EFFE;

  /* ---- 2. Tokens semánticos · TEMA CLARO (por defecto) ---- */
  --ky-bg:var(--ky-n-50);               /* fondo de pantalla */
  --ky-surface:var(--ky-white);         /* tarjetas, tablas, modales */
  --ky-surface-2:var(--ky-n-100);       /* columnas, encabezados de tabla, hover */
  --ky-surface-3:var(--ky-n-200);
  --ky-text:var(--ky-n-900);
  --ky-text-muted:var(--ky-n-600);
  --ky-text-faint:var(--ky-n-500);
  --ky-border:var(--ky-n-200);
  --ky-border-strong:var(--ky-n-300);
  --ky-primary:var(--ky-o-500);         /* botones principales */
  --ky-primary-hover:var(--ky-o-400);
  --ky-primary-press:var(--ky-o-600);
  --ky-on-primary:var(--ky-ink);        /* texto sobre naranja: SIEMPRE tinta (blanco falla contraste) */
  --ky-primary-soft:var(--ky-o-50);     /* fondos suaves de selección */
  --ky-accent-text:var(--ky-o-700);     /* naranja como texto sobre fondo claro */
  --ky-link:var(--ky-o-700);
  --ky-focus:0 0 0 3px rgba(255,90,54,.35);
  --ky-sidebar-bg:var(--ky-n-900);
  --ky-sidebar-text:#C4CDE6;
  --ky-sidebar-active-bg:#1C2D63;
  --ky-sidebar-active-text:#FFFFFF;
  --ky-topbar-bg:var(--ky-surface);
  --ky-overlay:rgba(10,19,48,.55);

  /* Color de estado semántico */
  --ky-success:var(--ky-green); --ky-success-text:var(--ky-green-text); --ky-success-bg:var(--ky-green-bg);
  --ky-warning:var(--ky-amber); --ky-warning-text:var(--ky-amber-text); --ky-warning-bg:var(--ky-amber-bg);
  --ky-danger:var(--ky-red);    --ky-danger-text:var(--ky-red-text);    --ky-danger-bg:var(--ky-red-bg);
  --ky-info:var(--ky-blue);     --ky-info-text:var(--ky-blue-text);     --ky-info-bg:var(--ky-blue-bg);

  /* Gráficos (orden de uso) */
  --ky-chart-1:var(--ky-o-500); --ky-chart-2:var(--ky-marine-3); --ky-chart-3:var(--ky-n-400);
  --ky-chart-4:var(--ky-green); --ky-chart-5:var(--ky-amber); --ky-chart-6:var(--ky-blue);

  /* ---- 3. Tipografía ---- */
  --ky-font-display:"Nunito","Segoe UI",system-ui,sans-serif;   /* títulos, cifras grandes */
  --ky-font-ui:"Figtree","Segoe UI",system-ui,sans-serif;       /* texto, formularios, tablas */
  --ky-font-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace; /* montos, códigos, IDs */
  --ky-fs-xs:12px; --ky-fs-sm:13px; --ky-fs-base:14px; --ky-fs-md:16px;
  --ky-fs-lg:18px; --ky-fs-xl:22px; --ky-fs-2xl:28px; --ky-fs-3xl:36px; --ky-fs-4xl:48px;
  --ky-lh-tight:1.15; --ky-lh-snug:1.35; --ky-lh-normal:1.5;
  --ky-fw-regular:400; --ky-fw-medium:500; --ky-fw-semibold:600; --ky-fw-bold:700; --ky-fw-heavy:800; --ky-fw-black:900;
  --ky-ls-label:.08em;   /* etiquetas en mayúscula */

  /* ---- 4. Espaciado (base 4px), radios, sombras, movimiento ---- */
  --ky-sp-1:4px; --ky-sp-2:8px; --ky-sp-3:12px; --ky-sp-4:16px; --ky-sp-5:20px;
  --ky-sp-6:24px; --ky-sp-8:32px; --ky-sp-10:40px; --ky-sp-12:48px; --ky-sp-16:64px;
  --ky-r-sm:6px; --ky-r-md:10px; --ky-r-lg:14px; --ky-r-xl:20px; --ky-r-pill:999px;
  --ky-shadow-sm:0 1px 2px rgba(15,27,61,.08);
  --ky-shadow-md:0 6px 16px -4px rgba(15,27,61,.16);
  --ky-shadow-lg:0 24px 48px -16px rgba(15,27,61,.32);
  --ky-ease:cubic-bezier(.2,.7,.2,1); --ky-t-fast:120ms; --ky-t-base:200ms; --ky-t-slow:320ms;
  --ky-z-sticky:20; --ky-z-sidebar:30; --ky-z-dropdown:40; --ky-z-modal:50; --ky-z-toast:60;
  --ky-sidebar-w:240px; --ky-sidebar-w-collapsed:64px; --ky-topbar-h:56px; --ky-row-h:44px;

  /* ---- 5. ICONOS ---- */
  --ky-icon-xs:14px; --ky-icon-sm:16px; --ky-icon-md:20px; --ky-icon-lg:24px; --ky-icon-xl:32px;
  --ky-icon-size:var(--ky-icon-md);      /* tamaño por defecto */
  --ky-icon-stroke:2;                    /* 2 en 20-24 px; usa 2.25 en 14-16 px */
  --ky-icon-color:currentColor;          /* hereda el color del texto */
  --ky-icon-color-muted:var(--ky-text-faint);
  --ky-icon-color-hover:var(--ky-text);
  --ky-icon-color-active:var(--ky-o-500);          /* módulo activo, estado seleccionado */
  --ky-icon-color-on-dark:#C4CDE6;                 /* sobre sidebar tinta */
  --ky-icon-color-on-dark-active:var(--ky-o-500);
  --ky-icon-color-disabled:var(--ky-n-300);
  --ky-icon-bg:var(--ky-surface-2);      /* fondo de ícono en botón o chip */
  --ky-icon-bg-radius:var(--ky-r-md);
  --ky-icon-bg-size:36px;
}

/* ---- Tema oscuro ---- */
:root[data-ky-theme="dark"]{
  --ky-bg:var(--ky-n-950); --ky-surface:var(--ky-n-800); --ky-surface-2:#1B2C60; --ky-surface-3:#243775;
  --ky-text:var(--ky-n-50); --ky-text-muted:#A9B5D6; --ky-text-faint:#8392BA;
  --ky-border:#2A3B6E; --ky-border-strong:#3A4C80;
  --ky-primary-soft:rgba(255,90,54,.14); --ky-accent-text:var(--ky-o-400); --ky-link:var(--ky-o-400);
  --ky-sidebar-bg:var(--ky-n-950); --ky-sidebar-active-bg:#14224D;
  --ky-topbar-bg:var(--ky-n-800);
  --ky-success-text:#4FD6A0; --ky-success-bg:rgba(31,182,122,.16);
  --ky-warning-text:#F6C26B; --ky-warning-bg:rgba(242,169,59,.16);
  --ky-danger-text:#FF8A8E;  --ky-danger-bg:rgba(229,72,77,.18);
  --ky-info-text:#7FAEFF;    --ky-info-bg:rgba(59,130,246,.18);
  --ky-shadow-sm:0 1px 2px rgba(0,0,0,.4); --ky-shadow-md:0 6px 16px -4px rgba(0,0,0,.5); --ky-shadow-lg:0 24px 48px -16px rgba(0,0,0,.7);
  --ky-icon-color-disabled:#3A4C80; --ky-chart-2:#5C7FD6;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-ky-theme="light"]){
    --ky-bg:var(--ky-n-950); --ky-surface:var(--ky-n-800); --ky-surface-2:#1B2C60; --ky-surface-3:#243775;
    --ky-text:var(--ky-n-50); --ky-text-muted:#A9B5D6; --ky-text-faint:#8392BA;
    --ky-border:#2A3B6E; --ky-border-strong:#3A4C80;
    --ky-primary-soft:rgba(255,90,54,.14); --ky-accent-text:var(--ky-o-400); --ky-link:var(--ky-o-400);
    --ky-sidebar-bg:var(--ky-n-950); --ky-sidebar-active-bg:#14224D; --ky-topbar-bg:var(--ky-n-800);
    --ky-success-text:#4FD6A0; --ky-success-bg:rgba(31,182,122,.16);
    --ky-warning-text:#F6C26B; --ky-warning-bg:rgba(242,169,59,.16);
    --ky-danger-text:#FF8A8E;  --ky-danger-bg:rgba(229,72,77,.18);
    --ky-info-text:#7FAEFF;    --ky-info-bg:rgba(59,130,246,.18);
    --ky-shadow-sm:0 1px 2px rgba(0,0,0,.4); --ky-shadow-md:0 6px 16px -4px rgba(0,0,0,.5); --ky-shadow-lg:0 24px 48px -16px rgba(0,0,0,.7);
    --ky-icon-color-disabled:#3A4C80; --ky-chart-2:#5C7FD6;
    color-scheme:dark;
  }
}