/* ==========================================================================
   CODE Hub — Tokens de diseño
   Marca CODE: navy #113C5F · teal #39939E · blanco
   Cada panel define su acento: CODE teal · HANIL dorado · Personal violeta · Técnico naranja
   ========================================================================== */

:root {
  /* Marca */
  --brand-navy: #113c5f;
  --brand-navy-2: #0c2d48;
  --brand-teal: #39939e;

  /* Superficies (claro) */
  --bg: #f2f5f9;
  --bg-grad: radial-gradient(1200px 600px at 100% -10%, rgba(57, 147, 158, 0.07), transparent 60%);
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #eef2f7;
  --surface-inv: #0e2235;
  --line: #e3e9f0;
  --line-2: #d2dbe6;
  --ink: #0e2235;
  --ink-2: #47596d;
  --ink-3: #7b8ea3;
  --ink-4: #a8b6c5;
  --overlay: rgba(9, 22, 36, 0.42);

  /* Sidebar (oscuro en ambos temas, inspirado en HANIL) */
  --sb-bg: linear-gradient(180deg, #113c5f 0%, #0d2c47 38%, #0a2034 100%);
  --sb-ink: #dbe6f0;
  --sb-ink-2: #8ea6bd;
  --sb-ink-3: #5f7a93;
  --sb-line: rgba(255, 255, 255, 0.08);
  --sb-hover: rgba(255, 255, 255, 0.06);
  --sb-field: rgba(255, 255, 255, 0.06);

  /* Estados */
  --success: #1c9a68;
  --success-soft: rgba(28, 154, 104, 0.12);
  --warning: #c98a12;
  --warning-soft: rgba(217, 150, 25, 0.14);
  --danger: #d9473f;
  --danger-soft: rgba(217, 71, 63, 0.11);
  --info: #2f74d0;
  --info-soft: rgba(47, 116, 208, 0.11);
  --neutral: #6b7d90;
  --neutral-soft: rgba(107, 125, 144, 0.12);

  /* Acento activo (cambia por panel) */
  --accent: #39939e;
  --accent-ink: #26717c;
  --accent-soft: rgba(57, 147, 158, 0.12);
  --accent-line: rgba(57, 147, 158, 0.32);
  --accent-contrast: #ffffff;

  /* Acentos por panel */
  --ws-code: #39939e;
  --ws-hanil: #c0995f;
  --ws-personal: #7a68e8;
  --ws-tecnico: #e57a44;
  --ws-phishing: #e0556b;
  --ws-hub: #39939e;

  /* Botón principal */
  --primary: #113c5f;
  --primary-hover: #0c2d48;
  --primary-ink: #ffffff;

  /* Tipografía */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 34px;

  /* Forma */
  --r-xs: 6px;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(14, 34, 53, 0.05);
  --shadow-sm: 0 1px 2px rgba(14, 34, 53, 0.05), 0 2px 8px -2px rgba(14, 34, 53, 0.06);
  --shadow: 0 2px 4px rgba(14, 34, 53, 0.04), 0 12px 28px -12px rgba(14, 34, 53, 0.16);
  --shadow-lg: 0 24px 60px -20px rgba(9, 22, 36, 0.35), 0 4px 12px rgba(9, 22, 36, 0.06);
  --ring: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent);

  /* Layout */
  --sidebar-w: 276px;
  --sidebar-w-collapsed: 78px;
  --topbar-h: 70px;
  --gutter: 28px;

  /* Movimiento */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms;
  --t: 220ms;

  color-scheme: light;
}

/* Propiedades registradas: permiten que el acento cambie con transición suave entre paneles */
@property --accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #39939e;
}
@property --accent-ink {
  syntax: "<color>";
  inherits: true;
  initial-value: #26717c;
}
@property --accent-soft {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(57, 147, 158, 0.12);
}
@property --accent-line {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(57, 147, 158, 0.32);
}
html {
  transition: --accent 0.7s var(--ease-out), --accent-ink 0.7s var(--ease-out), --accent-soft 0.7s var(--ease-out), --accent-line 0.7s var(--ease-out);
}

/* Acentos por panel: se aplican al <html data-ws="..."> y GSAP interpola el cambio */
[data-ws="code"],
[data-ws="hub"] {
  --accent: #39939e;
  --accent-ink: #26717c;
  --accent-soft: rgba(57, 147, 158, 0.12);
  --accent-line: rgba(57, 147, 158, 0.32);
}
[data-ws="hanil"] {
  --accent: #c0995f;
  --accent-ink: #8e6a33;
  --accent-soft: rgba(192, 153, 95, 0.15);
  --accent-line: rgba(192, 153, 95, 0.38);
}
[data-ws="personal"] {
  --accent: #7a68e8;
  --accent-ink: #5845c8;
  --accent-soft: rgba(122, 104, 232, 0.12);
  --accent-line: rgba(122, 104, 232, 0.34);
}
[data-ws="tecnico"] {
  --accent: #e57a44;
  --accent-ink: #b85620;
  --accent-soft: rgba(229, 122, 68, 0.13);
  --accent-line: rgba(229, 122, 68, 0.36);
}
[data-ws="phishing"] {
  --accent: #e0556b;
  --accent-ink: #c0394f;
  --accent-soft: rgba(224, 85, 107, 0.13);
  --accent-line: rgba(224, 85, 107, 0.36);
}

/* ---------- Tema oscuro ---------- */
[data-theme="dark"] {
  --brand-navy: #7aa5d6; /* navy aclarado para que gráficas y acentos se lean sobre fondo oscuro */
  --bg: #07121d;
  --bg-grad: radial-gradient(1200px 600px at 100% -10%, rgba(57, 147, 158, 0.08), transparent 60%);
  --surface: #0d1b2a;
  --surface-2: #112234;
  --surface-3: #162a3f;
  --surface-inv: #e6eef6;
  --line: #1b3045;
  --line-2: #26405a;
  --ink: #e5edf5;
  --ink-2: #a7b8c9;
  --ink-3: #738aa2;
  --ink-4: #4d647c;
  --overlay: rgba(2, 8, 14, 0.62);

  --sb-bg: linear-gradient(180deg, #0b2740 0%, #081c2e 40%, #061420 100%);

  --success: #34c48b;
  --success-soft: rgba(52, 196, 139, 0.14);
  --warning: #e7a93a;
  --warning-soft: rgba(231, 169, 58, 0.15);
  --danger: #f06a62;
  --danger-soft: rgba(240, 106, 98, 0.14);
  --info: #5b9bf0;
  --info-soft: rgba(91, 155, 240, 0.14);
  --neutral: #8fa2b6;
  --neutral-soft: rgba(143, 162, 182, 0.13);

  --primary: #e5edf5;
  --primary-hover: #ffffff;
  --primary-ink: #0b1926;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px -2px rgba(0, 0, 0, 0.35);
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 14px 30px -12px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, 0.7);

  color-scheme: dark;
}
[data-theme="dark"][data-ws="code"],
[data-theme="dark"][data-ws="hub"] {
  --accent: #4fb3be;
  --accent-ink: #7fd0d8;
}
[data-theme="dark"][data-ws="hanil"] {
  --accent: #d4ae73;
  --accent-ink: #e5c592;
}
[data-theme="dark"][data-ws="personal"] {
  --accent: #9586f2;
  --accent-ink: #b5aaf7;
}
[data-theme="dark"][data-ws="tecnico"] {
  --accent: #f08d5a;
  --accent-ink: #f6ad86;
}
[data-theme="dark"][data-ws="phishing"] {
  --accent: #f07389;
  --accent-ink: #f7a3b2;
}