/* SYTHAXSYSTEM — Design tokens PME Premium (Bling refinado + Stripe polish) */
:root {
  color-scheme: light;

  /* Marca — paleta azul suave PME */
  --ss-primary: #2563eb;
  --ss-primary-hover: #1d4ed8;
  --ss-primary-deep: #1e3a8a;
  --ss-primary-soft: #eff6ff;
  --ss-primary-muted: #dbeafe;
  --ss-primary-ring: rgba(37, 99, 235, 0.22);
  --ss-accent-sky: #38bdf8;
  --ss-app-bg: linear-gradient(165deg, #f0f6ff 0%, #f8fafc 42%, #eef2ff 100%);

  /* Neutros */
  --ss-bg: #ffffff;
  --ss-bg-subtle: #f8fafc;
  --ss-bg-muted: #f1f5f9;
  --ss-bg-elevated: #ffffff;
  --ss-border: #e2e8f0;
  --ss-border-strong: #cbd5e1;
  --ss-text: #0f172a;
  --ss-text-secondary: #475569;
  --ss-text-muted: #64748b;

  /* Sombras — ênfase na base (profundidade) */
  --ss-shadow-xs: 0 1px 2px rgba(30, 58, 138, 0.04);
  --ss-shadow-sm: 0 2px 8px rgba(30, 58, 138, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --ss-shadow: 0 8px 24px rgba(30, 58, 138, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  --ss-shadow-lg: 0 16px 40px rgba(30, 58, 138, 0.1), 0 4px 12px rgba(15, 23, 42, 0.05);
  --ss-shadow-xl: 0 24px 56px rgba(30, 58, 138, 0.12), 0 8px 20px rgba(15, 23, 42, 0.06);
  --ss-shadow-card: 0 4px 6px -1px rgba(30, 64, 175, 0.07), 0 10px 20px -4px rgba(30, 58, 138, 0.12);

  /* Layout app — navegação TagPlus */
  --ss-nav-rail-w: 88px;
  --ss-nav-flyout-w: 292px;
  --ss-sidebar-w: var(--ss-nav-rail-w);
  --ss-sidebar-w-expanded: calc(var(--ss-nav-rail-w) + var(--ss-nav-flyout-w));
  --ss-sidebar-w-collapsed: 72px;
  --ss-sidebar-current-w: var(--ss-sidebar-w);

  /* Centrais modulares (hub + flyout) */
  --ss-hub-pad-x: clamp(28px, 3.5vw, 52px);
  --ss-hub-pad-x-flyout: clamp(44px, 5.5vw, 80px);
  --ss-hub-grid-gap: 24px;
  --ss-hub-card-min: 196px;

  /* Semânticos */
  --ss-success: #059669;
  --ss-success-soft: #ecfdf5;
  --ss-warning: #d97706;
  --ss-warning-soft: #fffbeb;
  --ss-danger: #dc2626;
  --ss-danger-soft: #fef2f2;

  /* Tipografia */
  --ss-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ss-font-display: var(--ss-font);

  /* Raio */
  --ss-radius-sm: 8px;
  --ss-radius: 12px;
  --ss-radius-lg: 16px;
  --ss-radius-xl: 20px;
  --ss-radius-full: 9999px;

  /* Motion */
  --ss-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ss-duration: 200ms;
  --ss-duration-slow: 320ms;

  --ss-topbar-h: 64px;
  --ss-utility-bar-h: 42px;

  /* Aliases legado (compatibilidade) */
  --blue-950: #0a1628;
  --blue-900: #0f2744;
  --blue-800: #1e3a5f;
  --blue-700: var(--ss-primary-hover);
  --blue-600: var(--ss-primary);
  --blue-500: #3b82f6;
  --blue-100: var(--ss-primary-muted);
  --blue-50: var(--ss-primary-soft);
  --slate-900: var(--ss-text);
  --slate-700: #334155;
  --slate-600: var(--ss-text-secondary);
  --slate-500: var(--ss-text-muted);
  --slate-200: var(--ss-border);
  --slate-100: var(--ss-bg-muted);
  --slate-50: var(--ss-bg-subtle);
  --white: #ffffff;
  --green-ok: var(--ss-success);
  --radius: var(--ss-radius);
  --radius-lg: var(--ss-radius-xl);
  --shadow: var(--ss-shadow);
  --shadow-lg: var(--ss-shadow-lg);
}