/* ============================================================
   assets/css/tokens.css  —  InvoiceLix design tokens
   All pages share these variables. Never hardcode colours.
   ============================================================ */

:root {
  /* ── Brand palette ── */
  --primary:      #1E2A38;
  --primary-mid:  #263446;
  --primary-lt:   #2E3F54;
  --secondary:    #344556;
  --bg:           #F7F5F1;
  --bg-warm:      #F2EFE9;
  --surface:      #FFFFFF;
  --surface-2:    #F9F8F5;
  --text:         #1A1F24;
  --text-mid:     #3D4852;
  --text-muted:   #7A8390;
  --accent:       #B59A6A;
  --accent-lt:    #D4BC8E;
  --accent-dk:    #8C7248;
  --border:       #D9D4CC;
  --border-lt:    #EAE7E1;
  --success:      #15803d;
  --danger:       #b02828;
  --warning:      #b45309;

  /* ── Invoice theme (overridden by JS per-theme) ── */
  --inv-primary:  #1E2A38;
  --inv-soft:     #F2EFE9;
  --inv-accent:   #B59A6A;

  /* ── Shadows (warm-toned) ── */
  --sh-xs: 0 1px 3px rgba(30,42,56,0.07);
  --sh-sm: 0 3px 12px rgba(30,42,56,0.08);
  --sh-md: 0 8px 28px rgba(30,42,56,0.10);
  --sh-lg: 0 20px 56px rgba(30,42,56,0.13);
  --sh-xl: 0 32px 80px rgba(30,42,56,0.16);

  /* ── Radii ── */
  --r-sm: 10px;
  --r:    18px;
  --r-lg: 26px;
  --r-xl: 36px;

  /* ── Typography ── */
  --ff-head: 'Manrope', sans-serif;
  --ff-body: 'Lato', sans-serif;
}