/* amom.am Design Tokens v1.4
 * Canonical source: ~/Projects/amom-design/amom-tokens.css
 * Distribute via: sync-tokens.sh (copies to each app)
 * Web brand accent: violet (per memory #2118).
 * macOS UI surfaces use system blue (NOT this file).
 *
 * v1.4 changes (2026-05-07):
 * - Brand violet desaturated — #8b5cf6 → #7d6abf (less bright, dusty/muted)
 *   All 7 brand variants follow the same hue with reduced saturation.
 * - App accent fgs harmonized to a single curated pastel family
 *   (~70% L, ~50% S across all hues) instead of mixed Tailwind defaults.
 * - Action card tokens refactored as aliases of app accent tokens
 *   (single source of truth: change once → propagate to switcher + cards).
 * - Chart tokens muted (sky-blue #60a5fa → dusty-blue #94b3d4).
 *
 * v1.3 changes (2026-05-07):
 * - Page BG #09090b → #0d0e14 (less harsh black, eases long-session fatigue)
 * - App accent colors (6) — per-module tinting for amom-shell switcher
 * - Action card variants (5) — atmospheric muted surfaces (success/danger/info/warning/primary)
 * - Chart fill tokens (flat, no gradients)
 * - Shell tokens — topbar height, z-index, switcher widths
 *
 * v1.2 changes (2026-05-06):
 * - Sidebar width 14rem → 17rem (matches Jarvis Money baseline; less squeezed)
 * - Nav item tokens: text size, padding x/y, gap, icon size — bumped for breathing room
 *
 * v1.1 changes:
 * - Typography scale (rem-based)
 * - Spacing scale (4px base)
 * - Border radius + Shadow scales
 * - Semantic color tokens (success, warning, danger, info)
 * - Mode banner colors (test=warning, research=success)
 * - Light mode tokens (toggle via :root[data-theme="light"])
 * - Animation tokens (transition timings, ease curves)
 * - Skeleton + Toast utility classes
 * - Backward-compat aliases for v1.0 consumers (--amom-accent etc.)
 */

