/* ═══════════════════════════════════════════════════════════════════════════
   أجما مول — design tokens

   THE DIRECTION, and why it is not the default.

   The obvious answer for "gold on dark, Arabic, enterprise" is a near-black
   dashboard with one bright accent and hairline rules. That is two of the three
   looks AI design currently defaults to, and this client rejects templated work
   on sight — two of his three sites are v0.dev output and he has been buying
   that class of artifact for a month.

   So the direction comes from the subject's own world instead. Procurement's
   real artifacts are DOCUMENTS: the عرض سعر with its letterhead and stamp,
   the جدول الكميات, the commercial-registration certificate, the tax invoice.

   → The chrome is dark warm ink. The content is PAPER.
     Most of the screen is a light document sheet floating on a dark desk.
     The machine is dark; what the machine produces is paperwork.

   That is the thesis, and it is also literally what the product does: an AI
   that turns a sentence into procurement paperwork.

   The gold is not a taste choice — it is the ONE identity element all three of
   his sites agree on while their primaries disagree (copper #C17817 / teal
   #005951 / yellow #FFCC00). Extracted from the SVG gradient stops and the
   served <link rel="mask-icon">.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Tajawal';
  src: url('../assets/tajawal-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+0020-007F, U+2000-206F;
}
@font-face {
  font-family: 'Tajawal';
  src: url('../assets/tajawal-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Tajawal';
  src: url('../assets/tajawal-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Amiri is 108 KB and DISPLAY ONLY — document titles and the brief statement.
   It must never be on the LCP element.

   `font-display: optional`, NOT `swap`. Under slow 3G those 108 KB land ~9 s in,
   and swapping the face at that point reflowed every `.doc__title` — which moved
   the whole document below it. Measured: two layout shifts totalling 0.074 of a
   0.100 CLS budget, i.e. three quarters of the budget spent on a font arriving
   late. `optional` uses the fallback for that page load rather than shifting, and
   serves Amiri from cache on every subsequent view.

   `size-adjust` and the metric overrides keep the fallback close enough to Amiri
   that the cached-vs-uncached difference is not jarring. */
@font-face {
  font-family: 'Amiri';
  src: url('../assets/amiri-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: optional;
}

:root {
  /* ── Palette ─────────────────────────────────────────────────────────────
     Six values. The ground is warm ink, NOT navy and NOT pure black — against
     a cold black his metallic gold reads like a crypto dashboard; against warm
     ink it reads like brass on stone, which is the register we want. */
  --ink:        #16130F;   /* chrome ground */
  --ink-2:      #221D17;   /* raised chrome */
  --ink-3:      #2E2820;   /* chrome border */
  --ink-text:   #E8E0D2;   /* text on chrome */
  --ink-dim:    #9C9284;   /* secondary text on chrome */

  --paper:      #F7F3EA;   /* the document surface */
  --paper-2:    #EFE9DB;   /* document wash / zebra */
  --paper-rule: #D9CFB9;   /* document rules */
  --paper-text: #1A1712;   /* text on paper */
  --paper-dim:  #6B6153;   /* secondary text on paper */

  /* His logo ramp, all three stops. --gold is from the served
     <link rel="mask-icon" color="#b88b2e"> on agmags + agmaindustry — it is NOT
     in the SVG gradient, so an SVG-only extraction misses it. */
  --gold-deep:  #906833;
  --gold:       #B88B2E;
  --gold-lit:   #E9D074;

  /* One functional colour, deliberately desaturated so it never competes with
     the gold. Used for over-budget and the 15-day delivery constraint. */
  --flag:       #9C4A33;
  --flag-soft:  #C9705A;

  /* Positive state is not green — a green tick in a gold identity is the
     generic dashboard reflex. Confirmation is carried by the gold itself. */
  --ok:         var(--gold-deep);

  /* ── Type ────────────────────────────────────────────────────────────────
     Amiri (naskh serif) for documents · Tajawal (geometric sans) for interface
     and data. A real pairing, not one family at four weights. Tajawal holds at
     12px, which the dense comparison table needs; Amiri never goes below 20px. */
  --font-doc:  'Amiri', 'Times New Roman', serif;
  --font-ui:   'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* 1.25 scale, anchored at 15px. Product UI, so fixed steps — no fluid type. */
  --t-xs:   11px;
  --t-sm:   13px;
  --t-base: 15px;
  --t-md:   18px;
  --t-lg:   23px;
  --t-xl:   29px;
  --t-2xl:  37px;
  --t-3xl:  46px;

  /* Arabic needs more leading than Latin at the same size. */
  --lh-tight: 1.35;
  --lh-body:  1.75;

  /* ── Space ───────────────────────────────────────────────────────────────
     4px base. Line-height is the spacing unit for vertical rhythm. */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* ── Form ────────────────────────────────────────────────────────────────
     Paper does not have rounded corners. Chrome barely does. */
  --r-doc:  2px;
  --r-ui:   4px;
  --r-pill: 999px;

  --rail-w: 88px;
  --shadow-doc: 0 1px 2px rgba(0,0,0,.30), 0 12px 32px -8px rgba(0,0,0,.55);

  --ease: cubic-bezier(.22,.61,.36,1);

  /* Motion. Two curves, three durations — a small vocabulary, used consistently, because a
     page where every element eases differently reads as assembled rather than designed.
     `--ease` is for UI state (hover, focus, colour). `--ease-paper` has a touch of overshoot
     and is for things that ARRIVE: a document landing, a row being laid down, a seal. */
  --ease-paper: cubic-bezier(.2,.8,.25,1);
  --d-fast: 130ms;
  --d-base: 260ms;
  --d-slow: 420ms;
}

/* The viewer's theme toggle must not invert a design whose whole thesis is
   dark-chrome-around-light-paper. The paper IS the light mode. */
:root { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--ink);
  color: var(--ink-text);
  font-family: var(--font-ui);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Tabular figures everywhere numbers are compared down a column. Without this,
   a price column in Tajawal does not align and the table reads as amateur. */
.num, td.num, .money, input[type=number] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Latin/numeric runs inside Arabic text scramble without isolation. Phone
   numbers, CR numbers, currency and IDs all need it. */
bdi, .iso { unicode-bidi: isolate; }

/* Quality floor, not announced. */
:focus-visible {
  outline: 2px solid var(--gold-lit);
  outline-offset: 2px;
  border-radius: var(--r-ui);
}
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

::selection { background: var(--gold); color: var(--ink); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--ink-3); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }