@font-face {
  font-family: "Anjoman";
  src: url("../fonts/anjoman/Anjoman-Light.woff2") format("woff2"),
       url("../fonts/anjoman/Anjoman-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Anjoman";
  src: url("../fonts/anjoman/Anjoman-Regular.woff2") format("woff2"),
       url("../fonts/anjoman/Anjoman-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Anjoman";
  src: url("../fonts/anjoman/Anjoman-Bold.woff2") format("woff2"),
       url("../fonts/anjoman/Anjoman-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: "Anjoman", system-ui, -apple-system, "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif;
  --font-code: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Anjoman ships 300/400/700 only; 500/600 would be synthesized. */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-bold: 700;

  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.5rem;

  /* Anjoman has tall ascent/descent metrics; leading is tuned to match. */
  --lh-tight: 1.3;
  --lh-snug: 1.5;
  --lh-body: 1.7;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --control-h: 2.5rem;
  --control-h-sm: 2rem;
  --target-min: 2.75rem;

  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  --sidebar-w: 16.5rem;
  --sidebar-w-collapsed: 4.5rem;
  --topbar-h: 3.75rem;
  --content-max: 120rem;
  --gutter: var(--space-3);

  --z-sticky: 20;
  --z-sidebar: 40;
  --z-scrim: 35;
  --z-menu: 60;
  --z-dialog: 70;

  --dir: 1;

  --brand: #69ff47;
  --brand-ink: #000000;
}

:root[dir="rtl"] {
  --dir: -1;
}

@media (min-width: 48em) {
  :root { --gutter: var(--space-4); }
}
@media (min-width: 80em) {
  :root { --gutter: var(--space-5); }
}

/* Light theme (default) */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f4f5f2;
  --surface: #ffffff;
  --surface-sunken: #f4f5f2;
  --surface-hover: #f7f8f5;
  --scrim: rgb(10 12 8 / 0.55);

  --border: #e1e4dc;
  --border-control: #8a9083;

  --text: #14170f;
  --text-muted: #575c50;
  --text-subtle: #6b7064;

  --primary: var(--brand);
  --primary-hover: #55e634;
  --primary-active: #46d42b;
  --on-primary: var(--brand-ink);

  --accent-text: #17690a;
  --accent-tint: #e8fbe1;
  --focus: #000000;

  --danger-solid: #c62828;
  --danger-solid-hover: #a91f1f;
  --on-danger: #ffffff;

  --success-fg: #0b6e45;
  --success-bg: #e1f5ea;
  --success-border: #b3e0c6;
  --warning-fg: #855300;
  --warning-bg: #fcf0d3;
  --warning-border: #f0d594;
  --danger-fg: #b3261e;
  --danger-bg: #fde7e5;
  --danger-border: #f5b9b4;
  --info-fg: #1a56b3;
  --info-bg: #e4eefc;
  --info-border: #b5cdf3;
  --neutral-fg: #454a40;
  --neutral-bg: #eceee8;
  --neutral-border: #d5d9cf;

  --chart-success: #1fa968;
  --chart-danger: #d83a30;
  --chart-neutral: #b8bdb0;

  --shadow-pop: 0 8px 24px rgb(10 12 8 / 0.14), 0 1px 3px rgb(10 12 8 / 0.1);
  --shadow-dialog: 0 24px 64px rgb(10 12 8 / 0.28);

  --sidebar-bg: #000000;
  --sidebar-border: #000000;
  --sidebar-text: #c9cec1;
  --sidebar-muted: #8d9286;
  --sidebar-hover: #14160f;
  --sidebar-active: #1a1d14;
}

/* Dark theme: authored surfaces, not an inversion. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #000000;
  --surface: #0b0c0a;
  --surface-sunken: #060705;
  --surface-hover: #121410;
  --scrim: rgb(0 0 0 / 0.7);

  --border: #23251f;
  --border-control: #5b6054;

  --text: #ecefe8;
  --text-muted: #a3a89a;
  --text-subtle: #7d8275;

  --primary: var(--brand);
  --primary-hover: #86ff6b;
  --primary-active: #54e638;
  --on-primary: var(--brand-ink);

  --accent-text: var(--brand);
  --accent-tint: #0f2509;
  --focus: var(--brand);

  --danger-solid: #ff6b60;
  --danger-solid-hover: #ff8a80;
  --on-danger: #000000;

  --success-fg: #4ade9a;
  --success-bg: #0f2a1e;
  --success-border: #1b4a34;
  --warning-fg: #fbbf24;
  --warning-bg: #2e2308;
  --warning-border: #54400f;
  --danger-fg: #ff8a80;
  --danger-bg: #3a1512;
  --danger-border: #6a2620;
  --info-fg: #8ab8ff;
  --info-bg: #12233f;
  --info-border: #22406f;
  --neutral-fg: #c3c8ba;
  --neutral-bg: #1c1e18;
  --neutral-border: #2d3028;

  --chart-success: #3fd68c;
  --chart-danger: #ff6b60;
  --chart-neutral: #4a4e43;

  --shadow-pop: 0 0 0 1px #2d3028, 0 12px 32px rgb(0 0 0 / 0.7);
  --shadow-dialog: 0 0 0 1px #2d3028, 0 24px 64px rgb(0 0 0 / 0.8);

  --sidebar-bg: #000000;
  --sidebar-border: #1c1e19;
}