:root {
  /* === RGB sources (v1.4.1 — for Tailwind <alpha-value> hookup) ===
   * Each canonical color exposed as an RGB tuple (no parens) so Tailwind can
   * resolve `bg-zinc-900/50` → `rgb(var(--amom-bg-raised-rgb) / 0.5)` at JIT time.
   * Hex/rgba vars below stay backward-compatible.
   */
  --amom-bg-rgb:            13 14 20;
  --amom-bg-raised-rgb:     24 24 27;
  --amom-border-rgb:        39 39 42;
  --amom-border-strong-rgb: 63 63 70;
  --amom-text-rgb:          250 250 250;
  --amom-text-muted-rgb:    161 161 170;
  --amom-text-subtle-rgb:   113 113 122;
  --amom-text-disabled-rgb: 82 82 91;
  --amom-success-rgb:       16 185 129;
  --amom-warning-rgb:       249 115 22;
  --amom-danger-rgb:        239 68 68;
  --amom-info-rgb:          14 165 233;
  --amom-brand-rgb:         125 106 191;
  --amom-brand-light-rgb:   161 147 205;
  --amom-brand-lighter-rgb: 194 184 217;
  --amom-brand-deep-rgb:    93 74 153;

  /* === Brand — muted dusty violet (v1.4) ===
   * Reduced saturation vs Tailwind violet-500. Same hue, less punch.
   * Matches the atmospheric muted vocabulary of action cards / app accents.
   */
  --amom-brand:         #7d6abf;
  --amom-brand-hover:   #6e5bae;
  --amom-brand-light:   #a193cd;
  --amom-brand-lighter: #c2b8d9;
  --amom-brand-deep:    #5d4a99;
  --amom-brand-glow:    rgba(125, 106, 191, 0.3);
  --amom-brand-soft:    rgba(125, 106, 191, 0.1);

  /* === Surface (dark default) === */
  --amom-bg: #0d0e14;
  --amom-bg-raised: #18181b;
  --amom-surface: rgba(24, 24, 27, 0.7);
  --amom-surface-hover: rgba(39, 39, 42, 0.7);
  --amom-border: #27272a;
  --amom-border-strong: #3f3f46;

  /* === Text === */
  --amom-text: #fafafa;
  --amom-text-muted: #a1a1aa;
  --amom-text-subtle: #71717a;
  --amom-text-disabled: #52525b;

  /* === Semantic === */
  --amom-success: #10b981;
  --amom-success-soft: rgba(16, 185, 129, 0.15);
  --amom-warning: #f97316;
  --amom-warning-soft: rgba(249, 115, 22, 0.15);
  --amom-danger: #ef4444;
  --amom-danger-soft: rgba(239, 68, 68, 0.15);
  --amom-info: #0ea5e9;
  --amom-info-soft: rgba(14, 165, 233, 0.15);

  /* === Mode (test/research banner) === */
  --amom-mode-test: var(--amom-warning);
  --amom-mode-test-bg: rgba(249, 115, 22, 0.9);
  --amom-mode-research: var(--amom-success);
  --amom-mode-research-bg: rgba(4, 120, 87, 0.95);

  /* === Typography === */
  --amom-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --amom-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --amom-text-2xs: 0.625rem;
  --amom-text-xs: 0.75rem;
  --amom-text-sm: 0.875rem;
  --amom-text-base: 1rem;
  --amom-text-lg: 1.125rem;
  --amom-text-xl: 1.25rem;
  --amom-text-2xl: 1.5rem;
  --amom-text-3xl: 1.875rem;
  --amom-leading-tight: 1.25;
  --amom-leading-normal: 1.5;
  --amom-leading-relaxed: 1.625;

  /* === Spacing (4px base) === */
  --amom-space-0: 0;
  --amom-space-1: 0.25rem;
  --amom-space-2: 0.5rem;
  --amom-space-3: 0.75rem;
  --amom-space-4: 1rem;
  --amom-space-5: 1.25rem;
  --amom-space-6: 1.5rem;
  --amom-space-8: 2rem;
  --amom-space-12: 3rem;
  --amom-space-16: 4rem;

  /* === Radius === */
  --amom-radius-sm: 0.25rem;
  --amom-radius: 0.5rem;
  --amom-radius-md: 0.625rem;
  --amom-radius-lg: 0.75rem;
  --amom-radius-xl: 1rem;
  --amom-radius-full: 9999px;

  /* === Shadows === */
  --amom-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --amom-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  --amom-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
  --amom-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
  --amom-shadow-glow: 0 0 24px var(--amom-brand-glow);

  /* === Layout === */
  --amom-sidebar-width: 17rem;
  --amom-header-height: 3.5rem;
  --amom-mode-banner-height: 1.75rem;

  /* === Sidebar nav === */
  --amom-nav-text-size: 0.9375rem;
  --amom-nav-icon-size: 1.25rem;
  --amom-nav-gap: 0.75rem;
  --amom-nav-padding-x: 0.875rem;
  --amom-nav-padding-y: 0.625rem;
  --amom-nav-section-padding-x: 1rem;

  /* === Animation === */
  --amom-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --amom-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --amom-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --amom-duration-fast: 150ms;
  --amom-duration: 200ms;
  --amom-duration-slow: 300ms;

  /* ====================================================================
   * Atmospheric palette (v1.3+, harmonized in v1.4)
   *
   * A single curated family used by:
   *   - amom-shell switcher icon caps (per-module accent)
   *   - action cards (--amom-action-* tokens, aliased below)
   *
   * All bgs ~12% L / ~30% S. All fgs ~70% L / ~50% S. Same hue rotation.
   * ==================================================================== */

  /* Per-hue accent (bg + fg pair) — violet-harmonized cousins (v1.4)
   * All hues pulled toward the violet family for cohesion with the brand.
   * Token NAMES are stable labels (don't rename — would break consumers);
   * values rotate around violet using sage / periwinkle / rose / mauve / sand.
   */
  --amom-app-violet-bg:  #1f1538;   /* Services — center violet */
  --amom-app-violet-fg:  #b9aed4;
  --amom-app-emerald-bg: #172420;   /* Money — sage (cool-leaning green) */
  --amom-app-emerald-fg: #9ab8a0;
  --amom-app-blue-bg:    #181b2e;   /* Memory — periwinkle (indigo, neighbor of violet) */
  --amom-app-blue-fg:    #9aa3cb;
  --amom-app-amber-bg:   #28211a;   /* Status — sand (single warm anchor for warning) */
  --amom-app-amber-fg:   #bda081;
  --amom-app-red-bg:     #28172a;   /* Pass — rose (magenta-violet) */
  --amom-app-red-fg:     #c099aa;
  --amom-app-pink-bg:    #2a1727;   /* Insta — mauve */
  --amom-app-pink-fg:    #c89dc0;
  --amom-app-teal-bg:    #152826;   /* Stuffs — teal (cool, distinct from sage) */
  --amom-app-teal-fg:    #87b8b0;
  --amom-app-slate-bg:   #1c1f2c;   /* Zaps — slate (cool gray-blue) */
  --amom-app-slate-fg:   #a3a8c0;

  /* Action card variants — alias to per-hue accents (single source of truth) */
  --amom-action-success-bg: var(--amom-app-emerald-bg);
  --amom-action-success-fg: var(--amom-app-emerald-fg);
  --amom-action-danger-bg:  var(--amom-app-red-bg);
  --amom-action-danger-fg:  var(--amom-app-red-fg);
  --amom-action-info-bg:    var(--amom-app-blue-bg);
  --amom-action-info-fg:    var(--amom-app-blue-fg);
  --amom-action-warning-bg: var(--amom-app-amber-bg);
  --amom-action-warning-fg: var(--amom-app-amber-fg);
  --amom-action-primary-bg: var(--amom-app-violet-bg);
  --amom-action-primary-fg: var(--amom-app-violet-fg);

  /* === Chart fill (flat, periwinkle — violet-friendly) === */
  --amom-chart-stroke: #9aa3cb;
  --amom-chart-fill:   rgba(154, 163, 203, 0.18);

  /* === amom-shell tokens === */
  --amom-shell-height:        4rem;
  --amom-shell-z:             100;
  --amom-shell-dropdown-z:    200;
  --amom-shell-switcher-min:  14rem;
  --amom-shell-dropdown-w:    44rem;

  /* === Backward-compat aliases (v1.0 consumers) === */
  --amom-accent: var(--amom-brand);
  --amom-accent-glow: var(--amom-brand-glow);
}

/* Light mode override */
:root[data-theme="light"] {
  --amom-bg: #fafafa;
  --amom-bg-raised: #ffffff;
  --amom-surface: rgba(255, 255, 255, 0.7);
  --amom-surface-hover: rgba(244, 244, 245, 0.85);
  --amom-border: #e4e4e7;
  --amom-border-strong: #d4d4d8;
  --amom-text: #18181b;
  --amom-text-muted: #52525b;
  --amom-text-subtle: #71717a;
  --amom-text-disabled: #a1a1aa;
  --amom-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --amom-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --amom-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --amom-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
}

/* === Shared resets === */
[x-cloak] { display: none !important; }

/* === Scrollbar === */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--amom-border); border-radius: var(--amom-radius-sm); }
::-webkit-scrollbar-thumb:hover { background: var(--amom-border-strong); }

/* === Skeleton loading (pulse, no gradient) === */
@keyframes amom-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.amom-skeleton {
  background: var(--amom-border-strong);
  border-radius: var(--amom-radius-sm);
  animation: amom-pulse 1.4s ease-in-out infinite;
}
.amom-skeleton-text { height: 0.875rem; width: 100%; margin: 0.25rem 0; }
.amom-skeleton-circle { border-radius: var(--amom-radius-full); }

/* === Toast region (formal, ARIA-friendly) === */
.amom-toast-region {
  position: fixed;
  top: var(--amom-space-4);
  right: var(--amom-space-4);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--amom-space-2);
  pointer-events: none;
  max-width: min(420px, 90vw);
}
.amom-toast {
  pointer-events: auto;
  background: var(--amom-bg-raised);
  border: 1px solid var(--amom-border);
  border-radius: var(--amom-radius-md);
  padding: var(--amom-space-3) var(--amom-space-4);
  font-size: var(--amom-text-sm);
  color: var(--amom-text);
  display: flex;
  align-items: flex-start;
  gap: var(--amom-space-3);
  box-shadow: var(--amom-shadow-md);
  animation: amom-toast-in var(--amom-duration) var(--amom-ease-out);
}
.amom-toast--error { border-color: var(--amom-danger); }
.amom-toast__msg { flex: 1; line-height: var(--amom-leading-normal); }
.amom-toast__close {
  background: none;
  border: 0;
  color: var(--amom-text-subtle);
  cursor: pointer;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  transition: color var(--amom-duration-fast) var(--amom-ease);
}
.amom-toast__close:hover { color: var(--amom-text); }
@keyframes amom-toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* === Focus visible (a11y) === */
:focus-visible {
  outline: 2px solid var(--amom-brand);
  outline-offset: 2px;
  border-radius: var(--amom-radius-sm);
}

