/* Lynkeus · Design System v1
 * Tokens canónicos — importar PRIMERO, ANTES del tema de Telerik.
 *
 * TEMAS: el :root es el tema CLARO (por defecto). El tema OSCURO vive en UN solo
 * bloque :root[data-theme="dark"] (más abajo). El runtime SIEMPRE resuelve el
 * atributo data-theme a "dark"/"light" (incluido el modo Auto, calculado contra el
 * SO en ThemeService + el anti-FOUC de index.html), así que no hace falta un bloque
 * @media prefers-color-scheme espejado. */

:root {
  color-scheme: light;

  /* ── Color · Neutrales ─────────────────────────────────────────── */
  --lyk-color-canvas:        #F7F7F8;
  --lyk-color-surface:       #FFFFFF;
  --lyk-color-surface-2:     #F1F2F4;
  --lyk-color-surface-3:     #E7E8EC;
  --lyk-color-border:        #E4E6EB;
  --lyk-color-border-strong: #CFD3DA;
  --lyk-color-divider:       #EEF0F3;

  /* ── Color · Tinta ─────────────────────────────────────────────── */
  --lyk-color-ink-1: #0B1220;   /* Primary text */
  --lyk-color-ink-2: #3F4651;   /* Body, labels */
  --lyk-color-ink-3: #6B7280;   /* Secondary, captions */
  --lyk-color-ink-4: #9AA1AC;   /* Disabled, placeholder */

  /* ── Color · Marca ─────────────────────────────────────────────── */
  --lyk-color-primary:         #1E3A8A;
  --lyk-color-primary-hover:   #1E40AF;
  --lyk-color-primary-pressed: #1E3578;
  --lyk-color-primary-soft:    #EEF2FB;
  --lyk-color-accent:          #0EA5E9;
  --lyk-color-accent-soft:     #E6F6FE;

  /* Fondo de fila de tabla al pasar el mouse (más sutil que surface-2). */
  --lyk-color-row-hover:       #F9FAFB;

  /* ── Color · Estado ────────────────────────────────────────────── */
  --lyk-color-success:       #16A34A;
  --lyk-color-success-soft:  #E6F6EC;
  --lyk-color-warning:       #D97706;
  --lyk-color-warning-soft:  #FCF1E3;
  --lyk-color-danger:        #DC2626;
  --lyk-color-danger-soft:   #FCE8E8;
  --lyk-color-info:          #0EA5E9;
  --lyk-color-info-soft:     #E6F6FE;

  /* Estado · texto/borde "on-soft" (para toasts, banners, badges) */
  --lyk-color-success-strong: #166534;
  --lyk-color-success-border: #9DDAB2;
  --lyk-color-success-hover:  #15803D;
  --lyk-color-warning-strong: #92400E;
  --lyk-color-warning-border: #F2C990;
  --lyk-color-danger-strong:  #991B1B;
  --lyk-color-danger-border:  #F0A8A8;
  --lyk-color-danger-hover:   #B91C1C;
  --lyk-color-info-strong:    #0C4A6E;
  --lyk-color-info-border:    #A4DBF6;

  /* Sync / connectivity */
  --lyk-color-online:   #16A34A;
  --lyk-color-syncing:  #D97706;
  --lyk-color-offline:  #71717A;
  --lyk-color-error:    #DC2626;

  /* ── Color · Shell oscuro (sidebar / header alt) ───────────────── */
  /* Fijos en AMBOS temas (el shell es oscuro por diseño; NO se redefine en dark). */
  --lyk-color-dark-bg:      #0B1220;
  --lyk-color-dark-surface: #101827;
  --lyk-color-dark-border:  #1F2937;
  --lyk-color-dark-ink-1:   #E5E7EB;
  --lyk-color-dark-ink-2:   #94A3B8;
  --lyk-color-dark-ink-3:   #64748B;

  /* Scrim / backdrop de modales (navy con alpha; fijo en ambos temas). */
  --lyk-color-scrim: rgba(11, 18, 32, 0.55);

  /* ── Tipografía ────────────────────────────────────────────────── */
  --lyk-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lyk-font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Escala tipográfica (px) */
  --lyk-text-xs:   11px;   /* micro · uppercase eyebrows con mono */
  --lyk-text-sm:   12px;   /* captions */
  --lyk-text-base: 13px;   /* default body */
  --lyk-text-md:   14px;   /* body lg, buttons */
  --lyk-text-lg:   16px;   /* lead */
  --lyk-text-xl:   20px;   /* h3 */
  --lyk-text-2xl:  24px;   /* h2 */
  --lyk-text-3xl:  32px;   /* h1 */
  --lyk-text-4xl:  44px;   /* display */

  /* ── Espaciado · escala 2/4/8 ──────────────────────────────────── */
  --lyk-space-1:  2px;
  --lyk-space-2:  4px;
  --lyk-space-3:  8px;
  --lyk-space-4:  12px;
  --lyk-space-5:  16px;
  --lyk-space-6:  20px;
  --lyk-space-7:  24px;
  --lyk-space-8:  32px;
  --lyk-space-9:  40px;
  --lyk-space-10: 48px;
  --lyk-space-11: 64px;

  /* ── Radio ─────────────────────────────────────────────────────── */
  --lyk-radius-xs:   2px;
  --lyk-radius-sm:   4px;     /* buttons, inputs, badges */
  --lyk-radius-md:   6px;     /* cards, dialogs */
  --lyk-radius-lg:   8px;
  --lyk-radius-pill: 999px;   /* solo para progress bars */

  /* ── Sombras (mínimas — preferir border) ───────────────────────── */
  --lyk-shadow-sm:    0 1px 2px 0 rgba(15,23,42,0.04), 0 0 0 1px rgba(15,23,42,0.04);
  --lyk-shadow-md:    0 4px 12px -4px rgba(15,23,42,0.08), 0 0 0 1px rgba(15,23,42,0.04);
  --lyk-shadow-lg:    0 20px 40px -16px rgba(15,23,42,0.18), 0 0 0 1px rgba(15,23,42,0.06);
  --lyk-shadow-focus: 0 0 0 3px rgba(30,58,138,0.18);

  /* ── Motion ────────────────────────────────────────────────────── */
  --lyk-motion-fast: 120ms cubic-bezier(.2,.8,.2,1);
  --lyk-motion-base: 180ms cubic-bezier(.2,.8,.2,1);
  --lyk-motion-slow: 320ms cubic-bezier(.2,.8,.2,1);

  /* ── Kendo/Telerik theme variable overrides ─────────────────── */
  /* El tema kendo-theme-default usa #ff6358 (salmón/rojo) como primary. */
  /* Estas variables lo sobreescriben al ser declaradas después en cascade. */
  --kendo-color-primary:          #1E3A8A;
  --kendo-color-primary-hover:    #1E40AF;
  --kendo-color-primary-active:   #1E3578;
  --kendo-color-on-primary:       #ffffff;

  /* Secondary button → referencia tokens --lyk-* (adapta solo al tema). */
  --kendo-button-solid-secondary-bg:           var(--lyk-color-surface);
  --kendo-button-solid-secondary-text:         var(--lyk-color-ink-2);
  --kendo-button-solid-secondary-border:       var(--lyk-color-border-strong);
  --kendo-button-solid-secondary-hover-bg:     var(--lyk-color-surface-2);
  --kendo-button-solid-secondary-hover-text:   var(--lyk-color-ink-1);
  --kendo-button-solid-secondary-hover-border: var(--lyk-color-border-strong);
  --kendo-button-solid-secondary-active-bg:    var(--lyk-color-surface-3);
}

