/* entry.fit: DESIGN.md's tokens (src/theme/tokens.ts), light and dark following the device (§2.5).
   No shadow, no gradient, no motion (§1, §8). Sizes in rem so the reader's text size setting scales them (§3).
   tests/unit/website.test.mts holds this file to the tokens. */

@font-face {
  font-family: "DM Sans";
  src: url(/assets/fonts/DMSans-Regular.ttf) format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url(/assets/fonts/DMSans-SemiBold.ttf) format("truetype");
  font-weight: 600;
  font-display: swap;
}
/* Tajawal has no SemiBold: its Bold stands in for 600 (DESIGN.md §3). */
@font-face {
  font-family: "Tajawal";
  src: url(/assets/fonts/Tajawal-Regular.ttf) format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Tajawal";
  src: url(/assets/fonts/Tajawal-Bold.ttf) format("truetype");
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --ground: #F6F6F6;
  --surface: #FFFFFF;
  --line: #DEDEDE;
  --text: #232121;
  --text-muted: #5C5A5A;
  --action: #19443B;
  --action-press: #13332C;
  --on-action: #FFFFFF;
  --warning: #9A4D00;
  --logo-mark: #19443B;
  --logo-teal: #438782;
  --logo-dot: #C9A81B;
  --action-weak: rgba(67, 135, 130, 0.12);
  --selection: rgba(67, 135, 130, 0.30);
}

/* Dark: the same roles mapped for charcoal (§2.5); the logo is the brand's reversed one, white with the gold dot. */
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #232121;
    --surface: #302E2E;
    --line: #4F4D4D;
    --text: #FFFFFF;
    --text-muted: #B0AFAF;
    --action: #85B1AE;
    --action-press: #A4C5C2;
    --on-action: #232121;
    --warning: #F9A03F;
    --logo-mark: #FFFFFF;
    --logo-teal: #FFFFFF;
    --logo-dot: #C9A81B;
    --selection: rgba(133, 177, 174, 0.30);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  overflow-wrap: break-word;
}

/* DM Sans sets Latin and Tajawal sets Arabic, each page in its language's family; text in the other script follows
   its own (§3): the language switch, and Arabic letters on an English page. */
html[lang="en"] body,
[lang="en"] {
  font-family: "DM Sans", "Tajawal", system-ui, sans-serif;
}
html[lang="ar"] body,
[lang="ar"] {
  font-family: "Tajawal", system-ui, sans-serif;
}

::selection {
  background: var(--selection);
}

a {
  color: var(--action);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
a:active {
  color: var(--action-press);
}
a:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
  border-radius: 6px;
}

/* One column, 16px from the edge (§4). */
.wrap {
  max-width: 40rem;
  margin: 0 auto;
  padding-inline: 1rem;
}

.skip {
  position: absolute;
  inset-inline-start: 1rem;
  top: -4rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.skip:focus {
  top: 0.5rem;
}

/* The header: the logo at the start, the language switch at the end; neutral chrome (§1). */
.site-header {
  border-bottom: 1px solid var(--line);
}
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
}
.brand {
  display: inline-flex;
  padding: 0.5rem 0;
}
.logo {
  display: block;
  height: 2rem;
  width: auto;
}
.logo-teal {
  fill: var(--logo-teal);
}
.logo-mark {
  fill: var(--logo-mark);
}
.logo-dot {
  fill: var(--logo-dot);
}
.switch {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

main {
  padding-block: 2rem 3rem;
}

h1,
h2,
h3 {
  font-weight: 600;
  margin: 0;
}
h1 {
  font-size: 1.75rem;
  line-height: 2rem;
}
h2 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  margin-top: 2rem;
}
h3 {
  font-size: 1rem;
  line-height: 1.5rem;
  margin-top: 1.5rem;
}
/* Arabic needs more line height than Latin at the same size (§6). */
html[lang="ar"] h1 {
  line-height: 2.5rem;
}

p,
ul {
  margin: 1rem 0 0;
}
ul {
  padding-inline-start: 1.5rem;
}
li + li {
  margin-top: 0.5rem;
}

/* Home */
.lead {
  color: var(--text-muted);
}
.cta {
  margin-top: 1.5rem;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  background: var(--action);
  color: var(--on-action);
  font-weight: 600;
  text-decoration: none;
}
.button:active {
  background: var(--action-press);
  color: var(--on-action);
}

/* Rows: §7's Settings row, in a card (§5): a title, a caption beneath, a chevron at the end, mirrored in RTL. */
.rows {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.rows li + li {
  margin-top: 0;
  border-top: 1px solid var(--line);
}
.row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  color: var(--text);
  text-decoration: none;
}
.row:active {
  background: var(--action-weak);
  color: var(--text);
}
.row-text {
  flex: 1;
  min-width: 0;
}
.row-title,
.row-note {
  display: block;
}
.row-note {
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.125rem;
}
.chevron {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[dir="rtl"] .chevron {
  transform: scaleX(-1);
}

/* The privacy policy and the terms */
.meta {
  margin-top: 0.5rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.125rem;
}
.notice {
  margin-top: 1.5rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.notice p {
  margin: 0;
}
.notice strong {
  color: var(--warning);
}

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 1.5rem 2rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.125rem;
}
.site-footer p {
  margin: 0;
}
.site-footer p + p {
  margin-top: 0.5rem;
}