/* =========================================================
   SmartInvoice AI — Design Tokens / CSS Variables
   Central source of truth for colors, spacing, typography,
   radius, shadows and motion. Supports light & dark themes.
   ========================================================= */

:root {
  /* ---- Brand & Accent (max 5 colors total) ---- */
  --brand: #2563eb;          /* primary blue   */
  --brand-strong: #1d4ed8;   /* darker blue     */
  --brand-soft: #dbeafe;     /* light blue tint */
  --accent: #0ea5a4;         /* teal accent     */
  --accent-strong: #0f766e;

  /* ---- Neutrals (light theme) ---- */
  --bg: #f6f8fc;
  --bg-elevated: #ffffff;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-solid: #ffffff;
  --border: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.14);
  --text: #0f172a;
  --text-muted: #475569;
  --text-subtle: #64748b;

  /* ---- Status ---- */
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #d97706;

  /* ---- Glass ---- */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-blur: 18px;

  /* ---- Typography ---- */
  --font-sans: "Plus Jakarta Sans", "Inter", system-ui, -apple-system,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.18);
  --shadow-lg: 0 30px 60px -20px rgba(15, 23, 42, 0.28);
  --shadow-brand: 0 18px 40px -14px rgba(37, 99, 235, 0.5);

  /* ---- Layout ---- */
  --container: 1180px;
  --nav-h: 68px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.45s;

  /* ---- Gradients (subtle, analogous only) ---- */
  --grad-brand: linear-gradient(135deg, #2563eb 0%, #0ea5a4 100%);
  --grad-soft: linear-gradient(180deg, rgba(37, 99, 235, 0.08), rgba(14, 165, 164, 0.04));
}

/* ---------------- Dark theme ---------------- */
[data-theme="dark"] {
  --bg: #0b1120;
  --bg-elevated: #111a2e;
  --surface: rgba(20, 30, 51, 0.72);
  --surface-solid: #131d33;
  --border: rgba(148, 163, 184, 0.14);
  --border-strong: rgba(148, 163, 184, 0.24);
  --text: #e8eefc;
  --text-muted: #a6b3cc;
  --text-subtle: #7c8aa8;

  --brand-soft: rgba(37, 99, 235, 0.18);

  --glass-bg: rgba(19, 29, 51, 0.6);
  --glass-border: rgba(148, 163, 184, 0.18);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 14px 40px -16px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 40px 70px -24px rgba(0, 0, 0, 0.7);
  --grad-soft: linear-gradient(180deg, rgba(37, 99, 235, 0.12), rgba(14, 165, 164, 0.05));
}