/* ============================================================
   Figma-Like Design System — Design Tokens
   Brand: UPLOANMITRA Financial Advisors
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --color-primary: #0F3D73;
  --color-primary-dark: #0B2C57;
  --color-primary-light: #18549A;
  --color-primary-muted: rgba(15, 61, 115, 0.08);

  --color-gold: #D4A437;
  --color-gold-dark: #C69214;
  --color-gold-light: #F5D061;
  --color-gold-muted: rgba(212, 164, 55, 0.12);

  --color-slate-900: #0B1320;
  --color-slate-800: #111C2E;
  --color-slate-700: #1C2B42;
  --color-slate-600: #334155;
  --color-slate-500: #64748B;
  --color-slate-400: #94A3B8;
  --color-slate-200: #E2E8F0;
  --color-slate-100: #F1F5F9;
  --color-slate-50: #F8FAFC;

  --color-bg: #FFFFFF;
  --color-bg-secondary: #F8FAFC;
  --color-card: #FFFFFF;
  --color-text: #0B1320;
  --color-text-secondary: #475569;
  --color-text-muted: #94A3B8;
  --color-border: #E2E8F0;
  --color-border-light: #F1F5F9;

  --color-success: #10B981;
  --color-success-bg: #ECFDF5;
  --color-warning: #F59E0B;
  --color-warning-bg: #FFFBEB;
  --color-error: #EF4444;
  --color-error-bg: #FEF2F2;

  /* ── Spacing Scale (4px / 8px grid) ── */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */

  /* ── Border Radius (Figma Tokens) ── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 28px;
  --radius-full: 9999px;

  /* ── Elevational Shadows ── */
  --shadow-sm: 0 2px 8px rgba(11, 19, 32, 0.04);
  --shadow-md: 0 6px 20px rgba(11, 19, 32, 0.08);
  --shadow-lg: 0 12px 32px rgba(11, 19, 32, 0.12);
  --shadow-xl: 0 20px 48px rgba(11, 19, 32, 0.16);
  --shadow-2xl: 0 28px 64px rgba(11, 19, 32, 0.20);
}