/* Diwanclass | ديوان كلاس — brand tokens (Brand Guidelines v1.0, 19 Oct 2026).
   Palette (proportions: Cream 50% · Ink 25% · Sun 15% · Sky 10%):
     Cream #E8E4DB  background and reading areas
     Ink   #252422  logo, text, dark sections
     Sun   #F8CA43  bold colour field — dark (Ink) text only
     Sky   #94B5C4  calm colour field — dark (Ink) text only
   Contrast: Ink/Cream 12.22 · Ink/Sun 9.98 · Ink/Sky 7.14. Never use Sun or Sky as text or logo colour on Cream (1.22 / 1.71),
   and never place Sun and Sky together (1.40).
   Type: IBM Plex Sans Arabic (Arabic first, RTL). Spacing units: 8 16 24 32 48 64. No emblems or decorative shapes:
   pages are built from type, colour fields and thin rules. */
:root {
  /* approved palette */
  --cream: #E8E4DB;
  --ink: #252422;
  --sun: #F8CA43;
  --sky: #94B5C4;

  /* neutrals used by the brand book's own layouts (tints of Cream / Ink) */
  --paper: #F3F0E9;          /* raised reading surfaces */
  --cream-deep: #DAD6CB;     /* tracks, hover, table headers */
  --line: #C2C0BA;           /* thin rules */
  --mute: #7D7A75;           /* control borders (3.8:1 on Paper) */
  --line-strong: var(--mute);
  --ink-2: #5C5A56;          /* secondary text, 5.5:1 on Cream */
  --on-ink-2: #C9C5BB;       /* secondary text on Ink, 9:1 */

  /* status — functional colours kept muted; meaning is also carried by text, not colour alone */
  --ok: #2F5233;     --ok-soft: #DCE5D6;
  --danger: #8F2A16; --danger-soft: #EFD9D0;
  --warn: var(--ink); --warn-soft: var(--sun);

  /* layout */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px;
  --radius-s: 4px; --radius-m: 8px;
  --measure: 70ch;
  --focus: 0 0 0 2px var(--cream), 0 0 0 4px var(--ink);

  --font: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.7;
  color: var(--ink); background: var(--cream);
}
html[lang="ar"] body { line-height: 1.8; font-size: 17px; }

/* ---------- Logo (the wordmark is the logo: Arabic name + DIWANCLASS; never restyle, stretch or recolour) ---------- */
.wordmark { display: block; width: 240px; max-width: 100%; height: auto; aspect-ratio: 1369 / 417; } /* 240px = digital minimum */
.lockup { display: flex; align-items: center; gap: var(--s3); text-decoration: none; color: inherit; flex-wrap: wrap; }
/* The product name is set in the identity typeface beside the parent wordmark; it never gets its own logo. */
.product { display: grid; gap: 2px; padding-inline-start: var(--s3); border-inline-start: 1px solid currentColor; line-height: 1.35; }
.product b { font-size: 1.05rem; font-weight: 700; }
.product span { font-size: .82rem; opacity: .85; letter-spacing: .02em; }
html[lang="ar"] .product span { letter-spacing: 0; }
@media (max-width: 560px) { .product { border-inline-start: 0; padding-inline-start: 0; } }