/*
 * /css/tokens.css
 * VMEREGI Design System v1.0
 * Єдині кольори, відступи, радіуси, тіні та типографіка для світлої/темної теми.
 */

:root,
html[data-theme="light"]{
  color-scheme:light;

  --vm-primary:#5b5df0;
  --vm-primary-strong:#4547cf;
  --vm-primary-soft:rgba(91,93,240,.12);
  --vm-secondary:#22b8cf;
  --vm-secondary-soft:rgba(34,184,207,.13);
  --vm-accent:#ec4899;
  --vm-accent-soft:rgba(236,72,153,.12);
  --vm-success:#22a06b;
  --vm-warning:#e89b22;
  --vm-danger:#e44766;
  --vm-info:#2687f5;

  --vm-navigation:#18245a;
  --vm-navigation-2:#273a8d;
  --vm-navigation-3:#121b45;

  --vm-bg:#eef4ff;
  --vm-bg-elevated:#f7f9ff;
  --vm-surface:#ffffff;
  --vm-surface-glass:rgba(255,255,255,.88);
  --vm-surface-soft:#f6f8ff;
  --vm-surface-strong:#eef2ff;
  --vm-overlay:rgba(13,22,54,.62);

  --vm-text:#172033;
  --vm-text-soft:#39465f;
  --vm-muted:#718096;
  --vm-border:rgba(33,46,86,.10);
  --vm-border-strong:rgba(91,93,240,.22);

  --vm-shadow-xs:0 2px 8px rgba(28,39,76,.05);
  --vm-shadow-sm:0 8px 24px rgba(28,39,76,.07);
  --vm-shadow:0 18px 48px rgba(28,39,76,.10);
  --vm-shadow-lg:0 30px 90px rgba(21,31,68,.17);
  --vm-focus:0 0 0 4px rgba(91,93,240,.20);

  --vm-radius-xs:8px;
  --vm-radius-sm:12px;
  --vm-radius:18px;
  --vm-radius-lg:24px;
  --vm-radius-xl:30px;
  --vm-radius-pill:999px;

  --vm-space-1:.25rem;
  --vm-space-2:.5rem;
  --vm-space-3:.75rem;
  --vm-space-4:1rem;
  --vm-space-5:1.25rem;
  --vm-space-6:1.5rem;
  --vm-space-8:2rem;
  --vm-space-10:2.5rem;

  --vm-font-sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --vm-font-size-xs:.75rem;
  --vm-font-size-sm:.875rem;
  --vm-font-size-md:1rem;
  --vm-font-size-lg:1.125rem;
  --vm-font-size-xl:1.35rem;
  --vm-font-size-2xl:1.75rem;

  --vm-topbar-height:72px;
  --vm-sidebar-width:236px;
  --vm-sidebar-compact:84px;
  --vm-mobile-nav-height:72px;

  /* Legacy aliases: старі модулі автоматично отримують нову палітру. */
  --app-bg:var(--vm-bg);
  --app-bg-soft:var(--vm-bg-elevated);
  --app-surface:var(--vm-surface-glass);
  --app-surface-solid:var(--vm-surface);
  --app-surface-muted:var(--vm-surface-soft);
  --app-text:var(--vm-text);
  --app-text-soft:var(--vm-text-soft);
  --app-muted:var(--vm-muted);
  --app-border:var(--vm-border);
  --app-border-strong:var(--vm-border-strong);
  --app-primary:var(--vm-primary);
  --app-primary-dark:var(--vm-primary-strong);
  --app-primary-soft:var(--vm-primary-soft);
  --app-accent:var(--vm-secondary);
  --app-accent-soft:var(--vm-secondary-soft);
  --app-success:var(--vm-success);
  --app-danger:var(--vm-danger);
  --app-warning:var(--vm-warning);
  --app-nav:var(--vm-navigation);
  --app-nav-2:var(--vm-navigation-2);
  --app-shadow-sm:var(--vm-shadow-sm);
  --app-shadow:var(--vm-shadow);
  --app-shadow-lg:var(--vm-shadow-lg);
  --app-radius-sm:var(--vm-radius-sm);
  --app-radius:var(--vm-radius);
  --app-radius-lg:var(--vm-radius-lg);
  --card:var(--vm-surface);
  --muted:var(--vm-muted);
  --nav:var(--vm-navigation);
}

html[data-theme="dark"]{
  color-scheme:dark;

  --vm-primary:#8b8dfb;
  --vm-primary-strong:#a9aaff;
  --vm-primary-soft:rgba(139,141,251,.17);
  --vm-secondary:#43d3e5;
  --vm-secondary-soft:rgba(67,211,229,.15);
  --vm-accent:#f472b6;
  --vm-accent-soft:rgba(244,114,182,.14);
  --vm-success:#42c88a;
  --vm-warning:#f5b44b;
  --vm-danger:#fb7185;
  --vm-info:#60a5fa;

  --vm-navigation:#0c1435;
  --vm-navigation-2:#1d2868;
  --vm-navigation-3:#080e25;

  --vm-bg:#0b1022;
  --vm-bg-elevated:#11182e;
  --vm-surface:#151d35;
  --vm-surface-glass:rgba(21,29,53,.90);
  --vm-surface-soft:#19233f;
  --vm-surface-strong:#202b4c;
  --vm-overlay:rgba(2,6,23,.78);

  --vm-text:#f3f6ff;
  --vm-text-soft:#d6def0;
  --vm-muted:#98a5bf;
  --vm-border:rgba(184,198,232,.12);
  --vm-border-strong:rgba(139,141,251,.28);

  --vm-shadow-xs:0 2px 10px rgba(0,0,0,.16);
  --vm-shadow-sm:0 10px 28px rgba(0,0,0,.24);
  --vm-shadow:0 22px 56px rgba(0,0,0,.30);
  --vm-shadow-lg:0 36px 100px rgba(0,0,0,.48);
  --vm-focus:0 0 0 4px rgba(139,141,251,.27);
}

@media (prefers-contrast:more){
  :root,
  html[data-theme="light"],
  html[data-theme="dark"]{
    --vm-border:rgba(55,65,99,.28);
    --vm-border-strong:rgba(91,93,240,.58);
  }
}