/* ═══════════════════════════════════════════════════════════════════
 * TEMA OSCURO — bloque único. El runtime resuelve Auto/manual a
 * data-theme="dark"|"light", así que este selector cubre ambos casos.
 * ═══════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --lyk-color-canvas:        #0E1626;
  --lyk-color-surface:       #131C2E;
  --lyk-color-surface-2:     #1B2437;
  --lyk-color-surface-3:     #232E44;
  --lyk-color-border:        rgba(255,255,255,0.10);
  --lyk-color-border-strong: rgba(255,255,255,0.20);
  --lyk-color-divider:       rgba(255,255,255,0.06);
  --lyk-color-row-hover:     #18223A;

  --lyk-color-ink-1: #E6EAF2;
  --lyk-color-ink-2: #B7C0D0;
  --lyk-color-ink-3: #8A93A6;
  --lyk-color-ink-4: #5D6578;

  --lyk-color-primary:         #3B82F6;
  --lyk-color-primary-hover:   #60A5FA;
  --lyk-color-primary-pressed: #2563EB;
  --lyk-color-primary-soft:    rgba(59,130,246,0.16);
  --lyk-color-accent:          #38BDF8;
  --lyk-color-accent-soft:     rgba(56,189,248,0.16);

  --lyk-color-success:       #22C55E;
  --lyk-color-success-soft:  rgba(34,197,94,0.14);
  --lyk-color-warning:       #F59E0B;
  --lyk-color-warning-soft:  rgba(245,158,11,0.14);
  --lyk-color-danger:        #EF4444;
  --lyk-color-danger-soft:   rgba(239,68,68,0.14);
  --lyk-color-info:          #38BDF8;
  --lyk-color-info-soft:     rgba(56,189,248,0.14);

  --lyk-color-success-strong: #4ADE80;
  --lyk-color-success-border: rgba(34,197,94,0.35);
  --lyk-color-success-hover:  #16A34A;
  --lyk-color-warning-strong: #FBBF24;
  --lyk-color-warning-border: rgba(245,158,11,0.35);
  --lyk-color-danger-strong:  #F87171;
  --lyk-color-danger-border:  rgba(239,68,68,0.35);
  --lyk-color-danger-hover:   #DC2626;
  --lyk-color-info-strong:    #7DD3FC;
  --lyk-color-info-border:    rgba(56,189,248,0.35);

  --lyk-color-online:   #22C55E;
  --lyk-color-syncing:  #F59E0B;
  --lyk-color-offline:  #94A3B8;
  --lyk-color-error:    #EF4444;

  --lyk-shadow-sm:    0 1px 2px 0 rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.06);
  --lyk-shadow-md:    0 4px 12px -4px rgba(0,0,0,0.50), 0 0 0 1px rgba(255,255,255,0.06);
  --lyk-shadow-lg:    0 20px 40px -16px rgba(0,0,0,0.60), 0 0 0 1px rgba(255,255,255,0.08);
  --lyk-shadow-focus: 0 0 0 3px rgba(59,130,246,0.35);

  --kendo-color-primary:          #3B82F6;
  --kendo-color-primary-hover:    #60A5FA;
  --kendo-color-primary-active:   #2563EB;
  --kendo-color-on-primary:       #ffffff;
  --kendo-color-app-surface:      #0E1626;
  --kendo-color-on-app-surface:   #E6EAF2;
  --kendo-color-subtle:           #8A93A6;
  --kendo-color-surface:          #1B2437;
  --kendo-color-surface-alt:      #131C2E;
  --kendo-color-border:           rgba(255,255,255,0.10);
  --kendo-color-border-alt:       rgba(255,255,255,0.20);
  --kendo-color-base:             #1B2437;
  --kendo-color-base-subtle:        #131C2E;
  --kendo-color-base-subtle-hover:  #202C42;
  --kendo-color-base-subtle-active: #27334C;
  --kendo-color-base-hover:       #232E44;
  --kendo-color-base-active:      #2A3650;
  --kendo-color-base-emphasis:    #35415A;
  --kendo-color-on-base:          #E6EAF2;
  --kendo-color-base-on-surface:  #E6EAF2;
}

/* ── Reset operacional ─────────────────────────────────────────── */
html, body {
  margin: 0; padding: 0;
  background: var(--lyk-color-canvas);
  color: var(--lyk-color-ink-1);
  font-family: var(--lyk-font-sans);
  font-size: var(--lyk-text-base);
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }

/* ── Utilidades base ───────────────────────────────────────────── */
.lyk-eyebrow {
  font-family: var(--lyk-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lyk-color-ink-3);
  font-weight: 500;
}
.lyk-mono { font-family: var(--lyk-font-mono); }
.lyk-focusable:focus-visible {
  outline: none;
  box-shadow: var(--lyk-shadow-focus);
}