/* ==========================================================================
   Mawkeji admin panel — design tokens
   Source of truth: cms/admin/DESIGN.md ("ورشة البازلت" — the basalt workshop).
   Tokens only — no component CSS lives here. Phases 2–6 build screens
   strictly from these custom properties.

   No runtime CDN fonts, ever — Markazi Text is vendored below.
   ========================================================================== */

/* Markazi Text (titles — DESIGN.md §2). Vendored arabic-subset variable
   font, SIL OFL 1.1. Source (fetched 2026-08-01, v28):
   https://fonts.gstatic.com/s/markazitext/v28/syk0-ydym6AtQaiEtX7yhqbVpHWVBVLqUqsY.woff2
   Latin glyphs deliberately fall through to the system stack. */
@font-face {
  font-family: "Markazi Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/markazi-text-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;
}

:root {
  /* ----- Named palette (DESIGN.md §1) — the six ----- */
  --jass: #FAF8F3;      /* جصّ plaster — raised surfaces */
  --hajar: #ECE9E1;     /* حجر limestone — page ground */
  --basalt: #262119;    /* بازلت — ink, primary controls */
  --kahraman: #D6A02F;  /* كهرمان amber — unpublished-changes signal */
  --zinjar: #2F6B5B;    /* زنجار verdigris — live / published */
  --fuwwa: #A33B2E;     /* فوّة madder — failure / destructive */

  /* ----- Derived tones (computed from the six; not part of the named set) ----- */
  --basalt-soft: #5A544A;                      /* secondary ink — 7.0:1 on jass */
  --basalt-hairline: rgb(38 33 25 / 14%);      /* dividers, card borders */
  --basalt-hairline-strong: rgb(38 33 25 / 28%); /* input borders */
  --kahraman-deep: #8A5F10;                    /* amber as text/icon on light — 5.3:1 on jass */
  --kahraman-tint: #F6ECD3;                    /* pending-bar ground */
  --zinjar-meta-on-dark: #CFE5DD;              /* meta text on zinjar — 4.7:1 */
  --fuwwa-meta-on-dark: #F6DDD6;               /* meta text on fuwwa — 5.1:1 */

  /* ----- Semantic surfaces & ink ----- */
  --surface-ground: var(--hajar);
  --surface-raised: var(--jass);
  --surface-inverse: var(--basalt);
  --ink: var(--basalt);
  --ink-soft: var(--basalt-soft);
  --ink-on-inverse: var(--jass);
  --ink-on-signal: #FFFFFF;                    /* on zinjar / fuwwa */

  /* Signals (color is state, never decoration — DESIGN.md §1: no blue) */
  --signal-pending: var(--kahraman);
  --signal-pending-ink: var(--kahraman-deep);
  --signal-live: var(--zinjar);
  --signal-danger: var(--fuwwa);

  /* ----- Type (DESIGN.md §2) ----- */
  --font-ui: system-ui, "Segoe UI", Tahoma, sans-serif;
  --font-display: "Markazi Text", system-ui, "Segoe UI", Tahoma, sans-serif;
  --font-features-price: "tnum" 1, "lnum" 1;   /* the ledger numeral voice */

  --text-body: 1rem;        /* 16px — the floor; nothing renders smaller */
  --text-emphasis: 1.125rem;
  --text-price: 1.125rem;   /* bold + tabular lining */
  --text-title: 1.5rem;     /* Markazi runs compact; titles set generous */
  --text-display: 2rem;     /* wordmark / home greeting only */

  --leading-body: 1.8;      /* running Arabic text */
  --leading-title: 1.4;     /* Arabic ascenders + diacritics */
  --leading-control: 1.5;   /* bar, buttons, single-line labels */

  --weight-regular: 400;    /* two weights only — nothing between */
  --weight-bold: 700;

  /* ----- Spacing (4px base) ----- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* ----- Radii — crisp tool edges (DESIGN.md §3) ----- */
  --radius-control: 0.25rem;  /* 4px — buttons, inputs, chips */
  --radius-surface: 0.5rem;   /* 8px — cards, sheets */
  --radius-pill: 999px;       /* toggle knobs only */

  /* ----- Tap targets & layout ----- */
  --tap-min: 48px;
  --control-height: 3rem;       /* 48px default control */
  --row-min-height: 3.5rem;     /* 56px list rows */
  --bar-min-height: 4rem;       /* 64px publish bar, + safe area */
  --content-measure: 40rem;     /* single-column spine, phone and desktop */
  /* The chrome pieces (header, nav, publish bar) are full-bleed backdrops
     with a centred inner, and that inner carries its own inline padding —
     so capping it at --content-measure put its TEXT --space-4 short of the
     content column's edge, which read as a misalignment on every screen.
     Capping at the measure PLUS that padding lands the text on exactly the
     same spine as .shell-inner. Any chrome piece with a centred inner uses
     this, never --content-measure directly. */
  --spine-outer: calc(40rem + var(--space-4) * 2);
  --safe-block-end: env(safe-area-inset-bottom, 0px);

  /* ----- Elevation — hairlines first; exactly three shadows (DESIGN.md §3):
     bar, sheet, and knob (the last lifts the jass toggle knob off its
     equally-light unchecked hajar track — without it the knob has no edge
     in that state, border-strong alone reads too flat to sell "on/off") --- */
  --hairline: 1px solid var(--basalt-hairline);
  --hairline-strong: 1px solid var(--basalt-hairline-strong);
  --shadow-bar: 0 -2px 12px rgb(38 33 25 / 12%);
  --shadow-sheet: 0 8px 24px rgb(38 33 25 / 18%);
  --shadow-knob: 0 1px 2px rgb(38 33 25 / 25%);

  /* Sheet backdrop scrim — the dimming layer behind the overflow sheet. */
  --scrim: rgb(38 33 25 / 45%);

  /* ----- Focus (visible keyboard focus, DESIGN.md §6) ----- */
  --focus-ring: 2px solid var(--kahraman-deep);
  --focus-ring-on-dark: 2px solid var(--kahraman);
  --focus-ring-offset: 2px;

  /* ----- Motion (DESIGN.md §5) ----- */
  --motion-quick: 120ms;    /* toggles, state flips, focus */
  --motion-settle: 240ms;   /* bar state changes, sheets */
  --motion-course: 900ms;   /* course-laying loop while publishing — only ambient motion */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);

  /* ----- Layers ----- */
  --layer-bar: 10;
  --layer-sheet: 20;

  /* =====================================================================
     Publish bar — السطر / the course (the signature, DESIGN.md §4)
     Each state = bg + ink + meta + course treatment (+ action where one exists).
     Course pattern carries state redundantly with text — never hue alone.
     ===================================================================== */
  --course-size: 4px;

  /* 1. saved-draft — all published; continuous course */
  --publish-saved-bg: var(--jass);
  --publish-saved-ink: var(--basalt);
  --publish-saved-meta: var(--zinjar);
  --publish-saved-course: var(--basalt);

  /* 2. unpublished-changes — dashed course (stones not yet laid) */
  --publish-pending-bg: var(--kahraman-tint);
  --publish-pending-ink: var(--basalt);
  --publish-pending-meta: var(--kahraman-deep);
  --publish-pending-course: var(--kahraman-deep);
  --publish-pending-action-bg: var(--kahraman);
  --publish-pending-action-ink: var(--basalt);

  /* 3. publishing — inverted bar; course animates, segments filling RTL */
  --publish-busy-bg: var(--basalt);
  --publish-busy-ink: var(--jass);
  --publish-busy-meta: var(--kahraman);
  --publish-busy-course: var(--kahraman);

  /* 4. published — transient confirm, settles to saved-draft after ~4s */
  --publish-live-bg: var(--zinjar);
  --publish-live-ink: #FFFFFF;
  --publish-live-meta: var(--zinjar-meta-on-dark);
  --publish-live-course: #FFFFFF;
  /* Revert durability's skipped-images note (Phase 7 Task 2) — reuses
     --kahraman-tint (a warm cream, not the saturated --kahraman itself:
     plain kahraman-on-zinjar measures ~2.6:1, well under AA) as TEXT color
     on the live-bar's zinjar ground: ~5.3:1, verified. Warm/amber-family
     but still clearly distinct from the cool --zinjar-meta-on-dark used for
     the live-link line right above it — color carries the "this is a
     caution, not the main confirmation" distinction; the copy itself
     carries the actual meaning (DESIGN.md §1: color is state, never
     decoration alone). */
  --publish-live-note-ink: var(--kahraman-tint);

  /* 5. failed — named problem + retry; course stops short (terminal gap) */
  --publish-failed-bg: var(--fuwwa);
  --publish-failed-ink: #FFFFFF;
  --publish-failed-meta: var(--fuwwa-meta-on-dark);
  --publish-failed-course: #FFFFFF;
  --publish-failed-action-bg: var(--jass);
  --publish-failed-action-ink: var(--basalt);
}

/* Reduced motion: states stay fully readable as text + pattern + color;
   the publishing course holds a static half-laid pattern (DESIGN.md §4.3). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-quick: 0ms;
    --motion-settle: 0ms;
    --motion-course: 0ms;
  }
}