/* ==========================================================================
   MX UI · Design Tokens  v2
   Premium minimalist B2B SaaS — aligned with the MEAXTIME landing.
   Inter · brand #696cff · light default + [data-theme=dark].
   Prefixed --mx-* so application tokens stay explicit and collision-free.
   ========================================================================== */
:root {
  color-scheme: light;

  /* ------------------------------------------------------------ Surfaces */
  --mx-bg: #f8fafc;
  --mx-bg-2: #eef1f8;
  --mx-surface: #ffffff;
  --mx-surface-soft: #f8fafc;
  --mx-surface-strong: #f1f4f9;
  --mx-surface-brand: rgba(105, 108, 255, 0.08);
  --mx-glass: rgba(255, 255, 255, 0.72);
  --mx-scrim: rgba(15, 23, 42, 0.48);

  /* ----------------------------------------------------------- Hairlines */
  --mx-line: rgba(15, 23, 42, 0.08);
  --mx-line-strong: rgba(15, 23, 42, 0.14);

  /* ---------------------------------------------------------------- Text */
  --mx-ink: #0f172a;
  --mx-ink-soft: #334155;
  --mx-muted: #64748b;
  --mx-muted-2: #94a3b8;

  /* ------------------------------------------------------ Brand + accents */
  --mx-brand: #696cff;
  --mx-brand-bright: #8b8dff;
  --mx-brand-deep: #5457e0;
  --mx-on-brand: #ffffff;
  --mx-cyan: #06b6d4;
  --mx-green: #22c55e;
  --mx-amber: #f59e0b;
  --mx-red: #ef4444;

  /* Semantic foreground (readable on tint, per theme) */
  --mx-brand-fg: #5457e0;
  --mx-green-fg: #15803d;
  --mx-amber-fg: #b45309;
  --mx-red-fg: #b91c1c;
  --mx-cyan-fg: #0e7490;

  /* Soft tints (badges, alerts, hovers) */
  --mx-brand-tint: rgba(105, 108, 255, 0.1);
  --mx-green-tint: rgba(34, 197, 94, 0.12);
  --mx-amber-tint: rgba(245, 158, 11, 0.13);
  --mx-red-tint: rgba(239, 68, 68, 0.1);
  --mx-cyan-tint: rgba(6, 182, 212, 0.11);

  /* ------------------------------------------------------ Depth & focus */
  --mx-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --mx-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 2px 8px rgba(15, 23, 42, 0.04);
  --mx-shadow-md: 0 2px 4px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.08);
  --mx-shadow-lg: 0 4px 8px rgba(15, 23, 42, 0.04), 0 20px 48px rgba(15, 23, 42, 0.14);
  --mx-ring: 0 0 0 3px rgba(105, 108, 255, 0.22);
  --mx-ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.16);

  /* ---------------------------------------------------------------- Type */
  --mx-font: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --mx-font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
    monospace;

  --mx-text-xs: 12px;
  --mx-text-sm: 13px;
  --mx-text-base: 14px;
  --mx-text-md: 15px;
  --mx-text-lg: 17px;
  --mx-text-xl: 20px;

  /* -------------------------------------------------- Control size scale
     Every interactive control (button, input, select…) uses exactly one of
     these heights — this is what keeps the system visually coherent. */
  --mx-h-sm: 32px;
  --mx-h-md: 36px;
  --mx-h-lg: 40px;

  /* ---------------------------------------------------------------- Radii */
  --mx-radius-xs: 6px;
  --mx-radius-sm: 8px;
  --mx-radius: 10px;      /* controls */
  --mx-radius-lg: 14px;   /* cards, popovers */
  --mx-radius-xl: 20px;   /* dialogs */
  --mx-radius-pill: 999px;

  /* -------------------------------------------------------------- Spacing */
  --mx-gap-1: 4px;
  --mx-gap-2: 8px;
  --mx-gap-3: 12px;
  --mx-gap-4: 16px;
  --mx-gap-5: 24px;
  --mx-gap-6: 32px;

  /* --------------------------------------------------------------- Motion */
  --mx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --mx-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --mx-dur-fast: 0.12s;
  --mx-dur: 0.16s;
  --mx-dur-slow: 0.28s;
}

:root[data-theme="dark"],
.mx[data-theme="dark"] {
  color-scheme: dark;

  --mx-bg: #0a0b14;
  --mx-bg-2: #0e1020;
  --mx-surface: #12141f;
  --mx-surface-soft: #0f111b;
  --mx-surface-strong: #1b1e2d;
  --mx-surface-brand: rgba(105, 108, 255, 0.14);
  --mx-glass: rgba(18, 20, 31, 0.72);
  --mx-scrim: rgba(2, 4, 12, 0.64);

  --mx-line: rgba(180, 185, 255, 0.09);
  --mx-line-strong: rgba(180, 185, 255, 0.16);

  --mx-ink: #f1f3fb;
  --mx-ink-soft: #c7cce0;
  --mx-muted: #8b91ac;
  --mx-muted-2: #646a85;

  --mx-brand-bright: #a3a5ff;

  --mx-brand-fg: #a3a5ff;
  --mx-green-fg: #4ade80;
  --mx-amber-fg: #fbbf24;
  --mx-red-fg: #f87171;
  --mx-cyan-fg: #22d3ee;

  --mx-brand-tint: rgba(105, 108, 255, 0.16);
  --mx-green-tint: rgba(34, 197, 94, 0.14);
  --mx-amber-tint: rgba(245, 158, 11, 0.14);
  --mx-red-tint: rgba(239, 68, 68, 0.14);
  --mx-cyan-tint: rgba(6, 182, 212, 0.13);

  --mx-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.32);
  --mx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.28);
  --mx-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.4);
  --mx-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3), 0 24px 56px rgba(0, 0, 0, 0.52);
  --mx-ring: 0 0 0 3px rgba(139, 141, 255, 0.28);
  --mx-ring-danger: 0 0 0 3px rgba(248, 113, 113, 0.22);
}