/* ROOZ's public pages (Docs/REPOSITORY.md § The public pages), in the app's own design: its firouzeh colours, light and
   dark (Docs/PALETTE.md § Exact values); its type — Persian in Vazirmatn, English in the system face, at the app's scale
   (Docs/TYPOGRAPHY.md; ShamsiUI Tokens.swift); its spacing, radii and card surface (Tokens.swift, SurfacePalette.swift).
   No script, no request to anyone else. */

@font-face {
  font-family: Vazirmatn; font-weight: 400; font-display: swap;
  src: url("fonts/Vazirmatn-Regular.ttf") format("truetype");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+00AB, U+00BB;
}
@font-face {
  font-family: Vazirmatn; font-weight: 500; font-display: swap;
  src: url("fonts/Vazirmatn-Medium.ttf") format("truetype");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+00AB, U+00BB;
}
@font-face {
  font-family: Vazirmatn; font-weight: 700; font-display: swap;
  src: url("fonts/Vazirmatn-Bold.ttf") format("truetype");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+00AB, U+00BB;
}
@font-face {
  font-family: Vazirmatn; font-weight: 800; font-display: swap;
  src: url("fonts/Vazirmatn-ExtraBold.ttf") format("truetype");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+00AB, U+00BB;
}

:root {
  color-scheme: light dark;
  --ground: #F8F5F1;
  --card: #FFFEFD;
  --field: #056374;
  --field-chip: #2D7C8A;
  --on-field: #EEF9FC;
  --ink: #1E1A16;
  --ink-secondary: #5F5A55;
  --accent-text: #005768;
  --line: #E5E2DF;
  --card-shadow: 0 1px 2px rgba(40, 30, 20, 0.05), 0 8px 24px rgba(40, 30, 20, 0.06);
  --card-edge: transparent;
  --draft: #FFBFAE;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0E0C0B;
    --card: #1C1917;
    --field: #004653;
    --field-chip: #24606B;
    --on-field: #E7F5F8;
    --ink: #F0EEEB;
    --ink-secondary: #B1ADA8;
    --accent-text: #74CDE2;
    --line: #2E2B28;
    --card-shadow: none;
    --card-edge: rgba(255, 255, 255, 0.05);
    --draft: #FAB8A8;
  }
}
@media (prefers-contrast: more) {
  :root { --card-edge: var(--line); }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* English in the system face at 17, Persian in Vazirmatn at 15 — the app's body sizes. Vazirmatn comes first in both
   stacks, limited to the Arabic script, so every Persian word is drawn in it and every Latin one in the system face. */
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.5 Vazirmatn, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
}
html[lang="fa"] body { font-size: 15px; line-height: 1.9; }

a { color: var(--accent-text); text-underline-offset: 0.2em; }
.address { direction: ltr; unicode-bidi: isolate; }

/* The field: the app's header colour, its bottom corners the compact header's 28. */
.band { background: var(--field); color: var(--on-field); border-radius: 0 0 28px 28px; }
.band-inner, main, footer { max-width: 680px; margin: 0 auto; padding-inline: 16px; }
.band-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px; }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-size: 19px; font-weight: 800; }
.brand img { width: 36px; height: 36px; border-radius: 8px; }
.chip {
  background: var(--field-chip);
  color: var(--on-field);
  border-radius: 18px;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

/* A screen's title on the paper, then cards — 24 between sections, 12 between cards, 16 inside. */
main { padding-block: 24px 8px; }
.title h1 { margin: 0; font-size: 34px; line-height: 1.15; font-weight: 800; }
html[lang="fa"] .title h1 { line-height: 1.6; }
.updated { margin: 6px 0 0; font-size: 13px; font-weight: 500; color: var(--ink-secondary); }
.lead { margin: 8px 0 0; color: var(--ink-secondary); }

.card {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 22px;
  box-shadow: var(--card-shadow);
  padding: 16px;
  margin-top: 12px;
}
.title + .card { margin-top: 24px; }
.card h2, .card h3 { margin: 0 0 4px; font-size: 17px; line-height: 1.35; font-weight: 600; }
html[lang="fa"] .card h2, html[lang="fa"] .card h3 { font-size: 16px; line-height: 1.7; font-weight: 700; }
.card p, .card ul { margin: 6px 0 0; }
.card > :first-child { margin-top: 0; }
.card ul { padding-inline-start: 20px; }
.card li + li { margin-top: 6px; }
.rows > * + *, .card h2 + .rows { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
section[id] { scroll-margin-top: 16px; }

footer { padding-block: 24px 40px; font-size: 13px; font-weight: 500; line-height: 1.7; color: var(--ink-secondary); }
footer a { color: inherit; }

.draft { background: var(--draft); color: #1E1A16; text-align: center; font-size: 13px; font-weight: 700; padding: 8px 16px; }
mark { background: var(--draft); color: #1E1A16; padding: 0 0.2em; }