/* ==========================================================================
   Kadim Design System - tokens + base layer. Adopted VERBATIM from the source
   of truth at docs/design/kit/kadim-kit.css (warm emerald "khadra" brand on
   stone neutrals; light/dark via [data-theme]; Arabic/RTL rhythm via
   [lang=ar]/[dir=rtl]; WCAG target floors; named z-layers), with ONE change:
   the kit's Google Fonts @import is replaced by self-hosted @font-face rules
   below (privacy/UK-residency - no user IP ever leaks to a font CDN).
   Component classes layer on top in css/components.css.
   ========================================================================== */

/* ============================ fonts ====================================== */
/* One family serves BOTH Latin (en-GB) and Arabic (ar): IBM Plex Sans Arabic.
   IBM Plex Mono carries tabular numerals, OTP codes, DBS cert numbers.
   SELF-HOSTED woff2 (wwwroot/fonts/, OFL-licensed, subset per script) - the
   unicode-range descriptors mean a visitor only downloads the scripts a page
   actually uses. */
/* IBM Plex Mono 400 — latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 400 — latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 500 — latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 500 — latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 600 — latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 600 — latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans Arabic 300 — arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-300-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* IBM Plex Sans Arabic 300 — latin-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans Arabic 300 — latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans Arabic 400 — arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-400-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* IBM Plex Sans Arabic 400 — latin-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans Arabic 400 — latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans Arabic 500 — arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-500-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* IBM Plex Sans Arabic 500 — latin-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans Arabic 500 — latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans Arabic 600 — arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-600-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* IBM Plex Sans Arabic 600 — latin-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans Arabic 600 — latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans Arabic 700 — arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-700-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* IBM Plex Sans Arabic 700 — latin-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans Arabic 700 — latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================ colors ===================================== */
:root {
  /* Warm neutral ramp: Stone */
  --stone-0:#ffffff; --stone-25:#fbfaf7; --stone-50:#f5f2ec; --stone-100:#ece7dd;
  --stone-200:#ddd7ca; --stone-300:#c8c0b0; --stone-400:#a99f8e; --stone-500:#857c6e;
  --stone-600:#665f53; --stone-700:#4d473e; --stone-800:#35302a; --stone-900:#22201b; --stone-950:#14120f;
  /* Brand ramp: Green (emerald / "khadra") */
  --green-50:#e7f2ec; --green-100:#cbe6d8; --green-200:#9dd0ba; --green-300:#66b294; --green-400:#349072;
  --green-500:#1a7659; --green-600:#0f6349; --green-700:#0b503b; --green-800:#0a402f; --green-900:#083325;
  /* Secondary/info: Teal */
  --teal-50:#e4f1f3; --teal-100:#c3e0e4; --teal-500:#2a7683; --teal-600:#1f5e69; --teal-700:#184b54;
  /* Warning: Amber */
  --amber-50:#faf0d8; --amber-100:#f4dfac; --amber-500:#bd8410; --amber-600:#99680a; --amber-700:#785107;
  /* Danger: Clay red */
  --red-50:#fbe9e5; --red-100:#f5cdc5; --red-500:#c23a2b; --red-600:#a32c1f; --red-700:#842217;
  /* Info (cool): Blue */
  --blue-50:#e6eff7; --blue-100:#c8dcef; --blue-500:#2a6aa3; --blue-600:#1f527e;
  /* Decorative accent: Brass (sparingly — motif lines only) */
  --brass-300:#d3b378; --brass-400:#bd9750; --brass-500:#9c7734;

  /* SEMANTIC ALIASES — LIGHT (default) */
  /* The parts of a control the BROWSER draws — the date/time picker panel, the
     select popup list, the calendar indicator glyph, scrollbars — take no CSS
     from us. `color-scheme` is the one hook that tells the UA which way to paint
     them, and it is why a dark-themed Kadim used to open a blinding LIGHT date
     picker with a near-invisible indicator on the dark field. `accent-color`
     does the same job for the UA-drawn tick, dot, range track and progress bar,
     so bare `<input type="checkbox">` markup that never opts into .k-choice
     lands on warm emerald instead of the OS blue. */
  color-scheme: light;
  accent-color: var(--color-brand);
  --color-bg:var(--stone-25); --color-surface:var(--stone-0); --color-surface-sunken:var(--stone-50);
  --color-surface-hover:var(--stone-50); --color-overlay-scrim:rgba(20,18,15,0.45);
  --color-border:var(--stone-200); --color-border-strong:var(--stone-300); --color-border-subtle:var(--stone-100);
  --color-text:var(--stone-900); --color-text-secondary:var(--stone-600); --color-text-muted:var(--stone-500);
  --color-text-inverse:var(--stone-0); --color-text-link:var(--green-600);
  --color-brand:var(--green-600); --color-brand-hover:var(--green-700); --color-brand-active:var(--green-800);
  --color-brand-text:#ffffff; --color-brand-subtle:var(--green-50); --color-brand-subtle-text:var(--green-800);
  --color-brand-border:var(--green-200);
  --color-focus-ring:var(--green-500); --color-focus-offset:var(--stone-0);
  --status-success-fg:var(--green-700); --status-success-bg:var(--green-50); --status-success-border:var(--green-200); --status-success-solid:var(--green-600);
  --status-warning-fg:var(--amber-700); --status-warning-bg:var(--amber-50); --status-warning-border:var(--amber-100); --status-warning-solid:var(--amber-600);
  --status-danger-fg:var(--red-700); --status-danger-bg:var(--red-50); --status-danger-border:var(--red-100); --status-danger-solid:var(--red-600);
  --status-info-fg:var(--teal-700); --status-info-bg:var(--teal-50); --status-info-border:var(--teal-100); --status-info-solid:var(--teal-600);
  --status-neutral-fg:var(--stone-700); --status-neutral-bg:var(--stone-50); --status-neutral-border:var(--stone-200); --status-neutral-solid:var(--stone-600);
  --slot-open-fg:var(--blue-600); --slot-open-bg:var(--blue-50); --slot-open-border:var(--blue-100);
  --slot-claimed-fg:var(--green-700); --slot-claimed-bg:var(--green-50); --slot-claimed-border:var(--green-200);
  --slot-dropped-fg:var(--amber-700); --slot-dropped-bg:var(--amber-50); --slot-dropped-border:var(--amber-100);
  --slot-blocked-fg:var(--red-700); --slot-blocked-bg:var(--stone-50); --slot-blocked-border:var(--stone-200);
  --dbs-valid-fg:var(--green-700); --dbs-valid-bg:var(--green-50); --dbs-valid-border:var(--green-200);
  --dbs-expiring-fg:var(--amber-700); --dbs-expiring-bg:var(--amber-50); --dbs-expiring-border:var(--amber-100);
  --dbs-missing-fg:var(--red-700); --dbs-missing-bg:var(--red-50); --dbs-missing-border:var(--red-100);
  --color-motif:var(--brass-400);
}
/* SEMANTIC ALIASES — DARK (re-maps same aliases; surfaces darken, brand lightens to keep 3:1) */
[data-theme="dark"] {
  /* Flips every UA-drawn control surface with the theme (see the light block). */
  color-scheme: dark;
  --color-bg:var(--stone-950); --color-surface:#1d1a15; --color-surface-sunken:#14120f; --color-surface-hover:#262119;
  --color-overlay-scrim:rgba(0,0,0,0.6);
  --color-border:#34302a; --color-border-strong:#464036; --color-border-subtle:#262119;
  --color-text:#f3efe7; --color-text-secondary:#bcb3a4; --color-text-muted:#93897a; --color-text-inverse:var(--stone-950); --color-text-link:var(--green-300);
  --color-brand:var(--green-500); --color-brand-hover:var(--green-400); --color-brand-active:var(--green-300);
  --color-brand-text:#ffffff; --color-brand-subtle:#0d2b21; --color-brand-subtle-text:var(--green-200); --color-brand-border:#16493700;
  --color-focus-ring:var(--green-300); --color-focus-offset:var(--stone-950);
  --status-success-fg:var(--green-200); --status-success-bg:#0d2b21; --status-success-border:#17493699; --status-success-solid:var(--green-500);
  --status-warning-fg:var(--amber-100); --status-warning-bg:#33260b; --status-warning-border:#5c440f99; --status-warning-solid:var(--amber-500);
  --status-danger-fg:#f2b3a8; --status-danger-bg:#3a1712; --status-danger-border:#6b271b99; --status-danger-solid:var(--red-500);
  --status-info-fg:var(--teal-100); --status-info-bg:#102d32; --status-info-border:#1f4c5599; --status-info-solid:var(--teal-500);
  --status-neutral-fg:#cfc7b8; --status-neutral-bg:#262119; --status-neutral-border:#464036; --status-neutral-solid:var(--stone-400);
  --slot-open-fg:#9cc4e6; --slot-open-bg:#112637; --slot-open-border:#23486699;
  --slot-claimed-fg:var(--green-200); --slot-claimed-bg:#0d2b21; --slot-claimed-border:#17493699;
  --slot-dropped-fg:var(--amber-100); --slot-dropped-bg:#33260b; --slot-dropped-border:#5c440f99;
  --slot-blocked-fg:#f2b3a8; --slot-blocked-bg:#262119; --slot-blocked-border:#464036;
  --dbs-valid-fg:var(--green-200); --dbs-valid-bg:#0d2b21; --dbs-valid-border:#17493699;
  --dbs-expiring-fg:var(--amber-100); --dbs-expiring-bg:#33260b; --dbs-expiring-border:#5c440f99;
  --dbs-missing-fg:#f2b3a8; --dbs-missing-bg:#3a1712; --dbs-missing-border:#6b271b99;
  --color-motif:var(--brass-400);
}

