/* ============================================================
   Samoum SCF — design tokens
   Copied from the Tzamun design system in Claude Design
   (project cf4c6f60, _ds/tzamun-design-system-9d4cdad7).

   TWO DELIBERATE DEVIATIONS from the source:

   1. Fonts are SELF-HOSTED, not @import'ed from Google. The nginx CSP is
      `font-src 'self'`, so the upstream import would be blocked — and a system
      holding court files should not announce every page view to a third party.
   2. Poppins (the display face) is NOT licensed/installed on this box, so
      --font-display falls back to IBM Plex Sans. Swap it here if the licensed
      files arrive; nothing else references the family directly.
   ============================================================ */

/* ---- self-hosted faces ---- */
@font-face { font-family:'IBM Plex Sans Arabic'; font-weight:400; font-style:normal; font-display:swap;
             src:url('/static/fonts/IBMPlexSansArabic-Regular.ttf') format('truetype'); }
@font-face { font-family:'IBM Plex Sans Arabic'; font-weight:500; font-style:normal; font-display:swap;
             src:url('/static/fonts/IBMPlexSansArabic-Medium.ttf') format('truetype'); }
@font-face { font-family:'IBM Plex Sans Arabic'; font-weight:600; font-style:normal; font-display:swap;
             src:url('/static/fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'IBM Plex Sans Arabic'; font-weight:700; font-style:normal; font-display:swap;
             src:url('/static/fonts/IBMPlexSansArabic-Bold.ttf') format('truetype'); }

@font-face { font-family:'IBM Plex Sans'; font-weight:400; font-style:normal; font-display:swap;
             src:url('/static/fonts/IBMPlexSans-Regular.ttf') format('truetype'); }
@font-face { font-family:'IBM Plex Sans'; font-weight:500; font-style:normal; font-display:swap;
             src:url('/static/fonts/IBMPlexSans-Medium.ttf') format('truetype'); }
@font-face { font-family:'IBM Plex Sans'; font-weight:600; font-style:normal; font-display:swap;
             src:url('/static/fonts/IBMPlexSans-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'IBM Plex Sans'; font-weight:700; font-style:normal; font-display:swap;
             src:url('/static/fonts/IBMPlexSans-Bold.ttf') format('truetype'); }

@font-face { font-family:'IBM Plex Mono'; font-weight:400; font-style:normal; font-display:swap;
             src:url('/static/fonts/IBMPlexMono-Regular.ttf') format('truetype'); }
@font-face { font-family:'IBM Plex Mono'; font-weight:500; font-style:normal; font-display:swap;
             src:url('/static/fonts/IBMPlexMono-Medium.ttf') format('truetype'); }
@font-face { font-family:'IBM Plex Mono'; font-weight:600; font-style:normal; font-display:swap;
             src:url('/static/fonts/IBMPlexMono-SemiBold.ttf') format('truetype'); }

:root {
  /* ---- brand ramps ---- */
  --blue-50:#eaf4fb; --blue-100:#cce4f5; --blue-200:#9ccaec; --blue-300:#5ea8de;
  --blue-400:#2b88cf; --blue-500:#0e70b4; --blue-600:#0c63a0; --blue-700:#0a5184;
  --blue-800:#084068; --blue-900:#07304e;

  --teal-50:#e8f8f2; --teal-100:#c6efe1; --teal-200:#93e1c8; --teal-300:#5fceac;
  --teal-400:#3fbd97; --teal-500:#2fb492; --teal-600:#229a7c; --teal-700:#1a7c64;

  --cyan-500:#00bfe3; --cyan-600:#019fbe;

  --navy-700:#25295a; --navy-800:#1c1f47; --navy-900:#15183c; --navy-950:#0d0f29;

  --slate-25:#fbfcfd; --slate-50:#f5f7f9; --slate-100:#eceff3; --slate-200:#dde2ea;
  --slate-300:#c3ccd8; --slate-400:#95a0b1; --slate-500:#6b7688; --slate-600:#4e5868;
  --slate-700:#3c4250; --slate-800:#2b303b; --slate-900:#1c2028;
  --white:#ffffff;

  --success-500:#2fb492; --success-50:#e8f8f2;
  --warning-500:#e8a33d; --warning-50:#fdf3e3;
  --danger-500:#d8473f;  --danger-50:#fdecea;
  --info-500:#0e70b4;    --info-50:#eaf4fb;

  /* ---- semantic ---- */
  --color-primary:var(--blue-500); --color-primary-hover:var(--blue-600);
  --color-primary-active:var(--blue-700); --color-primary-weak:var(--blue-50);
  --color-secondary:var(--teal-500);

  --text-strong:var(--navy-900); --text-body:var(--slate-700);
  --text-muted:var(--slate-500); --text-subtle:var(--slate-400);
  --text-on-brand:var(--white);  --text-link:var(--blue-500);

  --surface-page:var(--slate-50); --surface-card:var(--white);
  --surface-sunken:var(--slate-100); --surface-inverse:var(--navy-900);

  --border-subtle:var(--slate-200); --border-default:var(--slate-300);
  --border-strong:var(--slate-400); --border-focus:var(--blue-500);
  --ring-focus:0 0 0 3px rgba(14,112,180,.28);

  --gradient-brand:linear-gradient(120deg,var(--blue-500) 0%,var(--teal-500) 100%);

  /* ---- type ---- */
  --font-display:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,sans-serif;
  --font-body:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,sans-serif;
  --font-arabic:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;

  --fs-overline:.75rem; --fs-caption:.8125rem; --fs-sm:.875rem; --fs-base:1rem;
  --fs-md:1.125rem; --fs-lg:1.375rem; --fs-xl:1.75rem; --fs-2xl:2.25rem;

  --lh-tight:1.12; --lh-snug:1.25; --lh-normal:1.5; --lh-relaxed:1.65;
  --ls-tight:-.02em;

  /* ---- space, radii, elevation ---- */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-7:2.5rem; --space-8:3rem;

  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px;
  --radius-2xl:28px; --radius-pill:999px;

  --shadow-xs:0 1px 2px rgba(21,24,60,.06);
  --shadow-sm:0 1px 3px rgba(21,24,60,.08),0 1px 2px rgba(21,24,60,.04);
  --shadow-md:0 4px 12px rgba(21,24,60,.08),0 2px 4px rgba(21,24,60,.05);
  --shadow-lg:0 12px 28px rgba(21,24,60,.12),0 4px 8px rgba(21,24,60,.06);
  --shadow-brand:0 8px 24px rgba(14,112,180,.28);

  --ease-standard:cubic-bezier(.2,0,0,1);
  --dur-fast:120ms; --dur-normal:200ms;

  --container-lg:1120px; --header-height:64px;
}

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  background:#eef1f4;
  font-family:var(--font-arabic);
  color:var(--text-body);
  -webkit-font-smoothing:antialiased;
  font-size:var(--fs-base);
  line-height:var(--lh-normal);
}
a { color:var(--text-link); text-decoration:none; }
a:hover { color:var(--blue-600); }

/* Bilingual toggle — exactly the pattern in the Claude Design source:
   both languages ship in the markup, CSS decides which is visible, so
   switching costs no round trip and no re-render. */
[data-l="en"] { display:none; }
[data-lang="en"] [data-l="en"] { display:inline; }
[data-lang="en"] [data-l="ar"] { display:none; }
[data-lang="en"] { font-family:var(--font-body); }

/* Latin digits and codes stay LTR even inside an RTL paragraph. Without this,
   a reference like D3/p14 or an IBAN renders reversed — the same bidi failure
   class documented for the PDF renderer. */
.ltr { direction:ltr; unicode-bidi:isolate; display:inline-block; }
.mono { font-family:var(--font-mono); direction:ltr; unicode-bidi:isolate; }

.scr::-webkit-scrollbar { width:0; display:none; }

/* ============================================================
   Components
   ============================================================ */
.card {
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
}
.pill {
  padding:3px 10px; border-radius:var(--radius-pill);
  font-size:11px; font-weight:600; white-space:nowrap; display:inline-block;
}
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px; border-radius:var(--radius-md); border:1px solid transparent;
  font-family:inherit; font-size:var(--fs-sm); font-weight:600; cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard);
}
.btn-primary { background:var(--color-primary); color:var(--text-on-brand); }
.btn-primary:hover:not(:disabled) { background:var(--color-primary-hover); }
.btn-primary:disabled { background:var(--slate-300); cursor:not-allowed; }
.btn-ghost { background:transparent; color:var(--text-body); border-color:var(--border-default); }
.btn-ghost:hover { background:var(--slate-100); }

.field {
  width:100%; padding:13px 15px; border:1px solid var(--border-default);
  border-radius:var(--radius-md); font-family:inherit; font-size:var(--fs-base);
  color:var(--text-strong); background:var(--white); outline:none;
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field:focus { border-color:var(--border-focus); box-shadow:var(--ring-focus); }

.label { display:block; font-size:var(--fs-caption); font-weight:600;
         color:var(--text-body); margin-bottom:6px; }

.alert { padding:12px 14px; border-radius:var(--radius-md);
         font-size:var(--fs-sm); font-weight:500; }
.alert-error { background:var(--danger-50); color:#8f2c26; border:1px solid #f3c6c2; }
.alert-info  { background:var(--info-50);   color:var(--blue-800); border:1px solid var(--blue-100); }

/* Hover lift for clickable cards. In CSS, not an onmouseover attribute:
   inline event handlers are blocked by script-src and would silently do
   nothing behind the CSP. */
.card-link { transition:box-shadow var(--dur-fast) var(--ease-standard); }
.card-link:hover { box-shadow:var(--shadow-md); }