/* ==========================================================================
   GROWUPHOST DESIGN TOKENS  (shared by admin + client)
   One source of truth for colour, type, spacing, radius, elevation & motion.
   Light is the default; dark applies via <html data-theme="dark"> (set by the
   inline boot script in each layout) or, without JS, via prefers-color-scheme.
   Legacy variable names used by older modules are aliased at the bottom.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Brand */
  --brand: #1a5cff;
  --brand-hover: #0f46d6;
  --brand-ink: #0f46d6;
  --brand-soft: #eef4ff;
  --brand-border: #c9dbff;
  --brand-ring: rgba(26, 92, 255, 0.18);
  --brand-navy: #0b1d3a;
  --on-brand: #ffffff;

  /* Surfaces */
  --canvas: #f7f8fb;
  --surface: #ffffff;
  --surface-2: #f9fafc;
  --surface-3: #f1f3f8;
  --surface-glass: rgba(255, 255, 255, 0.78);
  --surface-raised: #ffffff;
  --overlay: rgba(9, 17, 33, 0.52);

  /* Lines */
  --line: #e6e8ef;
  --line-soft: #f0f2f6;
  --line-strong: #d7dbe5;

  /* Text */
  --ink: #0b1020;
  --ink-2: #485168;
  --ink-3: #7c8599;

  /* Semantic */
  --success: #16a34a;  --success-hover: #15803d; --success-bg: #ecfdf3; --success-border: #b7ebc9; --success-ink: #067647;
  --warning: #d97706;  --warning-hover: #b45309; --warning-bg: #fff8eb; --warning-border: #fcdca4; --warning-ink: #a15c07;
  --danger:  #dc2626;  --danger-hover: #b91c1c;  --danger-bg: #fef2f2;  --danger-border: #fbcaca;  --danger-ink: #b42318;
  --info:    #0284c7;  --info-hover: #0369a1;    --info-bg: #eff8ff;    --info-border: #b9e0f7;    --info-ink: #026aa2;
  --violet:  #6d28d9;  --violet-bg: #f4f0ff;     --violet-ink: #5b21b6;

  /* Secondary palette: base hue / soft tint / ink (AA on its tint) / gradient */
  --blue: #1a5cff;    --blue-soft: #eaf1ff;    --blue-ink: #1546c9;    --g-blue: linear-gradient(135deg, #4f8bff 0%, #1a5cff 100%);
  --violet-c: #7c3aed; --violet-soft: #f3edff; --violet-ink2: #6025c9; --g-violet: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  --pink: #db2777;    --pink-soft: #fdeef6;    --pink-ink: #b0195c;   --g-pink: linear-gradient(135deg, #f472b6 0%, #db2777 100%);
  --cyan: #0891b2;    --cyan-soft: #e6f8fc;    --cyan-ink: #0b6f88;   --g-cyan: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%);
  --amber: #f59e0b;   --amber-soft: #fff6e0;   --amber-ink: #a8520a;  --g-amber: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
  --emerald: #10b981; --emerald-soft: #e7faf2; --emerald-ink: #047857; --g-emerald: linear-gradient(135deg, #34d399 0%, #059669 100%);
  --orange: #f97316;  --orange-soft: #fff1e6;  --orange-ink: #b9420b; --g-orange: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
  --rose: #e11d48;    --rose-soft: #ffeef1;    --rose-ink: #be123c;   --g-rose: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
  --slate: #64748b;   --slate-soft: #f1f4f8;   --slate-ink: #475569;

  /* Signature gradients */
  --grad-brand: linear-gradient(135deg, #1a5cff 0%, #7c3aed 60%, #e11d74 100%);
  --grad-brand-hover: linear-gradient(135deg, #3170ff 0%, #8b4cf0 60%, #ec3a88 100%);
  --grad-rainbow: linear-gradient(90deg, #1a5cff, #7c3aed 25%, #db2777 50%, #f59e0b 75%, #10b981);
  --grad-mesh:
    radial-gradient(60% 80% at 10% 15%, rgba(124, 58, 237, 0.95) 0%, transparent 60%),
    radial-gradient(50% 70% at 90% 0%, rgba(236, 72, 153, 0.85) 0%, transparent 60%),
    radial-gradient(60% 80% at 85% 100%, rgba(6, 182, 212, 0.85) 0%, transparent 60%),
    linear-gradient(135deg, #1a5cff 0%, #4338ca 100%);
  --grad-sidebar:
    radial-gradient(120% 40% at 0% 0%, rgba(124, 58, 237, 0.35), transparent 60%),
    radial-gradient(100% 35% at 100% 100%, rgba(6, 182, 212, 0.22), transparent 60%),
    linear-gradient(180deg, #111653 0%, #172a8a 48%, #2b1a7a 100%);
  --glow-brand: 0 10px 28px -8px rgba(76, 81, 255, 0.55);
  --glow-strong: 0 14px 34px -8px rgba(110, 72, 255, 0.65);

  /* Sidebar (admin = navy, client = surface) */
  --nav-bg: #0b1020;
  --nav-bg-2: #091830;
  --nav-line: rgba(255, 255, 255, 0.08);
  --nav-text: #b7c4dc;
  --nav-text-dim: #7d8ca8;
  --nav-hover: rgba(255, 255, 255, 0.06);

  /* Typography */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-2xs: 10.5px;
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;

  /* Spacing (4px scale) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-full: 999px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 2px rgba(11, 16, 32, 0.04), 0 2px 6px -1px rgba(11, 16, 32, 0.05);
  --shadow-md: 0 1px 2px rgba(11, 16, 32, 0.04), 0 8px 24px -8px rgba(11, 16, 32, 0.12);
  --shadow-lg: 0 2px 4px rgba(11, 16, 32, 0.04), 0 24px 48px -16px rgba(11, 16, 32, 0.22);
  --shadow-xl: 0 24px 56px -16px rgba(16, 24, 40, 0.32);

  /* Layout & motion */
  --sidebar-width: 268px;
  --topbar-height: 64px;
  --header-height: 64px;
  --tap: 40px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.18s;
}

/* ---------- Dark theme ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand: #3d7bff;
  --brand-hover: #5a8fff;
  --brand-ink: #8fb2ff;
  --brand-soft: rgba(61, 123, 255, 0.14);
  --brand-border: rgba(61, 123, 255, 0.38);
  --brand-ring: rgba(61, 123, 255, 0.32);

  --canvas: #0b1020;
  --surface: #11162a;
  --surface-2: #151b31;
  --surface-3: #1b2240;
  --surface-glass: rgba(15, 20, 38, 0.78);
  --surface-raised: #161c34;
  --overlay: rgba(2, 6, 14, 0.66);

  --line: #232a42;
  --line-soft: #1a2036;
  --line-strong: #2f3754;

  --ink: #eef1f8;
  --ink-2: #a8b0c4;
  --ink-3: #7a8399;

  --success: #22a95a;  --success-hover: #1e9450; --success-bg: rgba(34, 197, 94, 0.13);  --success-border: rgba(34, 197, 94, 0.32);  --success-ink: #6ee7a0;
  --warning: #d98a0b;  --warning-hover: #c27a08; --warning-bg: rgba(245, 158, 11, 0.13); --warning-border: rgba(245, 158, 11, 0.32); --warning-ink: #fcc66b;
  --danger:  #e5484d;  --danger-hover: #f05a5f;  --danger-bg: rgba(239, 68, 68, 0.13);  --danger-border: rgba(239, 68, 68, 0.34);  --danger-ink: #fca5a5;
  --info:    #1d93d2;  --info-hover: #36a3dd;    --info-bg: rgba(14, 165, 233, 0.13);  --info-border: rgba(14, 165, 233, 0.32);  --info-ink: #7dd3fc;
  --violet:  #8b5cf6;  --violet-bg: rgba(139, 92, 246, 0.15); --violet-ink: #c4b5fd;

  --nav-bg: #080c18;
  --nav-bg-2: #0a111f;
  --nav-line: rgba(255, 255, 255, 0.06);

  /* Neon-ish accents on deep navy */
  --blue: #5b8cff;    --blue-soft: rgba(91, 140, 255, 0.16);   --blue-ink: #9dbaff;
  --violet-c: #a78bfa; --violet-soft: rgba(167, 139, 250, 0.16); --violet-ink2: #c4b5fd;
  --pink: #f472b6;    --pink-soft: rgba(244, 114, 182, 0.16);  --pink-ink: #f9a8d4;
  --cyan: #22d3ee;    --cyan-soft: rgba(34, 211, 238, 0.14);   --cyan-ink: #67e8f9;
  --amber: #fbbf24;   --amber-soft: rgba(251, 191, 36, 0.14);  --amber-ink: #fcd34d;
  --emerald: #34d399; --emerald-soft: rgba(52, 211, 153, 0.14); --emerald-ink: #6ee7b7;
  --orange: #fb923c;  --orange-soft: rgba(251, 146, 60, 0.15); --orange-ink: #fdba74;
  --rose: #fb7185;    --rose-soft: rgba(251, 113, 133, 0.15);  --rose-ink: #fda4af;
  --slate: #94a3b8;   --slate-soft: rgba(148, 163, 184, 0.14); --slate-ink: #cbd5e1;
  --grad-sidebar:
    radial-gradient(120% 40% at 0% 0%, rgba(139, 92, 246, 0.38), transparent 60%),
    radial-gradient(100% 35% at 100% 100%, rgba(34, 211, 238, 0.18), transparent 60%),
    linear-gradient(180deg, #0a0e33 0%, #0f1c5c 50%, #1d1052 100%);
  --glow-brand: 0 10px 30px -8px rgba(110, 120, 255, 0.6);
  --glow-strong: 0 14px 38px -8px rgba(150, 100, 255, 0.75);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 26px 60px -16px rgba(0, 0, 0, 0.7);
}

/* No-JS fallback: follow the OS preference unless the user chose light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --brand: #3d7bff; --brand-hover: #5a8fff; --brand-ink: #8fb2ff; --brand-soft: rgba(61, 123, 255, 0.14); --brand-border: rgba(61, 123, 255, 0.38);
    --canvas: #0a101d; --surface: #111a2b; --surface-2: #162134; --surface-3: #1c2940; --surface-glass: rgba(17, 26, 43, 0.94); --surface-raised: #17223a;
    --line: #24324a; --line-soft: #1c283d; --line-strong: #31415e;
    --ink: #e8edf6; --ink-2: #a3b1c8; --ink-3: #74839e;
    --success-bg: rgba(34, 197, 94, 0.13); --success-border: rgba(34, 197, 94, 0.32); --success-ink: #6ee7a0;
    --warning-bg: rgba(245, 158, 11, 0.13); --warning-border: rgba(245, 158, 11, 0.32); --warning-ink: #fcc66b;
    --danger-bg: rgba(239, 68, 68, 0.13); --danger-border: rgba(239, 68, 68, 0.34); --danger-ink: #fca5a5;
    --info-bg: rgba(14, 165, 233, 0.13); --info-border: rgba(14, 165, 233, 0.32); --info-ink: #7dd3fc;
    --violet-bg: rgba(139, 92, 246, 0.15); --violet-ink: #c4b5fd;
    --nav-bg: #0c1424; --nav-bg-2: #0a111f;
  }
}

/* ---------- Legacy aliases (older modules & inline styles use these) ---------- */
:root {
  --brand-blue: var(--brand);
  --brand-blue-dark: var(--brand-hover);

  /* admin names */
  --bg-app: var(--canvas);
  --bg-app-grad: var(--canvas);
  --bg-card: var(--surface);
  --bg-card-muted: var(--surface-2);
  --bg-elevated: var(--surface-raised);
  --bg-glass: var(--surface-glass);
  --primary-50: var(--brand-soft);
  --primary-100: var(--brand-soft);
  --primary-500: var(--brand);
  --primary-600: var(--brand);
  --primary-700: var(--brand-ink);
  --text-main: var(--ink);
  --text-muted: var(--ink-2);
  --text-light: var(--ink-3);
  --border-color: var(--line);
  --border-subtle: var(--line-soft);
  --status-emerald-bg: var(--success-bg);  --status-emerald-text: var(--success-ink); --status-emerald-border: var(--success-border);
  --status-amber-bg: var(--warning-bg);    --status-amber-text: var(--warning-ink);   --status-amber-border: var(--warning-border);
  --status-rose-bg: var(--danger-bg);      --status-rose-text: var(--danger-ink);     --status-rose-border: var(--danger-border);
  --status-indigo-bg: var(--brand-soft);   --status-indigo-text: var(--brand-ink);    --status-indigo-border: var(--brand-border);
  --status-cyan-bg: var(--info-bg);        --status-cyan-text: var(--info-ink);       --status-cyan-border: var(--info-border);
  --sidebar-bg: var(--nav-bg);
  --sidebar-border: var(--nav-line);
  --sidebar-text: var(--nav-text);
  --sidebar-text-active: #ffffff;
  --sidebar-hover: var(--nav-hover);
  --sidebar-active-bg: var(--brand);
  --sidebar-active-border: #ffffff;
  --shadow-glow: 0 6px 16px -6px rgba(26, 92, 255, 0.5);
  --shadow-drawer: var(--shadow-xl);

  /* client names */
  --bg-base: var(--canvas);
  --bg-surface: var(--surface);
  --bg-card-hover: var(--surface-2);
  --bg-muted: var(--surface-2);
  --border-focus: var(--brand);
  --primary: var(--brand);
  --primary-hover: var(--brand-hover);
  --primary-dark: var(--brand-ink);
  --primary-light: var(--brand-soft);
  --primary-glow: var(--brand-ring);
  --text-subtle: var(--ink-2);
  --success-light: var(--success-bg);
  --warning-light: var(--warning-bg);
  --danger-light: var(--danger-bg);
  --info-light: var(--info-bg);
  --accent: var(--info);
  --font-heading: var(--font-display);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-xl: var(--r-xl);
  --radius-full: var(--r-full);

  /* legacy gradient names map onto the vibrant palette */
  --grad-primary: var(--grad-brand);
  --grad-aurora: var(--grad-brand);
  --grad-hero: var(--grad-mesh);
  --primary-gradient: var(--grad-brand);
  --accent-gradient: var(--g-cyan);
  --grad-ocean: var(--g-cyan);
  --grad-mint: var(--g-emerald);
  --grad-sunset: var(--g-rose);
  --grad-gold: var(--g-amber);
  --grad-berry: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
}