/**
 * VaultGuard — centralized theme tokens
 *
 * Change brand colors HERE only. App shell (app.css) and login (styles.css)
 * both consume these variables. No JS/API behavior depends on these values.
 *
 * Quick rebrand example (orange):
 *   --brand-500: #E05000;
 *   --brand-600: #C84800;
 *   (and adjust 50–900 scale + soft RGB below)
 */

:root {
  /* ===== Brand scale (primary) ===== */
  --brand-50: #ecfdf5;
  --brand-100: #d1fae5;
  --brand-200: #a7f3d0;
  --brand-300: #6ee7b7;
  --brand-400: #34d399;
  --brand-500: #10b981;
  --brand-600: #059669;
  --brand-700: #047857;
  --brand-800: #065f46;
  --brand-900: #064e3b;

  /* Soft surfaces derived from brand (change with brand) */
  --brand-hover-surface: #f0faf5;

  /* RGB for shadows / rgba() helpers (match --brand-500 / 600 / 800) */
  --brand-rgb: 16, 185, 129;
  --brand-rgb-dark: 5, 150, 105;
  --brand-rgb-deep: 6, 95, 70;

  /* ===== Neutrals ===== */
  --neutral-0: #ffffff;
  --neutral-50: #f7fcf9;
  --neutral-100: #f1f5f3;
  --neutral-200: #e2ebe6;
  --neutral-400: #94a89e;
  --neutral-600: #475952;
  --neutral-700: #5a6f64;
  --neutral-800: #1e2923;

  /* ===== Semantic status (keep distinct from brand if you rebrand) ===== */
  --status-success: #059669;
  --status-success-soft: #ecfdf5;
  --status-warning: #d97706;
  --status-warning-soft: #fffbeb;
  --status-danger: #dc2626;
  --status-danger-soft: #fef2f2;

  /* ===== Layout / chrome ===== */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --font-sans: "Outfit", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --header-h: 64px;

  /* ===== App shell aliases (--vg-*) ===== */
  --vg-header-h: var(--header-h);
  --vg-topbar-h: var(--header-h);
  --vg-bg: var(--neutral-50);
  --vg-surface: var(--neutral-0);
  --vg-border: var(--neutral-200);
  --vg-text: var(--neutral-800);
  --vg-muted: var(--neutral-700);
  --vg-primary: var(--brand-500);
  --vg-primary-dark: var(--brand-600);
  --vg-primary-soft: var(--brand-50);
  --vg-success: var(--status-success);
  --vg-success-soft: var(--status-success-soft);
  --vg-warning: var(--status-warning);
  --vg-warning-soft: var(--status-warning-soft);
  --vg-danger: var(--status-danger);
  --vg-danger-soft: var(--status-danger-soft);
  --vg-shadow: 0 1px 3px rgba(var(--brand-rgb-deep), 0.06);
  --vg-shadow-md: 0 4px 14px rgba(var(--brand-rgb-deep), 0.08);
  --vg-radius: var(--radius-sm);
  --vg-accent-border: var(--brand-200);
  --vg-nav-active-bg: var(--brand-500);
  --vg-nav-active-hover: var(--brand-600);
  --vg-island-surface: var(--brand-50);
  --vg-island-surface-deep: var(--brand-100);
  --vg-hover-bg: var(--brand-hover-surface);

  /* ===== Login aliases (legacy --green-* names kept for styles.css) ===== */
  --green-50: var(--brand-50);
  --green-100: var(--brand-100);
  --green-200: var(--brand-200);
  --green-400: var(--brand-400);
  --green-500: var(--brand-500);
  --green-600: var(--brand-600);
  --green-700: var(--brand-700);
  --green-800: var(--brand-800);
  --green-900: var(--brand-900);
  --preloader-deep: var(--brand-50);
  --preloader-mint: var(--brand-400);
  --preloader-glow: var(--brand-500);
  --white: var(--neutral-0);
  --off-white: var(--neutral-50);
  --gray-100: var(--neutral-100);
  --gray-200: var(--neutral-200);
  --gray-400: var(--neutral-400);
  --gray-600: var(--neutral-600);
  --gray-800: var(--neutral-800);
  --shadow-green: 0 20px 60px -12px rgba(var(--brand-rgb-dark), 0.32);
  --shadow-card: 0 8px 32px rgba(var(--brand-rgb-deep), 0.12);
  --glass: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.92);
  --radius: var(--radius-md);
  --font: var(--font-sans);
  --mono: var(--font-mono);
}