/* ============================================================================
   Watheeq Deal Room — design tokens
   Source: Watheeq Design System Workbench v0.8 → 02_TOKENS/tokens.provisional.v0.8.css

   Core values are reproduced verbatim from the design system. Where the Deal
   Room needs a token the workbench does not yet define, it is declared in the
   "Deal Room semantic layer" block at the bottom and composed from workbench
   values — never by inventing a new colour.

   Font binaries are not distributed with the design-system ZIP. The five
   IBM Plex Sans Arabic weights in ../fonts/ are the licensed copies already in
   use by the Watheeq NDA application.
   ========================================================================== */

/* ─── TYPEFACE ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ─── WORKBENCH TOKENS (verbatim) ────────────────────────────────────────── */

:root {
  --wq-font-primary: "IBM Plex Sans Arabic", system-ui, sans-serif;

  /* Core brand anchors — OBSERVED from supplied logo assets. */
  --wq-blue-500: #293D7C;
  --wq-gold-500: #CAB599;

  /* Neutrals carry most large surfaces. The warm/cool mix keeps outputs from
     reading as beige luxury while staying compatible with blue and gold. */
  --wq-white: #FFFFFF;
  --wq-ivory: #F8F6F1;
  --wq-sand: #EEE9E0;
  --wq-mist: #EEF1F5;
  --wq-line: #D8D6D0;
  --wq-slate: #68707D;
  --wq-ink: #202733;
  --wq-charcoal: #151B24;

  /* Contextual accent candidates. Design-system rule: at most one accent
     family per screen unless the output is a genuine multi-series chart. */
  --wq-mineral: #2F6F73;
  --wq-sage: #728372;
  --wq-clay: #A56E50;
  --wq-steel: #667F99;
  --wq-plum: #725F78;

  /* Semantic colours are functional and must not be replaced by blue or gold
     for the sake of branding. */
  --wq-success: #2F765B;
  --wq-warning: #91692F;
  --wq-danger: #A44D4A;
  --wq-info: #426A8C;

  --wq-space-1: 4px;
  --wq-space-2: 8px;
  --wq-space-3: 12px;
  --wq-space-4: 16px;
  --wq-space-5: 20px;
  --wq-space-6: 24px;
  --wq-space-8: 32px;
  --wq-space-10: 40px;
  --wq-space-12: 48px;
  --wq-space-16: 64px;
  --wq-space-20: 80px;

  --wq-radius-sm: 4px;
  --wq-radius-md: 8px;
  --wq-radius-lg: 12px;

  --wq-control-compact: 32px;
  --wq-control-standard: 40px;
  --wq-control-comfortable: 48px;

  --wq-shadow-low: 0 4px 16px rgba(21, 27, 36, .08);
  --wq-shadow-overlay: 0 12px 36px rgba(21, 27, 36, .14);

  /* Component contracts */
  --wq-control-radius: 8px;
  --wq-control-border: 1px;
  --wq-focus-ring-width: 3px;
  --wq-button-padding-inline-standard: 18px;
  --wq-button-icon-gap: 8px;
  --wq-icon-button-standard: 40px;
  --wq-icon-button-icon-standard: 20px;
}

/* ─── TYPE SCALE ─────────────────────────────────────────────────────────── */
/* Workbench digital semantic scale. Weight and scale create hierarchy before
   colour is reached for. */

:root {
  --wq-display-size: 40px;   --wq-display-line: 52px;
  --wq-h1-size: 32px;        --wq-h1-line: 42px;
  --wq-h2-size: 24px;        --wq-h2-line: 34px;
  --wq-h3-size: 20px;        --wq-h3-line: 30px;
  --wq-title-size: 18px;     --wq-title-line: 28px;
  --wq-body-l-size: 16px;    --wq-body-l-line: 26px;
  --wq-body-size: 14px;      --wq-body-line: 22px;
  --wq-body-s-size: 12px;    --wq-body-s-line: 19px;
  --wq-caption-size: 11px;   --wq-caption-line: 17px;

  --wq-weight-regular: 400;
  --wq-weight-medium: 500;
  --wq-weight-semibold: 600;
  --wq-weight-bold: 700;
}

/* ─── DEAL ROOM SEMANTIC LAYER ───────────────────────────────────────────── */
/* Composed from workbench values only. If a Deal Room need cannot be expressed
   here without a new raw colour, that is a design-system question, not a
   licence to invent one locally. */

:root {
  --dr-page-bg: var(--wq-ivory);
  --dr-surface: var(--wq-white);
  --dr-surface-quiet: var(--wq-mist);
  --dr-border: var(--wq-line);

  --dr-text: var(--wq-ink);
  --dr-text-quiet: var(--wq-slate);
  --dr-text-strong: var(--wq-charcoal);

  --dr-accent: var(--wq-blue-500);
  /* Gold is an accent, never a surface. Design-system rule: blue and gold
     establish recognition and must not occupy every surface at once. */
  --dr-accent-premium: var(--wq-gold-500);

  --dr-focus-ring: 0 0 0 var(--wq-focus-ring-width) rgba(41, 61, 124, .28);

  /* The four approved requirement statuses. Evidence availability is derived
     from attached visible files and is deliberately NOT a status of its own. */
  --dr-status-pending: var(--wq-slate);
  --dr-status-partial: var(--wq-warning);
  --dr-status-complete: var(--wq-success);
  --dr-status-na: var(--wq-steel);

  /* The internal band. Internal notes and internal ownership are visually
     distinct everywhere they appear, so that a leak into the investor view
     would be obvious at a glance rather than discovered by an investor. */
  --dr-internal-bg: #FBF7EF;
  --dr-internal-border: var(--wq-gold-500);

  --dr-max-width: 880px;
  --dr-max-width-admin: 1180px;
}