/* ==========================================================================
   ROUTERIZON PORTAL TOKENS — single source: docs/ui_theme_color_scheme.md
   Semi-dark (decision D2): light canvas + cards + topbar, dark-green sidebar.
   Components consume these --rz-* variables only; never raw hex.
   ========================================================================== */
:root {
  /* Brand */
  --rz-primary-50: #effaf6;
  --rz-primary-100: #d7f2e7;
  --rz-primary-200: #b0e4d0;
  --rz-primary-300: #7ed0b4;
  --rz-primary-400: #48b594;
  --rz-primary-500: #24997c;
  --rz-primary-600: #187f65;
  --rz-primary-700: #146553;
  --rz-primary-800: #135144;
  --rz-primary-900: #114339;
  --rz-primary: var(--rz-primary-600);
  --rz-primary-rgb: 24, 127, 101;
  --rz-primary-soft: var(--rz-primary-50);
  --rz-primary-soft-text: var(--rz-primary-700);

  --rz-accent-50: #fff8ec;
  --rz-accent-100: #ffebc7;
  --rz-accent-300: #febd54;
  --rz-accent-400: #f8a22c;
  --rz-accent-500: #e8830f;
  --rz-accent-600: #b0591a; /* white text passes AA (4.9:1) — used for count badges */
  --rz-accent-700: #a15220;

  /* Semantic */
  --rz-success-50: #e7f7f0;
  --rz-success-100: #d2f2e1;
  --rz-success-300: #6ed09e;
  --rz-success-500: #1e9e6b;
  --rz-success-600: #16814d;
  --rz-success-700: #106a3f;
  --rz-warning-50: #fdf3e1;
  --rz-warning-100: #fbeac7;
  --rz-warning-300: #efbb5c;
  --rz-warning-500: #dc9a2c;
  --rz-warning-600: #b87c1c;
  --rz-warning-700: #9a5b29;
  --rz-danger-50: #fbe9e9;
  --rz-danger-100: #f9d9d8;
  --rz-danger-300: #e68280;
  --rz-danger-400: #d76a67;
  --rz-danger-500: #d0504c;
  --rz-danger-600: #b33d3a;
  --rz-danger-700: #8f2e2c;
  --rz-info-50: #eef4fa;
  --rz-info-100: #d3e4f2;
  --rz-info-300: #75a9d4;
  --rz-info-500: #3e7ead;
  --rz-info-600: #2e6690;
  --rz-info-700: #235071;

  /* "r, g, b" triplets for translucent tints: rgba(var(--rz-success-rgb), 0.12) */
  --rz-success-rgb: 22, 129, 77;
  --rz-warning-rgb: 184, 124, 28;
  --rz-danger-rgb: 179, 61, 58;
  --rz-info-rgb: 46, 102, 144;
  --rz-accent-rgb: 232, 131, 15;
  --rz-ink-rgb: 30, 33, 31; /* neutral-900: shadows, scrims, hairlines */

  /* Third-party brands shown next to their integrations (kept recognisable on purpose) */
  --rz-brand-zid: #6d28d9;
  --rz-brand-zid-rgb: 139, 92, 246;

  /* Neutrals (green-tinted) */
  --rz-neutral-0: #ffffff;
  --rz-neutral-50: #f7f8f7;
  --rz-neutral-100: #eff1f0;
  --rz-neutral-150: #e4e7e5;
  --rz-neutral-200: #d8dcd9;
  --rz-neutral-300: #c0c6c2;
  --rz-neutral-400: #98a29b;
  --rz-neutral-500: #757f79;
  --rz-neutral-600: #5a625c;
  --rz-neutral-700: #454b46;
  --rz-neutral-800: #2e3230;
  --rz-neutral-900: #1e211f;

  /* Surfaces / text / borders */
  --rz-surface-canvas: var(--rz-neutral-50);
  --rz-surface-raised: var(--rz-neutral-0);
  --rz-surface-sunken: var(--rz-neutral-100);
  --rz-surface-overlay: #f4f5f4;
  --rz-border-subtle: var(--rz-neutral-150);
  --rz-border-default: var(--rz-neutral-200);
  --rz-border-strong: var(--rz-neutral-300);
  --rz-text-primary: var(--rz-neutral-900);
  --rz-text-secondary: var(--rz-neutral-600);
  /* AA (4.5:1) on raised, canvas and sunken surfaces — it is used for 11–12px meta text */
  --rz-text-tertiary: #656e68;
  --rz-text-placeholder: var(--rz-neutral-500);
  --rz-text-on-brand: #ffffff;

  /* Sidebar — the "semi" in semi-dark */
  --rz-sidebar-bg: #14201c;
  --rz-sidebar-bg-active: #1b2b25;
  --rz-sidebar-bg-hover: rgba(255, 255, 255, 0.04);
  --rz-sidebar-border: rgba(255, 255, 255, 0.06);
  --rz-sidebar-text: rgba(255, 255, 255, 0.62);
  --rz-sidebar-text-muted: rgba(255, 255, 255, 0.5); /* 5.2:1 on --rz-sidebar-bg */
  --rz-sidebar-text-active: #ffffff;
  --rz-sidebar-indicator: var(--rz-primary-400);
  --rz-sidebar-width: 260px; /* Sneat's menu width; kept for its layout maths */

  /* Shape & elevation */
  --rz-radius: 5px;
  --rz-radius-pill: 9999px;
  --rz-shadow-xs: 0 1px 2px 0 rgba(30, 33, 31, 0.04);
  --rz-shadow-sm: 0 1px 3px 0 rgba(30, 33, 31, 0.06), 0 1px 2px -1px rgba(30, 33, 31, 0.05);
  --rz-shadow-md: 0 4px 10px -2px rgba(30, 33, 31, 0.07), 0 2px 6px -3px rgba(30, 33, 31, 0.06);
  --rz-shadow-lg: 0 12px 24px -6px rgba(30, 33, 31, 0.09), 0 4px 10px -4px rgba(30, 33, 31, 0.06);
  --rz-shadow-xl: 0 20px 40px -8px rgba(30, 33, 31, 0.12), 0 8px 16px -6px rgba(30, 33, 31, 0.07);
  --rz-glow-primary: 0 8px 24px -6px rgba(24, 127, 101, 0.35);
  --rz-glow-danger: 0 8px 24px -6px rgba(208, 80, 76, 0.35);
  --rz-glow-accent: 0 8px 24px -6px rgba(232, 131, 15, 0.3);
  --rz-focus-ring: 0 0 0 3px var(--rz-primary-100);
  --rz-focus-outline: 2px solid var(--rz-primary-500);

  /* Type */
  --rz-font-sans: "Plus Jakarta Sans", "Noto Sans Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --rz-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Controls */
  --rz-control-height: 37.6px;
  --rz-topbar-height: 60px;
  --rz-title-strip-height: 46px;

  /* Motion */
  --rz-ease: cubic-bezier(0.2, 0, 0, 1);
  --rz-dur-fast: 0.15s;
  --rz-dur: 0.25s;

  /* Charts (ApexCharts via routerizon/chart-theme.js) */
  --rz-chart-1: #187f65;
  --rz-chart-2: #e8830f;
  --rz-chart-3: #3e7ead;
  --rz-chart-4: #7ed0b4;
  --rz-chart-5: #c0c6c2;

  /* Avatar initials (stable colour per name, see components/rz/avatar) */
  --rz-avatar-0: var(--rz-primary-600);
  --rz-avatar-1: var(--rz-accent-600);
  --rz-avatar-2: var(--rz-info-600);
  --rz-avatar-3: var(--rz-danger-600);
  --rz-avatar-4: var(--rz-success-600);
  --rz-avatar-5: var(--rz-primary-800);
  --rz-avatar-6: var(--rz-accent-700);
  --rz-avatar-7: var(--rz-info-700);
}

/* Arabic needs no override: Plus Jakarta Sans has no Arabic glyphs, so Arabic script falls through
   to Noto Sans Arabic (loaded only for the ar locale) while Latin text and digits stay on brand. */
html[lang="ar"] body { line-height: 1.6; }