/* =====================================================================
   MySmartInvoice – THEME TOKENS (SHSS UI). Change the look here only.
   Brand (provisional, docs/DECISIONS.md D-12): navy #13294B + teal #0E7C86.
   Accent presets [data-accent], light/dark [data-mode], density [data-density], corners [data-shape].
   ===================================================================== */
:root {
  --brand-primary: #13294b; --brand-accent: #0e7c86;
  --accent: #0e7c86; --accent-600: #0b6870; --accent-700: #08535a; --accent-50: #e8f5f6; --accent-100: #c8e8eb; --accent-contrast: #ffffff;
  --coral: #0e7c86; --coral-700: #08535a; --coral-50: #e8f5f6;            /* legacy alias used by shared components */
  --hero-from: #13294b; --hero-to: #0e7c86; --brand-gradient: linear-gradient(120deg, #13294b, #0e7c86);
  --bg: #f4f7f9; --surface: #ffffff; --surface-2: #f7f9fb; --surface-3: #eef2f6;
  --border: #e2e8ef; --border-strong: #cfd8e3;
  --text: #13294b; --text-2: #3a4a66; --text-3: #63728b; --overlay: rgba(19, 41, 75, .45);
  --ok: #15803d; --ok-bg: #ecfdf3; --warn: #b45309; --warn-bg: #fff8e6; --err: #b91c1c; --err-bg: #fef2f2; --info: #1d5fd1; --info-bg: #eef4ff;
  --violet: #6d4ed8; --violet-bg: #f3efff;
  --st-all: #64748b; --st-all-bg: #f1f5f9; --st-draft: #1d6fb8; --st-draft-bg: #e6f2fc;
  --radius-sm: 8px; --radius: 10px; --radius-lg: 14px; --radius-xl: 20px;
  --shadow-sm: 0 1px 2px rgba(19, 41, 75, .05); --shadow: 0 1px 3px rgba(19, 41, 75, .07), 0 4px 12px rgba(19, 41, 75, .05); --shadow-lg: 0 16px 40px rgba(19, 41, 75, .16);
  --font: "Inter", system-ui, Arial, sans-serif; --font-display: "Inter", system-ui, Arial, sans-serif;
  --fs-xs: 12px; --fs-sm: 14px; --fs: 15px; --fs-md: 16px; --fs-lg: 19px; --fs-xl: 23px; --fs-2xl: 28px;
  --pad: 16px; --row-h: 50px; --ctrl-h: 42px; --sidebar-w: 256px;
  color-scheme: light;
}
[data-accent="blue"]   { --accent:#1d5fd1; --accent-600:#1a52b5; --accent-700:#154494; --accent-50:#eef4ff; --accent-100:#d6e4fd; --coral:#1d5fd1; }
[data-accent="violet"] { --accent:#6d4ed8; --accent-600:#5d40bf; --accent-700:#4c349c; --accent-50:#f3efff; --accent-100:#e3dafd; --coral:#6d4ed8; }
[data-accent="green"]  { --accent:#15803d; --accent-600:#126d34; --accent-700:#0e5a2a; --accent-50:#ecfdf3; --accent-100:#cff5dd; --coral:#15803d; }
[data-accent="orange"] { --accent:#c2410c; --accent-600:#a8380a; --accent-700:#8a2e08; --accent-50:#fff3ec; --accent-100:#fde0cf; --coral:#c2410c; }
[data-accent="rose"]   { --accent:#be185d; --accent-600:#a3154f; --accent-700:#861142; --accent-50:#fdf0f6; --accent-100:#fad6e6; --coral:#be185d; }
[data-accent="teal"]   { }
[data-accent="custom"] { --accent-600: color-mix(in srgb, var(--accent) 86%, black); --accent-700: color-mix(in srgb, var(--accent) 72%, black);
  --accent-50: color-mix(in srgb, var(--accent) 8%, white); --accent-100: color-mix(in srgb, var(--accent) 18%, white); --coral: var(--accent); }
[data-mode="dark"] {
  --bg: #0b1426; --surface: #111c33; --surface-2: #16223c; --surface-3: #1c2a47; --border: #24324f; --border-strong: #334465;
  --text: #e7edf6; --text-2: #a9b5c9; --text-3: #8b98ae;
  --accent-600: color-mix(in srgb, var(--accent) 80%, white); --accent-700: color-mix(in srgb, var(--accent) 55%, white);
  --accent-50: color-mix(in srgb, var(--accent) 18%, transparent); --accent-100: color-mix(in srgb, var(--accent) 30%, transparent);
  --ok: #4ade80; --warn: #fbbf24; --err: #f87171; --info: #7aa7ff; --violet: #a78bfa;
  --ok-bg: rgba(34,197,94,.16); --warn-bg: rgba(245,158,11,.16); --err-bg: rgba(239,68,68,.16); --info-bg: rgba(59,130,246,.18); --violet-bg: rgba(139,92,246,.18);
  --st-all: #a9b5c9; --st-all-bg: rgba(148,163,184,.16); --st-draft: #7cc0f5; --st-draft-bg: rgba(56,152,236,.18);
  --shadow: 0 1px 3px rgba(0,0,0,.4); --shadow-lg: 0 12px 32px rgba(0,0,0,.5); color-scheme: dark;
}
[data-density="compact"] { --pad: 12px; --row-h: 40px; --ctrl-h: 36px; --fs: 14px; --fs-sm: 13px; }
[data-density="comfortable"] { --pad: 22px; --row-h: 56px; --ctrl-h: 46px; }
[data-shape="sharp"] { --radius-sm: 3px; --radius: 4px; --radius-lg: 6px; --radius-xl: 8px; }
[data-shape="round"] { --radius-sm: 10px; --radius: 14px; --radius-lg: 20px; --radius-xl: 28px; }