/* ============================================================
   base.css — design tokens, resets, typography.
   Identity: deep indigo (trust, finance) + warm amber (energy,
   action) instead of default SaaS blue. Plus Jakarta Sans for
   headings gives it a distinct, slightly-editorial feel vs the
   generic system-font look most dashboards have.
   Mobile-first: every rule below is the phone layout.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  /* Color — indigo/violet primary, amber accent, warm neutral bg */
  --color-bg:        #F6F5F3;
  --color-bg-alt:    #EFEDFB;
  --color-surface:   #FFFFFF;
  --color-border:    #E7E3F5;
  --color-text:      #1C1533;
  --color-text-dim:  #6B6280;

  --color-primary:      #4C3AE3;
  --color-primary-dark: #392BB0;
  --color-primary-light:#EEEBFD;
  --color-accent:       #F59E0B;
  --color-accent-dark:  #B45309;

  --color-success:   #0F7A4F;
  --color-success-bg:#E7F8EF;
  --color-warn:      #B45309;
  --color-warn-bg:   #FEF3E2;
  --color-danger:    #C0263B;
  --color-danger-bg: #FCEAEC;
  --color-info-bg:   #EEEBFD;

  --gradient-brand: linear-gradient(135deg, #4C3AE3 0%, #6A4CF0 55%, #8B5CF6 100%);

  /* Type */
  --font-display: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

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

  /* Layout */
  --radius: 12px;
  --radius-sm: 8px;
  --header-h: 52px;
  --bottomnav-h: 60px;
  --sidebar-w: 216px;
  --shadow-sm: 0 1px 3px rgba(28,21,51,0.06);
  --shadow-md: 0 8px 24px rgba(28,21,51,0.10);
  --shadow-brand: 0 8px 20px rgba(76,58,227,0.25);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 var(--sp-2); font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: 24px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p  { margin: 0 0 var(--sp-3); }

a { color: var(--color-primary); text-decoration: none; font-weight: 600; }
a:hover { color: var(--color-primary-dark); }

button, input, select, textarea { font-family: inherit; font-size: inherit; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.hidden { display: none !important; }

::selection { background: var(--color-primary-light); color: var(--color-primary-dark); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}