/* ============================================================================
   DAWLY — DESIGN TOKENS. The single :root source for HQ *and* the portal.
   Palette: "Bridge" — obsidian action · ivory paper · champagne signature.
   The brand's own grammar (dawly.com CTA = obsidian pill, ivory text,
   champagne flourish) expressed as an instrument. Every pair passes WCAG AA.
   Light-only by decision (no dark mode).
   Load order: tokens.css → style.css (HQ) / portal.css (client pages).
   ========================================================================== */

/* ─── SELF-HOSTED FONTS (Google Fonts removed: latency + privacy) ───────── */
@font-face{font-family:'Inter';src:url('fonts/InterVariable.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-SemiBold.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
/* Arabic groundwork — ships now so the translation step is words, not CSS */
@font-face{font-family:'IBM Plex Sans Arabic';src:url('fonts/IBMPlexSansArabic-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('fonts/IBMPlexSansArabic-Medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('fonts/IBMPlexSansArabic-SemiBold.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}

:root{
  color-scheme:light;

  /* ─── NEUTRAL RAMP — warm paper, near-neutral cool ink (ivory × obsidian) ─ */
  --c-bg:#FBFAF7; --c-surface:#FFFFFF; --c-surface-2:#F5F4F0; --c-surface-3:#EEECE6;
  --c-line:#E9E7E1; --c-line-2:#DDDAD2; --c-line-3:#C9C5BB;
  --c-ink:#141419; --c-ink-2:#54525A; --c-ink-3:#706E78; --c-ink-4:#B3B1B8;
  /* ink-4 is DECORATIVE ONLY (dots, dividers, disabled) — never running text */

  /* ─── ACCENT — obsidian action ramp; brass ink; champagne soft/ring ────── */
  --c-accent:#0D0D12; --c-accent-hover:#1B1B24; --c-accent-press:#060609; /* press = brand obsidian */
  --c-accent-ink:#6F5714; --c-accent-fg:#FFF2E6;                          /* fg = brand ivory */
  --c-accent-soft:#F6F1E2; --c-accent-soft-2:#EFE7CE; --c-accent-line:#E2D7B4;
  --c-accent-ring:rgba(140,109,31,.42);   /* champagne focus glow — the one place gold shines */
  --c-champagne:#C9A84C;                  /* raw brand gold: fills/large marks ONLY, never text */

  /* ─── SEMANTIC — recalibrated to the warm canvas; warn kept clear of brass ─ */
  --c-ok:#116E45;   --c-ok-soft:#E6F2EA;   --c-ok-line:#C0DFCB;
  --c-warn:#8F4E08;  --c-warn-soft:#FAEEDF;  --c-warn-line:#EBD5B5;
  --c-bad:#B4342A;   --c-bad-soft:#FCEBE7;   --c-bad-line:#F1C8C0;
  --c-bad-ring:rgba(180,52,42,.22);
  --c-info:#1461B0;  --c-info-soft:#E8F0FA;  --c-info-line:#C3D9F1;
  --c-neutral:#706E78; --c-neutral-soft:#EFEDE8; --c-neutral-line:#DCD9D1;

  /* ─── CHART — obsidian first, champagne-brass second: editorial, on-brand ─ */
  --c-1:#2B2B38; --c-2:#9A7A24; --c-3:#4E6FB3; --c-4:#22897E;
  --c-5:#AE5D3B; --c-6:#96628E; --c-7:#8F8C96;
  --c-active:#116E45; --c-onboarding:#8F4E08; --c-churned:#B4342A; --c-pending:#1461B0;
  --c-track:#EFEDE6; --c-grid:#F2F0EB;

  /* ─── TYPOGRAPHY ───────────────────────────────────────────────────────── */
  --font-sans:'Inter','IBM Plex Sans Arabic','SF Pro Text',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono','SF Mono',ui-monospace,'JetBrains Mono',Menlo,monospace;
  --font-sans-ar:'IBM Plex Sans Arabic','Inter',-apple-system,sans-serif;
  --font-feat:'cv05' 1,'cv08' 1,'ss01' 1;
  --t-display:26px; --t-h1:20px; --t-h2:15px; --t-body:13.5px;
  --t-sm:12.5px; --t-cap:11.5px; --t-micro:10.5px; --t-data:13px;

  /* ─── SPACING / RADII / BORDERS ────────────────────────────────────────── */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px;
  --r-xs:4px; --r-sm:6px; --r:8px; --r-md:10px; --r-lg:12px; --r-xl:14px; --r-2xl:18px; --r-full:999px;
  --border:1px solid var(--c-line); --border-2:1px solid var(--c-line-2);

  /* ─── DENSITY (tables) — flip [data-density="compact"] for ~30% more rows ─ */
  --row-py:12px; --cell-lh:1.4; --thead-py:10px;

  /* ─── ELEVATION — warm-retinted; borders carry structure, shadow = float ── */
  --shadow-sm:0 1px 2px rgba(24,20,12,.04), 0 1px 1px rgba(24,20,12,.03);
  --shadow:0 1px 3px rgba(24,20,12,.045), 0 12px 30px -20px rgba(24,20,12,.16);
  --shadow-md:0 4px 10px -4px rgba(24,20,12,.10), 0 16px 40px -24px rgba(24,20,12,.22);
  --shadow-pop:0 8px 16px -6px rgba(24,20,12,.12), 0 24px 48px -28px rgba(24,20,12,.28);
  --shadow-modal:0 24px 60px -16px rgba(20,18,12,.45), 0 4px 14px rgba(20,18,12,.12);
  --focus:0 0 0 3px var(--c-accent-ring);
  --scrim:rgba(20,19,15,.42);

  /* ─── MOTION ───────────────────────────────────────────────────────────── */
  --ease:cubic-bezier(.2,.6,.25,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --t-1:90ms; --t-2:150ms; --t-3:220ms; --t-4:320ms;

  /* ─── SHELL GEOMETRY / kbd ─────────────────────────────────────────────── */
  --sidebar-w:236px; --icon:18px; --icon-stroke:1.6; --nav-h:34px; --header-h:60px;
  --kbd-bg:#FBFAF7; --kbd-line:#DDDAD2; --kbd-ink:#706E78;

  /* ─── LEGACY ALIASES — FROZEN. New code uses --c-*. Migration debt at freeze:
         renewals(77) pipeline(36) client_view(25) apply(15) dashboard(7).
         Delete each alias when its last consumer is migrated. ──────────────── */
  --bg:var(--c-bg); --ink:var(--c-ink); --ink-2:var(--c-ink-2); --ink-3:var(--c-ink-3); --ink-4:var(--c-ink-4);
  --line:var(--c-line); --line-2:var(--c-line-2);
  --surface:var(--c-surface); --surface-2:var(--c-surface-2); --surface-3:var(--c-surface-3);
  --accent:var(--c-accent); --accent-2:var(--c-accent-hover); --accent-soft:var(--c-accent-soft);
  --accent-ink:var(--c-accent-ink);
  --ok:var(--c-ok); --warn:var(--c-warn); --bad:var(--c-bad); --info:var(--c-info); --neutral:var(--c-neutral);
  --ok-soft:var(--c-ok-soft); --warn-soft:var(--c-warn-soft); --bad-soft:var(--c-bad-soft);
  --bad-ink:var(--c-bad); --bad-line:var(--c-bad-line); --info-soft:var(--c-info-soft);
  --radius:var(--r); --radius-lg:var(--r-lg); --radius-sm:var(--r-sm);
}

/* ─── ARABIC / RTL GROUNDWORK — inert until <html lang="ar" dir="rtl"> ───── */
html[lang="ar"]{--font-sans:var(--font-sans-ar)}
html[lang="ar"] body{letter-spacing:0}   /* Arabic law #1: never track Arabic script */

/* ─── Language pill — for portal + public pages (base.html HQ uses .langtog) ─ */
.lgt{display:inline-flex;gap:3px;padding:3px;background:var(--c-surface-2);border:1px solid var(--c-line);border-radius:999px;vertical-align:middle;text-decoration:none;cursor:pointer}
.lgt span{min-width:30px;text-align:center;font:600 12px/1.6 var(--font-sans);color:var(--c-ink-3);padding:3px 10px;border-radius:999px}
.lgt span.on{background:var(--c-surface);color:var(--c-ink);box-shadow:0 1px 2px rgba(0,0,0,.10)}
.lgt:hover span:not(.on){color:var(--c-ink)}
.lgt-float{position:fixed;top:14px;inset-inline-end:14px;z-index:60}