/*
 * Deewan design tokens: the one place colours, type, spacing, radii and shadows are defined.
 * Every other rule in style.css uses these variables, so changing the look means changing this file.
 *
 * Palette (from deewaninstitute.com):
 *   Primary Brown #8B6F48 · Dark Brown #5A402B · Deep Bronze #70532B · Deewan Gold #C8A868
 *   White #FFFFFF · Warm Off-White #F8F7F4 · Charcoal #292929 · Coral Red #D75142
 *
 * Contrast (WCAG AA, 4.5:1 for text) was checked for every text/background pair used:
 *   charcoal on off-white 13.6 · white on primary brown 4.7 · bronze links on off-white 6.6 ·
 *   muted text on white 5.9 · gold is decorative only (icons, rules, highlights), never body text.
 *
 * Light and dark: the dark values apply when the device prefers dark (unless the person picked
 * light with the theme switch), or when they picked dark.
 */
:root {
  /* Brand */
  --deewan-brown: #8b6f48;
  --deewan-brown-dark: #5a402b;
  --deewan-bronze: #70532b;
  --deewan-gold: #c8a868;
  --deewan-coral: #d75142;

  /* Surfaces and text */
  --bg: #f8f7f4;               /* page background */
  --card: #ffffff;             /* cards, forms, tables */
  --surface-2: #f3efe8;        /* inputs, table heads, quiet panels */
  --text: #292929;
  --muted: #6b6359;
  --line: #e7e1d7;
  --line-strong: #d6cdbf;

  /* Interactive */
  --brand: var(--deewan-brown);          /* buttons, active states */
  --brand-dark: var(--deewan-brown-dark); /* hover, headings accents */
  --brand-soft: #f3ede3;                 /* selected rows, soft badges */
  --link: var(--deewan-bronze);
  --on-brand: #ffffff;
  --accent: var(--deewan-gold);          /* icons, highlights, decorative rules */
  --accent-soft: #f6efdf;
  --focus: #5a402b;
  --focus-halo: rgba(200, 168, 104, .45);

  /* Status (kept functional, not brand coloured) */
  --ok: #276b43;     --ok-soft: #e8f3ec;
  --warn: #8a5a00;   --warn-soft: #fbf1de;
  --danger: #b3362b; --danger-soft: #fbeae7;
  --info: #1f5f8b;   --info-soft: #e7f0f7;
  --notify: #c2463a; /* coral, for notification counts only */
  --other-leave: #c4b9a8;

  /* Sidebar */
  --side-bg: #4a3423;
  --side-bg-2: #5a402b;
  --side-text: #f5efe5;
  --side-muted: #d9c9ae;
  --side-hover: rgba(255, 255, 255, .08);
  --side-active: rgba(255, 255, 255, .14);
  --side-line: rgba(255, 255, 255, .12);

  /* Type, spacing, shape */
  --font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ar: "Noto Kufi Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", system-ui, sans-serif;
  --fs: 15px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --radius: 14px; --radius-sm: 10px; --radius-xs: 6px;
  --shadow: 0 1px 2px rgba(58, 42, 28, .05), 0 6px 20px rgba(58, 42, 28, .06);
  --shadow-hover: 0 2px 4px rgba(58, 42, 28, .06), 0 10px 28px rgba(58, 42, 28, .10);
  --sidebar-w: 256px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1a1714; --card: #24201b; --surface-2: #2c2721; --text: #ede7de; --muted: #a89d90;
    --line: #3a332b; --line-strong: #4a4137;
    --brand: #d9bc8c; --brand-dark: #ead3ad; --brand-soft: #3a3024; --link: #d9bc8c; --on-brand: #1a1714;
    --accent: #c8a868; --accent-soft: #3a3226; --focus: #ead3ad; --focus-halo: rgba(200, 168, 104, .35);
    --ok: #8fd0a5; --ok-soft: #1f3327; --warn: #e9c27a; --warn-soft: #3a3020; --danger: #f0a096; --danger-soft: #3d2523;
    --info: #9cc8ea; --info-soft: #1f2e3a; --notify: #c2463a; --other-leave: #6f6558;
    --side-bg: #120f0c; --side-bg-2: #1c1713; --side-text: #ede7de; --side-muted: #b5a790;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-hover: 0 4px 16px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1a1714; --card: #24201b; --surface-2: #2c2721; --text: #ede7de; --muted: #a89d90;
  --line: #3a332b; --line-strong: #4a4137;
  --brand: #d9bc8c; --brand-dark: #ead3ad; --brand-soft: #3a3024; --link: #d9bc8c; --on-brand: #1a1714;
  --accent: #c8a868; --accent-soft: #3a3226; --focus: #ead3ad; --focus-halo: rgba(200, 168, 104, .35);
  --ok: #8fd0a5; --ok-soft: #1f3327; --warn: #e9c27a; --warn-soft: #3a3020; --danger: #f0a096; --danger-soft: #3d2523;
  --info: #9cc8ea; --info-soft: #1f2e3a; --notify: #c2463a; --other-leave: #6f6558;
  --side-bg: #120f0c; --side-bg-2: #1c1713; --side-text: #ede7de; --side-muted: #b5a790;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-hover: 0 4px 16px rgba(0, 0, 0, .4);
  color-scheme: dark;
}