/* ====================================================================
 * Mode-reactive theme overrides
 * Test mode = violet (default Tailwind classes).
 * Research mode = emerald (overrides via :root[data-mode="research"]).
 * ==================================================================== */
:root[data-mode="research"] {
  --amom-brand: #10b981;
  --amom-brand-hover: #059669;
  --amom-brand-light: #34d399;
  --amom-brand-lighter: #6ee7b7;
  --amom-brand-deep: #047857;
  --amom-brand-glow: rgba(16, 185, 129, 0.3);
  --amom-brand-soft: rgba(16, 185, 129, 0.1);
}

:root[data-mode="research"] .text-violet-300 { color: #6ee7b7 !important; }
:root[data-mode="research"] .text-violet-400 { color: #34d399 !important; }
:root[data-mode="research"] .text-violet-500 { color: #10b981 !important; }
:root[data-mode="research"] .text-violet-200 { color: #a7f3d0 !important; }

:root[data-mode="research"] .bg-violet-500 { background-color: #10b981 !important; }
:root[data-mode="research"] .bg-violet-600 { background-color: #059669 !important; }
:root[data-mode="research"] .bg-violet-700 { background-color: #047857 !important; }

:root[data-mode="research"] .bg-violet-500\/5  { background-color: rgb(16 185 129 / 0.05) !important; }
:root[data-mode="research"] .bg-violet-500\/10 { background-color: rgb(16 185 129 / 0.1) !important; }
:root[data-mode="research"] .bg-violet-500\/15 { background-color: rgb(16 185 129 / 0.15) !important; }
:root[data-mode="research"] .bg-violet-500\/20 { background-color: rgb(16 185 129 / 0.2) !important; }
:root[data-mode="research"] .bg-violet-500\/70 { background-color: rgb(16 185 129 / 0.7) !important; }
:root[data-mode="research"] .bg-violet-600\/20 { background-color: rgb(5 150 105 / 0.2) !important; }
:root[data-mode="research"] .bg-violet-600\/40 { background-color: rgb(5 150 105 / 0.4) !important; }

:root[data-mode="research"] .border-violet-400    { border-color: #34d399 !important; }
:root[data-mode="research"] .border-violet-500    { border-color: #10b981 !important; }
:root[data-mode="research"] .border-violet-500\/25 { border-color: rgb(16 185 129 / 0.25) !important; }
:root[data-mode="research"] .border-violet-500\/30 { border-color: rgb(16 185 129 / 0.3) !important; }
:root[data-mode="research"] .border-violet-600\/30 { border-color: rgb(5 150 105 / 0.3) !important; }

:root[data-mode="research"] .shadow-violet-500\/5 { --tw-shadow-color: rgb(16 185 129 / 0.05) !important; --tw-shadow: var(--tw-shadow-colored) !important; }

:root[data-mode="research"] .hover\:bg-violet-500:hover    { background-color: #10b981 !important; }
:root[data-mode="research"] .hover\:bg-violet-500\/20:hover { background-color: rgb(16 185 129 / 0.2) !important; }
:root[data-mode="research"] .hover\:bg-violet-600:hover    { background-color: #059669 !important; }
:root[data-mode="research"] .hover\:bg-violet-600\/40:hover { background-color: rgb(5 150 105 / 0.4) !important; }
:root[data-mode="research"] .hover\:text-violet-400:hover  { color: #34d399 !important; }
:root[data-mode="research"] .hover\:border-violet-500:hover { border-color: #10b981 !important; }
:root[data-mode="research"] .focus\:border-violet-500:focus { border-color: #10b981 !important; }

:root[data-mode="research"] .from-violet-500 {
  --tw-gradient-from: #10b981 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
:root[data-mode="research"] .to-violet-700 { --tw-gradient-to: #047857 var(--tw-gradient-to-position) !important; }