/*
  Chrome shared by the three legal documents (docs/64_LEGAL_PAGES.md §3).

  index.html stays a single self-contained file — that rule is about the
  landing page, which has no build step and whose one file is one deploy.
  Three sibling documents with identical chrome are not that case.

  Tokens below are COPIED from index.html :root, not imported. Same discipline
  as scripts/build-og-image.mjs: the vitrine has no build step to resolve an
  import through. If you change a colour there, change it here.

  Logical properties throughout (padding-inline, margin-block, text-align:
  start) even though these pages are French and LTR — the project rule is
  logical CSS everywhere, and an Arabic translation should need no CSS work.
*/

:root {
  --ink: #16262A;
  --muted: #56696B;
  --paper: #F4F8F6;
  --card: #FFFFFF;
  --edge: #D9E4DF;
  --deep: #0C3937;
  --deep-2: #0A2E2C;
  --on-deep: #EAF3EF;
  --on-deep-muted: #9DBDB4;
  --accent: #0F766E;
  --dirham: #E8A33D;
  --display: 'Alexandria', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --body: 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
}

@font-face {
  font-family: 'Alexandria'; font-weight: 100 900; font-display: swap;
  src: url('/fonts/alexandria-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0152-0153, U+2000-206F;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic'; font-weight: 400; font-display: swap;
  src: url('/fonts/plex-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0152-0153, U+2000-206F;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic'; font-weight: 700; font-display: swap;
  src: url('/fonts/plex-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0152-0153, U+2000-206F;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 46rem; margin-inline: auto; padding-inline: 1.25rem; }

a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--dirham); outline-offset: 2px; }

/* ---------- masthead ---------- */

.top {
  background: var(--deep);
  background-image: linear-gradient(160deg, var(--deep) 0%, var(--deep-2) 100%);
  color: var(--on-deep);
  padding-block: 1.1rem;
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  color: var(--on-deep); text-decoration: none; letter-spacing: -0.01em;
}
.brand span { color: var(--dirham); }
.top nav { display: flex; gap: 1rem; font-size: .875rem; }
.top nav a { color: var(--on-deep-muted); text-decoration: none; }
.top nav a:hover { color: var(--on-deep); text-decoration: underline; }

/* ---------- document ---------- */

main { padding-block: 2.5rem 3.5rem; }

.doc {
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: 14px;
  padding: 1.75rem 1.5rem 2rem;
}

h1 {
  font-family: var(--display); font-weight: 700; line-height: 1.2;
  font-size: 1.75rem; letter-spacing: -0.02em; text-wrap: balance;
}
.updated {
  color: var(--muted); font-size: .8125rem;
  margin-block-start: .5rem; padding-block-end: 1.25rem;
  border-block-end: 1px solid var(--edge);
}

h2 {
  font-family: var(--display); font-weight: 600; font-size: 1.125rem;
  line-height: 1.35; margin-block: 2rem .625rem;
}
h2:first-of-type { margin-block-start: 1.5rem; }
h3 { font-family: var(--display); font-weight: 600; font-size: .9375rem; margin-block: 1.25rem .375rem; }

p, li { font-size: .9375rem; }
p + p { margin-block-start: .75rem; }

ul, ol { margin-block: .625rem; padding-inline-start: 1.25rem; }
li + li { margin-block-start: .375rem; }

/* Reader-facing summary above a dense section. Not a substitute for the
   section — a plain-language lead-in, which is what "clear and accessible"
   in law 09-08 actually asks for. */
.lede {
  background: var(--paper);
  border-inline-start: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  padding: .875rem 1rem;
  margin-block: 1rem;
  font-size: .9375rem;
}
.lede strong { font-weight: 600; }

/* The identity block. Replaced wholesale when the company is registered —
   docs/64_LEGAL_PAGES.md §4. */
.identity {
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: 10px;
  padding: 1rem 1.125rem;
  margin-block: 1rem;
  font-size: .9375rem;
}
.identity dt { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.identity dd { margin-block: .125rem .75rem; }
.identity dd:last-child { margin-block-end: 0; }

.table-scroll { overflow-x: auto; margin-block: 1rem; }
table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: .875rem; }
th, td { text-align: start; padding: .625rem .75rem; border-block-end: 1px solid var(--edge); vertical-align: top; }
th { font-weight: 600; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }

/* ---------- footer ---------- */

footer {
  border-block-start: 1px solid var(--edge);
  padding-block: 1.5rem 2.5rem;
  color: var(--muted); font-size: .8125rem;
}
footer .wrap { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: 1rem; }

@media (max-width: 30rem) {
  h1 { font-size: 1.4rem; }
  .doc { padding: 1.25rem 1.125rem 1.5rem; border-radius: 12px; }
  .top nav { display: none; }
}