/**
 * AutoFlow — Design tokens (shared by the marketing site and the client portal)
 * Direction: institutional / fintech-grade trust (Stripe, Qonto, Ramp register).
 * Loaded before theme.css and portal.css so both can consume the same values —
 * this file is the single source of truth for color/type/radius/shadow.
 */
:root {
  /* ── Navy — primary/institutional. Strong section backgrounds, nav, headings. ── */
  --navy-900: #0A2540;
  --navy-800: #0F2E52;
  --navy-700: #15396A;

  /* ── Accent — confident blue. Reserved for CTAs and key links only. ── */
  --accent: #2563EB;
  --accent-hover: #1D4ED8;
  --accent-dim: #EFF6FF;
  --accent-dark: #1D4ED8; /* darker leg of accent gradients — was navy #0A1628 */
  --accent-red: #C2594A;
  --accent-red-dim: #FDEAE7;

  /* ── Neutrals — cool grays, 90% of the interface. ── */
  --bg: #FFFFFF;
  --bg-alt: #F8FAFC;
  --bg-card: #FFFFFF;
  --bg-card2: #F1F5F9;
  --bg-hover: #F1F5F9;
  --border: #E2E8F0;
  --border-strong: #CBD5E1;
  --border-hover: #CBD5E1;
  --border-accent: rgba(37,99,235,0.25); /* hover/focus border tint — was navy-tinted */
  --fg: #0F172A;
  --fg-muted: #475569; /* WCAG AA (4.5:1) needs this over --fg-subtle cards; #64748B only cleared 4.34:1 there */
  --fg-dim: #94A3B8;
  --fg-subtle: #F1F5F9; /* light background tint (hover/badges) — not a text color, despite the name */

  /* ── Status — one sober color per state. ── */
  --success: #16A34A;
  --success-dim: #F0FDF4;
  --warning: #D97706;
  --warning-dim: #FFFBEB;
  --danger: #DC2626;
  --danger-dim: #FEF2F2;

  /* ── Typography ── */
  --font-head: 'Inter', 'Noto Sans Arabic', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', sans-serif;
  --font-body: 'Inter', 'Noto Sans Arabic', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', sans-serif;

  /* ── Radius — slightly rounded, never bubbly. ── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* ── Shadows — subtle, never a spotlight. ── */
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.06);
  --shadow-md: 0 2px 8px rgba(15,23,42,0.06), 0 4px 12px rgba(15,23,42,0.04);
  --shadow-lg: 0 8px 24px rgba(15,23,42,0.08), 0 2px 6px rgba(15,23,42,0.04);
}