/* ============================ typography ================================= */
:root {
  --font-sans:"IBM Plex Sans Arabic","IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular","Menlo",monospace;
  --font-display:var(--font-sans);
  --weight-light:300; --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --text-2xs:0.6875rem; --text-xs:0.75rem; --text-sm:0.8125rem; --text-md:0.875rem; --text-base:1rem;
  --text-lg:1.125rem; --text-xl:1.375rem; --text-2xl:1.75rem; --text-3xl:2.1875rem; --text-4xl:2.75rem; --text-5xl:3.5rem;
  --leading-tight:1.15; --leading-snug:1.3; --leading-normal:1.5; --leading-relaxed:1.65;
  --tracking-tight:-0.02em; --tracking-snug:-0.01em; --tracking-normal:0; --tracking-wide:0.02em; --tracking-caps:0.06em;
  --leading-body:var(--leading-normal); --leading-heading:var(--leading-snug); --paragraph-spacing:0.75em;
  --font-body:var(--weight-regular) var(--text-base)/var(--leading-body) var(--font-sans);
  --font-label:var(--weight-medium) var(--text-md)/1.3 var(--font-sans);
}
/* Arabic/RTL rhythm — taller lines, more paragraph air; by locale, not font size */
[lang="ar"],[dir="rtl"] {
  --leading-body:1.75; --leading-heading:1.5; --leading-tight:1.35; --paragraph-spacing:0.9em;
  --tracking-tight:0; --tracking-snug:0; --tracking-caps:0;
}

/* ============================ spacing ==================================== */
:root {
  --space-0:0; --space-px:1px; --space-0-5:0.125rem; --space-1:0.25rem; --space-1-5:0.375rem; --space-2:0.5rem;
  --space-2-5:0.625rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-7:1.75rem;
  --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem;
  --target-min:24px; --target-default:40px; --target-comfortable:48px;
  --gutter:var(--space-4); --gutter-lg:var(--space-8); --content-max:72rem; --reading-max:38rem; --field-max:26rem;
}

/* ============================ radii ====================================== */
:root {
  --radius-none:0; --radius-xs:3px; --radius-sm:6px; --radius-md:9px; --radius-lg:14px; --radius-xl:20px;
  --radius-2xl:28px; --radius-pill:999px; --radius-circle:50%;
}

/* ============================ elevation ================================== */
:root {
  --shadow-xs:0 1px 2px rgba(34,32,27,0.05);
  --shadow-sm:0 1px 2px rgba(34,32,27,0.06),0 2px 6px rgba(34,32,27,0.06);
  --shadow-md:0 2px 4px rgba(34,32,27,0.06),0 8px 20px rgba(34,32,27,0.10);
  --shadow-lg:0 8px 16px rgba(34,32,27,0.10),0 24px 48px rgba(34,32,27,0.16);
  --shadow-focus:0 0 0 4px rgba(26,118,89,0.18);
  --focus-ring-width:2px; --focus-ring-offset:2px;
}
[data-theme="dark"] {
  --shadow-xs:0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.5),0 2px 6px rgba(0,0,0,0.4);
  --shadow-md:0 2px 6px rgba(0,0,0,0.5),0 10px 24px rgba(0,0,0,0.55);
  --shadow-lg:0 10px 20px rgba(0,0,0,0.55),0 28px 56px rgba(0,0,0,0.65);
  --shadow-focus:0 0 0 4px rgba(52,144,114,0.30);
}

/* ============================ motion ===================================== */
:root {
  --duration-instant:80ms; --duration-fast:140ms; --duration-base:220ms; --duration-slow:320ms; --duration-slower:480ms;
  --ease-standard:cubic-bezier(0.2,0,0,1); --ease-emphasized:cubic-bezier(0.3,0,0,1);
  --ease-exit:cubic-bezier(0.4,0,1,1); --ease-spring:cubic-bezier(0.2,0.9,0.3,1.2);
  --motion-hover:var(--duration-fast) var(--ease-standard);
  --motion-swap:var(--duration-base) var(--ease-standard);
  --motion-enter:var(--duration-slow) var(--ease-emphasized);
  --motion-confirm:var(--duration-base) var(--ease-spring);
}
@media (prefers-reduced-motion: reduce) {
  :root { --duration-instant:1ms; --duration-fast:1ms; --duration-base:1ms; --duration-slow:1ms; --duration-slower:1ms; --ease-spring:var(--ease-standard); }
}

/* ============================ z-index ==================================== */
:root {
  --z-base:0; --z-raised:10; --z-sticky:100; --z-header:200; --z-dropdown:300;
  --z-overlay:400; --z-modal:410; --z-toast:500; --z-max:9999;
}

/* ============================ base ======================================= */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body {
  margin:0; font-family:var(--font-sans); font-size:var(--text-base); line-height:var(--leading-body);
  color:var(--color-text); background-color:var(--color-bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6 { margin:0; line-height:var(--leading-heading); font-weight:var(--weight-semibold); }
p { margin:0; }
img,svg,video,canvas { max-inline-size:100%; block-size:auto; }
:where(a,button,input,select,textarea,[tabindex],summary):focus-visible {
  outline:var(--focus-ring-width) solid var(--color-focus-ring); outline-offset:var(--focus-ring-offset); border-radius:var(--radius-xs);
}
:where(a,button,input,select,textarea):focus { outline-color:var(--color-focus-ring); }
::selection { background:var(--color-brand-subtle); color:var(--color-brand-subtle-text); }
.visually-hidden {
  position:absolute !important; inline-size:1px; block-size:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip-link {
  position:absolute; inset-block-start:var(--space-2); inset-inline-start:var(--space-2); z-index:var(--z-max);
  padding:var(--space-2) var(--space-4); background:var(--color-surface); color:var(--color-text);
  border:1px solid var(--color-border-strong); border-radius:var(--radius-md);
  transform:translateY(-200%); transition:transform var(--motion-swap);
}
.skip-link:focus { transform:translateY(0); }
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important; scroll-behavior:auto !important; }
}