/* =====================================================================
   WasenderCRM: "The Ledger" design system (shared by every page).
   Warm ivory paper, deep emerald ink, brass accents. Dark mode = "night ledger".
   Pages set <html data-theme="light|dark"> (saved in localStorage "wc-theme").
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Instrument+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap");

:root {
  /* Core palette */
  --paper: #f6f3ec; --paper-2: #eee8dc; --card: #fffdf8; --ink: #14231c; --ink-2: #3f5047; --muted: #7b847a;
  --rule: #e3dccb; --rule-2: #d2c7af;
  --emerald: #0b5d3f; --emerald-2: #0f7350; --emerald-soft: rgba(11, 93, 63, .09); --on-emerald: #fbf8f1;
  --brass: #a07a32; --brass-2: #c39a4c; --brass-soft: rgba(160, 122, 50, .13);
  --ok: #17734c; --ok-bg: rgba(23, 115, 76, .1); --warn-c: #95660a; --warn-bg-c: rgba(201, 145, 30, .14);
  --bad-c: #b23a2c; --bad-bg-c: rgba(178, 58, 44, .1); --info-c: #2b5f93; --info-bg-c: rgba(43, 95, 147, .1);
  --shadow-1: 0 1px 0 rgba(20, 35, 28, .04), 0 1px 3px rgba(20, 35, 28, .06);
  --shadow-2: 0 18px 40px -18px rgba(20, 35, 28, .28), 0 2px 6px rgba(20, 35, 28, .06);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #0d1512; --paper-2: #131d18; --card: #16211b; --ink: #ede7d8; --ink-2: #c4bcaa; --muted: #8d9286;
  --rule: rgba(214, 190, 140, .13); --rule-2: rgba(214, 190, 140, .24);
  --emerald: #2f9f72; --emerald-2: #3cb985; --emerald-soft: rgba(47, 159, 114, .14); --on-emerald: #08130e;
  --brass: #d2ae68; --brass-2: #e3c487; --brass-soft: rgba(210, 174, 104, .14);
  --ok: #5fd6a0; --ok-bg: rgba(95, 214, 160, .12); --warn-c: #e7c06a; --warn-bg-c: rgba(231, 192, 106, .13);
  --bad-c: #ef857a; --bad-bg-c: rgba(239, 133, 122, .12); --info-c: #94bdf0; --info-bg-c: rgba(148, 189, 240, .12);
  --shadow-1: 0 1px 0 rgba(0, 0, 0, .3); --shadow-2: 0 22px 50px -20px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .35);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.9 0 0 0 0 0.7 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* The theme switch (same on every page) */
.theme-toggle { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rule-2); background: var(--card); color: var(--ink-2);
  border-radius: 99px; padding: 5px 11px 5px 7px; font: 600 12.5px/1 var(--f-body); cursor: pointer; transition: border-color .15s, color .15s; }
.theme-toggle:hover { border-color: var(--brass); color: var(--ink); }
.theme-toggle .knob { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--brass-soft); color: var(--brass); }
.theme-toggle svg { width: 13px; height: 13px; }

/* Language picker (next to the Light/Dark switch on every page) */
.lang-pick { appearance: none; -webkit-appearance: none; border: 1px solid var(--rule-2); background: var(--card); color: var(--ink-2); border-radius: 99px;
  padding: 5px 26px 5px 11px; font: 600 12.5px/1.2 var(--f-body); cursor: pointer; margin-left: 6px; max-width: 120px;
  background-image: linear-gradient(45deg, transparent 50%, var(--brass) 50%), linear-gradient(135deg, var(--brass) 50%, transparent 50%);
  background-position: calc(100% - 13px) 52%, calc(100% - 9px) 52%; background-size: 4px 4px; background-repeat: no-repeat; }
.lang-pick:hover { border-color: var(--brass); color: var(--ink); }
.lang-pick:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }