/* ════════════════════════════════════════════════════════════════════
   FM-218 — Design System (tokens + reset + utilities)
   ════════════════════════════════════════════════════════════════════

   Single source of truth for the platform's visual language.

   What lives here:
     - All CSS custom properties (design tokens)
     - Base reset + font loading
     - Accessibility floor (focus rings, skip link, reduced-motion)
     - Utility classes that don't belong to any one component
       (clearfix, visually-hidden, container, stack/cluster)

   What does NOT live here:
     - Component-specific styles → ds-components.css
     - Page-specific styles → page <style> blocks (kept minimal)

   Loading order on every page:
       <link rel="stylesheet" href="/css/design-system.css">
       <link rel="stylesheet" href="/css/ds-components.css">

   ════════════════════════════════════════════════════════════════════ */

/* ── Font loading ───────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ════ Design tokens ════════════════════════════════════════════════ */
:root {
  /* ── Color palette ─────────────────────────────────────────────────
     Warm institutional / Gulf premium. Neutrals lean cream (not cold
     grey); primary is a deep, layered navy; accent is brass, not
     mustard. Every brand color has 4 stops: deep / standard / 2 / soft.
     ────────────────────────────────────────────────────────────────── */
  --c-bg:           #f7f4ec;    /* warm cream page bg */
  --c-bg-soft:      #f1ede3;    /* slightly deeper warm */
  --c-surface-1:    #ffffff;    /* card / sheet */
  --c-surface-2:    #f5f1e8;    /* subtle row hover / muted block */
  --c-surface-3:    #ebe5d4;    /* avatar / chip */
  --c-elevated:     #fffefb;    /* modal / hero card */

  --c-text-1:       #14202c;    /* deep navy-near-black, not pure black */
  --c-text-2:       #41566a;
  --c-text-3:       #7c8a99;
  --c-text-4:       #aab5c0;    /* very muted / placeholder */
  --c-text-inv:     #fbf8f0;

  --c-border:       #e3dccc;
  --c-border-2:     #cfc6b1;
  --c-stroke-faint: rgba(20,32,44,.06);

  --c-primary-deep: #061c33;    /* sidebar floor / hero depth */
  --c-primary:      #0c3559;    /* brand navy */
  --c-primary-2:    #1a4d7e;
  --c-primary-3:    #2a6fa8;    /* highlight / link */
  --c-primary-soft: #e2ebf3;

  --c-gold-deep:    #8a6a1c;
  --c-gold-2:       #a37e2c;
  --c-gold:         #c9a14a;    /* refined brass — less mustard */
  --c-gold-light:   #e8cf90;
  --c-gold-soft:    #f5ead0;

  --c-success:      #16794d;
  --c-success-soft: #dbece1;
  --c-warning:      #a8650f;
  --c-warning-soft: #f9ecd1;
  --c-danger:       #a8261c;
  --c-danger-soft:  #f5d8d4;
  --c-info:         #1a4d7e;
  --c-info-soft:    #e2ebf3;

  /* ── Gradients (semantic, not page-specific) ─────────────────────── */
  --grad-sidebar:    linear-gradient(180deg, var(--c-primary) 0%, var(--c-primary-deep) 100%);
  --grad-primary:    linear-gradient(180deg, var(--c-primary-2) 0%, var(--c-primary) 100%);
  --grad-primary-hero: linear-gradient(135deg, var(--c-primary-2) 0%, var(--c-primary) 55%, var(--c-primary-deep) 100%);
  --grad-gold:       linear-gradient(135deg, #d8b25c 0%, var(--c-gold) 50%, var(--c-gold-2) 100%);
  --grad-gold-soft:  linear-gradient(135deg, var(--c-gold-soft) 0%, #f9efd6 100%);
  --grad-surface-warm: linear-gradient(180deg, #fffefb 0%, #fbf6e9 100%);

  /* ── Typography ─────────────────────────────────────────────────── */
  --font-display: 'IBM Plex Sans Arabic', 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', 'Consolas', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  64px;   /* hero display only */

  --w-regular:   400;
  --w-medium:    500;
  --w-semibold:  600;
  --w-bold:      700;
  --w-extrabold: 800;
  --w-display:   700;

  --lh-tight:   1.2;
  --lh-snug:    1.4;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* ── Spacing (4-grid) ───────────────────────────────────────────── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* ── Radius ─────────────────────────────────────────────────────── */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 999px;

  /* ── Shadows (layered: depth + crisp 1px stroke) ─────────────────── */
  --shadow-xs:   0 1px 2px rgba(6,28,51,.04);
  --shadow-sm:   0 1px 2px rgba(6,28,51,.05), 0 4px 12px -4px rgba(6,28,51,.08);
  --shadow-md:   0 1px 2px rgba(6,28,51,.06), 0 10px 24px -10px rgba(6,28,51,.18);
  --shadow-lg:   0 2px 4px rgba(6,28,51,.06), 0 24px 48px -16px rgba(6,28,51,.28);
  --shadow-xl:   0 4px 8px rgba(6,28,51,.08), 0 40px 80px -24px rgba(6,28,51,.40);
  --shadow-card: 0 1px 1px rgba(6,28,51,.04), 0 8px 20px -10px rgba(6,28,51,.12);
  --shadow-card-hover: 0 2px 4px rgba(6,28,51,.06), 0 18px 36px -14px rgba(6,28,51,.24);
  --shadow-gold:  0 8px 24px -8px rgba(201,161,74,.38);
  --shadow-sidebar-inset: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -120px 200px -100px rgba(0,0,0,.30);
  --shadow-focus: 0 0 0 3px rgba(12,53,89,.22);

  /* ── Motion ─────────────────────────────────────────────────────── */
  --ease:   cubic-bezier(.16,.84,.44,1);
  --dur-1:  120ms;
  --dur-2:  200ms;
  --dur-3:  320ms;

  /* ── Layout ─────────────────────────────────────────────────────── */
  --sidebar-w-expanded:   240px;
  --sidebar-w-collapsed:  72px;
  --topbar-h:             64px;
  --tabbar-h:             64px;
  --content-max:          1280px;
  --content-readable:     720px;

  /* ── z-index scale ──────────────────────────────────────────────── */
  --z-base:       1;
  --z-sidebar:    10;
  --z-topbar:     20;
  --z-tabbar:     20;
  --z-overlay:    100;
  --z-modal:      200;
  --z-toast:      300;
  --z-popover:    400;
}

/* ════ Reset ════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--w-regular);
  line-height: var(--lh-relaxed);
  color: var(--c-text-1);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding-inline-start: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--w-semibold);
  line-height: 1;
  color: inherit; cursor: pointer; background: none; border: 0; padding: 0;
}
input, select, textarea {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--w-regular);
  line-height: var(--lh-normal);
  color: inherit;
}
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; }
hr { border: 0; height: 1px; background: var(--c-border); margin: 0; }

/* ════ Typography — single source of truth ═══════════════════════════
   Every page that loads this stylesheet inherits this scale. Pages
   should NOT redeclare font-family / font-size / font-weight on body,
   h1-h5, p, label, th, td, button. Use the .ty-* utilities when
   semantic HTML isn't possible (e.g. a <div> that needs h2 styling).
   ─────────────────────────────────────────────────────────────────── */
/* Heading + body rules deliberately do NOT set `color`.
   Pages and parents (e.g. <section class="text-white">) own the color
   via inheritance from body's default. Setting color: var(--c-text-1)
   here would break hero sections that rely on inherited white text. */
h1, .ty-h1 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--w-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: -.018em;
}
@media (min-width: 1024px) { h1, .ty-h1 { font-size: var(--text-3xl); } }

h2, .ty-h2 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  letter-spacing: -.012em;
}
@media (min-width: 1024px) { h2, .ty-h2 { font-size: var(--text-2xl); } }

h3, .ty-h3 {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
}
@media (min-width: 1024px) { h3, .ty-h3 { font-size: var(--text-xl); } }

h4, .ty-h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
}
@media (min-width: 1024px) { h4, .ty-h4 { font-size: var(--text-lg); } }

h5, h6, .ty-h5 {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
}

p, .ty-body {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
}
.ty-body-lg {
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
}
.ty-body-sm {
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
}
.ty-caption {
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  color: var(--c-text-3);
}

label, .ty-label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--w-semibold);
  line-height: var(--lh-normal);
}

.ty-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--w-bold);
  line-height: var(--lh-normal);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ty-button {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--w-semibold);
  line-height: 1;
  letter-spacing: -.005em;
}
.ty-button-lg {
  font-size: var(--text-base);
  font-weight: var(--w-semibold);
  line-height: 1;
}

.ty-card-title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  letter-spacing: -.01em;
}
.ty-section-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  letter-spacing: -.01em;
}

/* Table typography — table cells inherit through native elements */
th, .ty-th {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--w-bold);
  line-height: var(--lh-normal);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-text-3);
}
td, .ty-td {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--w-regular);
  line-height: var(--lh-normal);
}

/* Tabular / numerical */
.ty-tabular {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.ty-kpi-value {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--w-extrabold);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
@media (min-width: 1024px) { .ty-kpi-value { font-size: var(--text-3xl); } }
.ty-kpi-hero {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: var(--w-extrabold);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
@media (min-width: 1024px) { .ty-kpi-hero { font-size: var(--text-4xl); } }

/* ── Numbers: tabular for dashboards by default in mono ─────────── */
.mono, .num,
[data-mono], [data-num] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ════ Accessibility floor ════════════════════════════════════════ */

/* Skip-to-content link — visible on focus only */
.skip-link {
  position: absolute; top: -100px; inset-inline-start: var(--space-4);
  background: var(--c-primary); color: var(--c-text-inv);
  padding: var(--space-3) var(--space-5); border-radius: var(--r-sm);
  font-weight: var(--w-semibold); z-index: var(--z-popover);
  transition: top var(--dur-2) var(--ease);
}
.skip-link:focus { top: var(--space-3); outline: 2px solid var(--c-gold); outline-offset: 2px; }

/* Universal focus ring — visible only on keyboard nav */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Visually hidden — keep screen-readers happy, no visual cost */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ════ Utility classes ════════════════════════════════════════════ */

/* Centered, max-width container */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.container--readable { max-width: var(--content-readable); }

/* Stack: vertical rhythm with a single gap value */
.stack > * + * { margin-block-start: var(--stack-gap, var(--space-4)); }
.stack-1 > * + * { margin-block-start: var(--space-1); }
.stack-2 > * + * { margin-block-start: var(--space-2); }
.stack-3 > * + * { margin-block-start: var(--space-3); }
.stack-4 > * + * { margin-block-start: var(--space-4); }
.stack-5 > * + * { margin-block-start: var(--space-5); }
.stack-6 > * + * { margin-block-start: var(--space-6); }

/* Cluster: horizontal arrangement with consistent gap + wrap */
.cluster {
  display: flex; flex-wrap: wrap;
  gap: var(--cluster-gap, var(--space-3));
  align-items: center;
}
.cluster-1 { --cluster-gap: var(--space-1); }
.cluster-2 { --cluster-gap: var(--space-2); }
.cluster-3 { --cluster-gap: var(--space-3); }
.cluster-4 { --cluster-gap: var(--space-4); }

/* Grid helpers (responsive auto-fit) */
.grid-fluid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 240px), 1fr));
  gap: var(--space-4);
}
.grid-fluid--md { --grid-min: 280px; }
.grid-fluid--lg { --grid-min: 320px; }

/* Text utilities */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }

.text-1  { color: var(--c-text-1); }
.text-2  { color: var(--c-text-2); }
.text-3  { color: var(--c-text-3); }
.text-inv{ color: var(--c-text-inv); }
.text-primary { color: var(--c-primary); }
.text-gold    { color: var(--c-gold); }
.text-success { color: var(--c-success); }
.text-warning { color: var(--c-warning); }
.text-danger  { color: var(--c-danger); }

.weight-regular  { font-weight: var(--w-regular); }
.weight-medium   { font-weight: var(--w-medium); }
.weight-semibold { font-weight: var(--w-semibold); }
.weight-bold     { font-weight: var(--w-bold); }
.weight-display  { font-weight: var(--w-display); }

.lh-tight   { line-height: var(--lh-tight); }
.lh-normal  { line-height: var(--lh-normal); }
.lh-relaxed { line-height: var(--lh-relaxed); }

.truncate {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.wrap-anywhere { overflow-wrap: anywhere; word-break: normal; }

/* Layout utilities */
.flex-1     { flex: 1 1 0%; min-width: 0; }
.flex-none  { flex: none; }
.shrink-0   { flex-shrink: 0; }
.grow       { flex-grow: 1; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.justify-center  { justify-content: center; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }

/* Surface helpers (cards without component bloat) */
.surface-1 { background: var(--c-surface-1); }
.surface-2 { background: var(--c-surface-2); }
.surface-3 { background: var(--c-surface-3); }
.surface-primary { background: var(--c-primary); color: var(--c-text-inv); }
.surface-gold    { background: var(--c-gold); color: var(--c-text-inv); }

.radius-sm { border-radius: var(--r-sm); }
.radius-md { border-radius: var(--r-md); }
.radius-lg { border-radius: var(--r-lg); }
.radius-xl { border-radius: var(--r-xl); }

.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* Spacing utility */
.p-1 { padding: var(--space-1); }  .p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }  .p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }  .p-6 { padding: var(--space-6); }

.m-0 { margin: 0; }
.mt-2 { margin-block-start: var(--space-2); }
.mt-4 { margin-block-start: var(--space-4); }
.mt-5 { margin-block-start: var(--space-5); }
.mt-6 { margin-block-start: var(--space-6); }

/* Date displays — force pure LTR for numbers, no Arabic bidi marks */
.date-display, [data-date] {
  direction: ltr;
  unicode-bidi: bidi-override;
  font-variant-numeric: tabular-nums;
}

/* Print stylesheet basics */
@media print {
  body { background: #fff; color: #000; }
  .no-print, .ds-shell-sidebar, .ds-shell-tabbar, .ds-shell-topbar { display: none !important; }
  .ds-shell-main { padding: 0; max-width: 100%; }
}