/* ============================================================
   WatFill — Design Tokens
   Material Design 3 token system, water-utility brand.
   Seed: #2563EB (hydro blue) · Tertiary seed: #0E8C8C (water teal)
   ============================================================ */

:root {
  /* ---------- Brand / Key colors — LIGHT ---------- */
  --wf-primary: #2563EB;
  --wf-on-primary: #FFFFFF;
  --wf-primary-container: #DBE6FF;
  --wf-on-primary-container: #001945;
  --wf-primary-fixed-dim: #B4CBFF;

  --wf-secondary: #4A5B78;
  --wf-on-secondary: #FFFFFF;
  --wf-secondary-container: #DCE3F2;
  --wf-on-secondary-container: #0B1B33;

  --wf-tertiary: #0E8C8C;
  --wf-on-tertiary: #FFFFFF;
  --wf-tertiary-container: #B5EFED;
  --wf-on-tertiary-container: #00201F;

  --wf-error: #BA1A1A;
  --wf-on-error: #FFFFFF;
  --wf-error-container: #FFDAD6;
  --wf-on-error-container: #410002;

  /* ---------- Semantic status ---------- */
  --wf-success: #1B7F3B;
  --wf-on-success: #FFFFFF;
  --wf-success-container: #C7F0D2;
  --wf-on-success-container: #00210C;

  --wf-warning: #A25B00;
  --wf-on-warning: #FFFFFF;
  --wf-warning-container: #FFDDB6;
  --wf-on-warning-container: #2B1700;

  --wf-info: #00639A;
  --wf-info-container: #CDE5FF;
  --wf-on-info-container: #001D33;

  /* ---------- Surfaces ---------- */
  --wf-background: #F6F8FC;
  --wf-on-background: #191C20;
  --wf-surface: #F9FAFD;
  --wf-on-surface: #191C20;
  --wf-surface-variant: #E0E2EC;
  --wf-on-surface-variant: #43474E;

  --wf-surface-container-lowest: #FFFFFF;
  --wf-surface-container-low: #F2F4FA;
  --wf-surface-container: #ECEFF6;
  --wf-surface-container-high: #E6EAF2;
  --wf-surface-container-highest: #E0E5EE;

  --wf-inverse-surface: #2E3135;
  --wf-inverse-on-surface: #F0F1F6;
  --wf-inverse-primary: #B0C8FF;

  --wf-outline: #6B6F78;          /* AA-clean at 11px/600 on all surfaces */
  --wf-outline-variant: #C8CAD3;
  --wf-scrim: 8 12 20;

  /* ---------- State layer opacities (MD3) ---------- */
  --wf-state-hover: 0.08;
  --wf-state-focus: 0.10;
  --wf-state-press: 0.12;
  --wf-state-drag: 0.16;

  /* ---------- Shape scale ---------- */
  --wf-r-xs: 4px;
  --wf-r-sm: 8px;
  --wf-r-md: 12px;
  --wf-r-lg: 16px;
  --wf-r-xl: 20px;
  --wf-r-2xl: 28px;
  --wf-r-full: 999px;

  /* ---------- Elevation — soft, layered, low-alpha ---------- */
  --wf-e0: none;
  --wf-e1: 0 1px 2px rgb(16 24 40 / 0.05), 0 1px 3px rgb(16 24 40 / 0.05);
  --wf-e2: 0 1px 2px rgb(16 24 40 / 0.04), 0 4px 10px -2px rgb(16 24 40 / 0.07);
  --wf-e3: 0 2px 4px rgb(16 24 40 / 0.04), 0 10px 24px -6px rgb(16 24 40 / 0.10);
  --wf-e4: 0 4px 8px rgb(16 24 40 / 0.05), 0 18px 40px -10px rgb(16 24 40 / 0.14);
  --wf-e5: 0 8px 16px rgb(16 24 40 / 0.06), 0 28px 64px -12px rgb(16 24 40 / 0.20);
  --wf-ring: 0 0 0 4px rgb(37 99 235 / 0.14);

  /* ---------- Spacing (4pt grid) ---------- */
  --wf-1: 4px;   --wf-2: 8px;   --wf-3: 12px;  --wf-4: 16px;
  --wf-5: 20px;  --wf-6: 24px;  --wf-7: 32px;  --wf-8: 40px;
  --wf-9: 48px;  --wf-10: 64px; --wf-11: 80px;

  /* ---------- Layout ---------- */
  --wf-sidebar-w: 268px;
  --wf-sidebar-w-rail: 84px;
  --wf-header-h: 68px;
  --wf-content-max: 1560px;

  /* ---------- Typography ---------- */
  --wf-font: "IBM Plex Sans Arabic", "Cairo", "Noto Sans Arabic", "Segoe UI",
             Tahoma, system-ui, -apple-system, sans-serif;
  --wf-font-num: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;

  /* ---------- Motion ---------- */
  --wf-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --wf-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --wf-ease-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
  --wf-ease-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
  --wf-dur-short: 120ms;
  --wf-dur-med: 220ms;
  --wf-dur-long: 380ms;

  /* Chart series — colorblind-safe ordering, blue-first */
  --wf-c1: #2563EB;
  --wf-c2: #0E8C8C;
  --wf-c3: #E07B00;
  --wf-c4: #7C4DFF;
  --wf-c5: #1B7F3B;
  --wf-c6: #C2185B;
}

/* ============================================================
   DARK THEME
   ============================================================ */
[data-theme="dark"] {
  --wf-primary: #B0C8FF;
  --wf-on-primary: #002D6E;
  --wf-primary-container: #12437C;
  --wf-on-primary-container: #DAE2FF;
  --wf-primary-fixed-dim: #0E3468;

  --wf-secondary: #BCC7DC;
  --wf-on-secondary: #263141;
  --wf-secondary-container: #3C4759;
  --wf-on-secondary-container: #DCE3F2;

  --wf-tertiary: #6FD5D1;
  --wf-on-tertiary: #003735;
  --wf-tertiary-container: #00504E;
  --wf-on-tertiary-container: #B5EFED;

  --wf-error: #FFB4AB;
  --wf-on-error: #690005;
  --wf-error-container: #93000A;
  --wf-on-error-container: #FFDAD6;

  --wf-success: #7EDB98;
  --wf-on-success: #003914;
  --wf-success-container: #005322;
  --wf-on-success-container: #9AF8B3;

  --wf-warning: #FFB868;
  --wf-on-warning: #4A2800;
  --wf-warning-container: #6A3C00;
  --wf-on-warning-container: #FFDDB6;

  --wf-info: #94CCFF;
  --wf-info-container: #004A77;
  --wf-on-info-container: #CDE5FF;

  --wf-background: #0F1216;
  --wf-on-background: #E1E2E8;
  --wf-surface: #111418;
  --wf-on-surface: #E1E2E8;
  --wf-surface-variant: #43474E;
  --wf-on-surface-variant: #C3C6CF;

  --wf-surface-container-lowest: #0B0E12;
  --wf-surface-container-low: #191C20;
  --wf-surface-container: #1D2024;
  --wf-surface-container-high: #272A2F;
  --wf-surface-container-highest: #32353A;

  --wf-inverse-surface: #E1E2E8;
  --wf-inverse-on-surface: #2E3135;
  --wf-inverse-primary: #2563EB;

  --wf-outline: #8D9199;
  --wf-outline-variant: #43474E;
  --wf-scrim: 0 0 0;

  --wf-e1: 0 1px 2px rgb(0 0 0 / 0.30), 0 1px 3px rgb(0 0 0 / 0.28);
  --wf-e2: 0 1px 2px rgb(0 0 0 / 0.28), 0 4px 10px -2px rgb(0 0 0 / 0.36);
  --wf-e3: 0 2px 4px rgb(0 0 0 / 0.30), 0 10px 24px -6px rgb(0 0 0 / 0.44);
  --wf-e4: 0 4px 8px rgb(0 0 0 / 0.32), 0 18px 40px -10px rgb(0 0 0 / 0.52);
  --wf-e5: 0 8px 16px rgb(0 0 0 / 0.34), 0 28px 64px -12px rgb(0 0 0 / 0.60);
  --wf-ring: 0 0 0 4px rgb(176 200 255 / 0.20);

  --wf-c1: #8FB4FF;
  --wf-c2: #6FD5D1;
  --wf-c3: #FFB868;
  --wf-c4: #C0A8FF;
  --wf-c5: #7EDB98;
  --wf-c6: #FF8FB1;
}