/* base.css: Cairo, the site scale, reset, focus, and the Blocks mark (site blocks are in site.css).
   Colours, spacing, radii and shadows come from tokens.css (the design language); component
   classes (cpd-*) are in components.css. No inline styles anywhere: dynamic values use the CSSOM. */

/* ---- Cairo (the only font; 400 and 700 as in the kit; self-hosted WOFF2) ---- */
@font-face {
  font-family: Cairo;
  src: url("/assets/fonts/Cairo-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Cairo;
  src: url("/assets/fonts/Cairo-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Site scale ----
   The design language is phone-first (14px body, 44px targets). Senior staff use this site on
   desktops and iPads, so the site keeps the kit's style names and lifts the floor to SPEC §6.2 and
   03 §8.1: 17px body, nothing under 14px, 48px targets, 52px full-width actions. */
:root {
  --target-min: 48px;
  --field-min: 48px;
  --button-min: 52px;

  --type-page-title-size: 1.75rem;
  --type-sheet-title-size: 1.25rem;
  --type-section-title-size: 1.375rem;
  --type-greeting-size: 2rem;
  --type-card-title-size: 1.125rem;
  --type-body-size: 1.0625rem;
  --type-body-line: 1.75;
  --type-article-size: 1.0625rem;
  --type-row-label-size: 1.0625rem;
  --type-field-label-size: .9375rem;
  --type-caption-size: .9375rem;
  --type-button-size: 1.0625rem;
  --type-chip-size: .9375rem;
  --type-badge-size: .875rem;
  --type-nav-label-size: .875rem;

  /* Layout (03 §3) */
  --ts-masthead-h: 64px;
  --ts-nav-w: 248px;
  --ts-rail-w: 96px;
  --ts-tabbar-h: 70px;
  --ts-content-max: 1120px;
  --ts-pad: 32px;
  --ts-page-bottom: 96px;

  /* The Blocks mark in design-language colours: tiles ink, arch gold-deep (light) / gold (dark). */
  --mark-tile: var(--ink);
  --mark-arch: var(--gold-deep);
}
:root[data-theme="dark"], :root[data-theme="high-contrast-dark"] { --mark-arch: var(--gold); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]), :root[data-theme="auto"] { --mark-arch: var(--gold); }
}
@media (max-width: 1279px) { :root { --ts-nav-w: 216px; --ts-pad: 24px; } }
@media (max-width: 1023px) { :root { --ts-pad: 24px; } }
@media (max-width: 699px) {
  :root {
    --ts-masthead-h: 56px;
    --ts-pad: 16px;
    --type-page-title-size: 1.25rem;
    --type-greeting-size: 1.5rem;
    --type-section-title-size: 1.25rem;
  }
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--paper);
  color: var(--ink);
}
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
}
:root[lang="en"] body { line-height: 1.6; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.45; }
p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
img, video { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: normal; }
button { cursor: pointer; }
a { color: var(--gold-deep); text-underline-offset: 3px; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
bdi { unicode-bidi: isolate; }
time, .ts-num { font-variant-numeric: tabular-nums; }
::selection { background: var(--gold-tint); color: var(--ink); }

/* Focus: a solid 3px gold-deep ring offset 3px on every interactive element (kit rule). */
:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
[tabindex="-1"]:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
}

.ts-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Brand: the Blocks mark and the talsa.me wordmark ---- */
.ts-mark { display: block; flex: none; }
.ts-mark__tile { fill: var(--mark-tile); }
.ts-mark__arch { fill: var(--mark-arch); }
.ts-wordmark {
  direction: ltr;
  unicode-bidi: isolate;
  font-weight: 700;
  letter-spacing: -.01em; /* Latin wordmark only; never on Arabic */
  line-height: 1;
}
.ts-lockup {
  display: inline-flex;
  align-items: center;
  gap: 16px; /* half the mark width (03 §2) */
  min-height: var(--target-min);
  color: var(--ink);
  text-decoration: none;
  font-size: 1.625rem;
  border-radius: var(--radius-button);
}
.ts-lockup:hover .ts-wordmark { color: var(--gold-deep); }