/* ============================================================
   PYM360 · DESIGN TOKENS
   Capa 1 del design system. Solo variables CSS.
   Cambios aquí cascadean a TODA la app — manejar con cuidado.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* ===== COLOR — superficies (dark) ===== */
  --pym-color-bg:#0a0b0d;
  --pym-color-surface:#0e1014;
  --pym-color-surface-2:#13151a;
  --pym-color-surface-3:#181b21;
  --pym-color-surface-elev:#1a1d23;

  /* ===== COLOR — bordes ===== */
  --pym-color-border:rgba(255,255,255,.05);
  --pym-color-border-strong:rgba(255,255,255,.08);
  --pym-color-border-hover:rgba(255,255,255,.14);

  /* ===== COLOR — texto ===== */
  --pym-color-text:#e8edf2;
  --pym-color-text-dim:#a0a8b3;
  --pym-color-text-muted:#7a8595;
  --pym-color-text-subtle:#666;

  /* ===== COLOR — acento de marca (azul P&M) ===== */
  --pym-color-accent:#497cfb;
  --pym-color-accent-2:#5aafff;
  --pym-color-accent-dim:rgba(73,124,251,.12);
  --pym-color-accent-glow:rgba(73,124,251,.25);

  /* ===== COLOR — semánticos ===== */
  --pym-color-success:#7dd06d;
  --pym-color-success-strong:#53A945;
  --pym-color-success-dim:rgba(83,169,69,.12);
  --pym-color-warning:#f5b955;
  --pym-color-warning-dim:rgba(245,185,85,.12);
  --pym-color-danger:#ff8d7b;
  --pym-color-danger-strong:#E5484D;
  --pym-color-danger-dim:rgba(255,141,123,.12);
  --pym-color-info:#86e4fe;
  --pym-color-info-dim:rgba(134,228,254,.10);

  /* ===== COLOR — identidades secundarias ===== */
  --pym-color-purple:#dccafe;
  --pym-color-purple-dim:rgba(220,202,254,.10);
  --pym-color-gold:#c4a45a;
  --pym-color-gold-2:#a0803a;
  --pym-color-gold-dim:rgba(196,164,90,.10);
  --pym-color-salmon:#ff8d7b;

  /* ===== COLOR — marca histórica P&M (verde) ===== */
  --pym-color-brand-green:#003228;
  --pym-color-brand-green-light:#d4f6e5;
  --pym-color-brand-lavender:#dccafe;

  /* ===== TIPOGRAFÍA ===== */
  --pym-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --pym-font-mono:'JetBrains Mono','Fira Code',Consolas,monospace;

  --pym-fs-xs:10px;
  --pym-fs-sm:11px;
  --pym-fs-base:12px;
  --pym-fs-md:13px;
  --pym-fs-lg:15px;
  --pym-fs-xl:18px;
  --pym-fs-2xl:22px;
  --pym-fs-3xl:26px;
  --pym-fs-4xl:32px;

  --pym-fw-regular:400;
  --pym-fw-medium:500;
  --pym-fw-semibold:600;
  --pym-fw-bold:700;
  --pym-fw-black:800;

  /* ===== ESPACIADO (escala 4px) ===== */
  --pym-space-0:0;
  --pym-space-1:4px;
  --pym-space-2:8px;
  --pym-space-3:12px;
  --pym-space-4:16px;
  --pym-space-5:20px;
  --pym-space-6:24px;
  --pym-space-7:28px;
  --pym-space-8:32px;
  --pym-space-10:40px;
  --pym-space-12:48px;

  /* ===== RADIUS ===== */
  --pym-radius-xs:4px;
  --pym-radius-sm:6px;
  --pym-radius-md:8px;
  --pym-radius-lg:10px;
  --pym-radius-xl:12px;
  --pym-radius-2xl:16px;
  --pym-radius-pill:200px;

  /* ===== SOMBRAS ===== */
  --pym-shadow-sm:0 1px 2px rgba(0,0,0,.1);
  --pym-shadow-md:0 4px 12px rgba(0,0,0,.15);
  --pym-shadow-lg:0 8px 24px rgba(0,0,0,.25);
  --pym-shadow-xl:0 16px 48px rgba(0,0,0,.3);
  --pym-shadow-accent:0 4px 14px rgba(73,124,251,.25);
  --pym-shadow-accent-strong:0 8px 24px rgba(73,124,251,.35);

  /* ===== LAYOUT ===== */
  --pym-sidebar-w:220px;
  --pym-sidebar-collapsed-w:60px;
  --pym-header-h:56px;
  --pym-content-max-w:1280px;

  /* ===== TRANSICIONES ===== */
  --pym-trans-fast:.12s ease;
  --pym-trans-base:.15s ease;
  --pym-trans-slow:.25s cubic-bezier(.4,0,.2,1);

  /* ===== Z-INDEX ===== */
  --pym-z-sticky:10;
  --pym-z-overlay:50;
  --pym-z-modal:100;
  --pym-z-toast:200;

  /* ============================================================
     LEGACY ALIASES — los CSS viejos siguen funcionando.
     Borrar esta sección en Fase 9 (cleanup) cuando ningún módulo
     referencie estas variables.
     ============================================================ */
  --bg:var(--pym-color-bg);
  --surface:var(--pym-color-surface);
  --surface2:var(--pym-color-surface-2);
  --surface3:var(--pym-color-surface-3);
  --border:var(--pym-color-border);
  --border-hover:var(--pym-color-border-hover);
  --text:var(--pym-color-text);
  --text-dim:var(--pym-color-text-dim);
  --text-muted:var(--pym-color-text-muted);
  --accent:var(--pym-color-accent);
  --accent2:var(--pym-color-accent-2);
  --accent-dim:var(--pym-color-accent-dim);
  --green:var(--pym-color-success-strong);
  --red:var(--pym-color-danger-strong);
  --blue:var(--pym-color-info);
  --purple:var(--pym-color-purple);
  --orange:var(--pym-color-salmon);
  --green-dim:var(--pym-color-success-dim);
  --red-dim:var(--pym-color-danger-dim);
  --blue-dim:var(--pym-color-info-dim);
  --pym-gold:var(--pym-color-gold);
  --pym-gold2:var(--pym-color-gold-2);
  --pym-gold-dim:var(--pym-color-gold-dim);
  --pym-green:var(--pym-color-brand-green);
  --pym-green-light:var(--pym-color-brand-green-light);
  --pym-salmon:var(--pym-color-salmon);
  --pym-lavender:var(--pym-color-brand-lavender);
  --pym-sidebar:var(--pym-sidebar-w);
  --pym-sidebar-collapsed:var(--pym-sidebar-collapsed-w);
  --pym-header:var(--pym-header-h);
  --radius-sm:var(--pym-radius-md);
  --radius-md:var(--pym-radius-xl);
  --radius-lg:var(--pym-radius-2xl);
  --radius-pill:var(--pym-radius-pill);
}

/* ============================================================
   TEMA CLARO — re-define los tokens base, los aliases siguen
   funcionando porque referencian los tokens nuevos.
   ============================================================ */
[data-theme="light"]{
  --pym-color-bg:#fafafa;
  --pym-color-surface:#ffffff;
  --pym-color-surface-2:#f5f5f7;
  --pym-color-surface-3:#ebebee;
  --pym-color-surface-elev:#ffffff;

  --pym-color-border:rgba(0,0,0,.06);
  --pym-color-border-strong:rgba(0,0,0,.1);
  --pym-color-border-hover:rgba(0,0,0,.18);

  --pym-color-text:#1a1d23;
  --pym-color-text-dim:#5a6470;
  --pym-color-text-muted:#7a8595;
  --pym-color-text-subtle:#aab0bb;

  --pym-color-accent-dim:rgba(73,124,251,.08);

  --pym-shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --pym-shadow-md:0 4px 12px rgba(0,0,0,.06);
  --pym-shadow-lg:0 8px 24px rgba(0,0,0,.08);
  --pym-shadow-xl:0 16px 48px rgba(0,0,0,.12);
}