/* Al-Qasr operating system: design tokens, from the approved Figma file (SPNQJzYvjsHtBAl6JsLwSM).
   Cream page, raised warm-white cards, espresso for active states, gold accents, olive and terracotta statuses.
   Gold is for fills and accents; gold text on a light surface uses --brand-accent-ink. */

:root {
  color-scheme: light;

  /* Brand */
  --brand: #2f241a;
  --brand-ink: #fffbf2;
  --brand-accent: #d8b978;
  --brand-accent-ink: #7a5d2a;
  --brand-accent-soft: #efe1c6;

  /* Surfaces */
  --page: #f5eedf;
  --surface: #fffdf8;
  --surface-2: #fffbf2;
  --surface-sunken: #efe1c6;
  --sidebar: #fffdf8;
  --overlay: rgba(47, 36, 26, 0.5);

  /* Ink */
  --ink: #2a2118;
  --ink-2: #5f4f38;
  --ink-3: #6f6049;
  --ink-inverse: #fffbf2;

  /* Lines */
  --line: #eadfc9;
  --line-strong: #dccfb4;
  --control-border: #b8a888;
  --focus: #8c6d3f;

  /* Interaction */
  --hover: rgba(107, 82, 43, 0.06);
  --active: rgba(107, 82, 43, 0.1);
  /* Primary actions use espresso with warm-white text. */
  --primary: #2f241a;
  --primary-hover: #4a3b2c;
  --primary-ink: #fffbf2;

  /* Status (health): good / warning / serious / critical — always with icon + label.
     On-track is deliberately neutral: colour is reserved for exceptions. */
  --on-track: #b8a888;
  --good: #55643f;
  --good-ink: #55643f;
  --good-soft: #e5ead8;
  --warning: #d8b978;
  --warning-ink: #6e5424;
  --warning-soft: #f6ecd6;
  --serious: #b5532f;
  --serious-ink: #a83e24;
  --serious-soft: #f6e4db;
  --critical: #b5532f;
  --critical-ink: #a83e24;
  --critical-soft: #f6e4db;

  /* Lifecycle dots */
  --st-draft: #b8a888;
  --st-approved: #8c6d3f;
  --st-sent: #8c6d3f;
  --st-in_progress: #55643f;
  --st-blocked: #b5532f;
  --st-delivered: #d8b978;
  --st-closed: #55643f;
  --st-rejected: #b8a888;

  /* Charts (categorical slots 1–2, validated order) */
  --series-1: #55643f;
  --series-2: #b5532f;
  --grid: #eadfc9;
  --axis: #dccfb4;

  /* Type */
  --font: "Tajawal", "Geeza Pro", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 28px;
  --fs-hero: 36px;

  /* Space (4px grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* Shape */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;
  --lift: 0 10px 24px rgba(107, 82, 43, 0.14), 0 2px 4px rgba(107, 82, 43, 0.08), inset 0 1px 0 #fff;
  --lift-sm: 0 4px 10px rgba(107, 82, 43, 0.14);
  --lift-dark: 0 10px 20px rgba(47, 36, 26, 0.3);
  --espresso-2: #4a3b2c;
  --olive: #55643f;
  --olive-soft: #e5ead8;
  --terracotta: #b5532f;
  --late: #a83e24;
  --shadow-sm: 0 4px 10px rgba(107, 82, 43, 0.14);
  --shadow-md: 0 10px 24px rgba(107, 82, 43, 0.14), 0 2px 4px rgba(107, 82, 43, 0.08);
  --shadow-lg: 0 14px 30px rgba(107, 82, 43, 0.2);

  --pressed: var(--surface);
  --sidebar-w: 92px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}