/*
 * base.css: layer order, fonts, theme-independent tokens, a minimal reset,
 * base typography, user display settings and utilities.
 * Colours are never set here except for the high-contrast override; every
 * colour comes from the active theme's tokens.css.
 *
 * Contents: 1 layers  2 fonts  3 tokens  4 reset  5 base  6 settings  7 utilities
 * Layer order: reset, tokens, theme (tokens.css of the active theme), settings,
 * base, components, app, utilities.
 */

/* 1. Layer order, declared once: later layers win regardless of specificity. */
@layer reset, tokens, theme, settings, base, components, app, utilities;

/* 2. Fonts: IBM Plex Sans Arabic (SIL OFL 1.1) covers Arabic and Latin, self-hosted. */
@font-face {
  font-family: "Plex Arabic";
  src: url("../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Plex Arabic";
  src: url("../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Plex Arabic";
  src: url("../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plex Arabic";
  src: url("../fonts/ibm-plex-sans-arabic-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 3. Theme-independent tokens: type scale (1.2 ratio), spacing, radii, layers. */
@layer tokens {
  :root {
    color-scheme: light dark;
    --font-sans: "Plex Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --text-sm: 0.875rem;
    --text-0: 1rem;
    --text-1: 1.2rem;
    --text-2: clamp(1.35rem, 1.2rem + 0.6vw, 1.6rem);
    --text-3: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
    --text-4: clamp(1.9rem, 1.4rem + 2vw, 2.9rem);
    --leading: 1.6;
    --leading-tight: 1.25;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --radius-1: 0.25rem;
    --radius-2: 0.5rem;
    --page-max: 75rem;
    --measure: 68ch;
    --tap: 2.75rem;
    --z-sticky: 200;
    --z-modal: 300;
    --z-toast: 400;
  }
}

/* 4. Reset: normalise what differs, then stop. */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { margin: 0; }
  img, svg, video, canvas { display: block; max-inline-size: 100%; block-size: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  h1, h2, h3, h4, p, li, dd { overflow-wrap: break-word; }
  :where(ul, ol)[role="list"], :where(ul, ol)[class] { padding: 0; margin: 0; list-style: none; }
  table { border-collapse: collapse; }
}

/* 5. Base typography and links. */
@layer base {
  html { scroll-padding-block-start: 6rem; }
  body {
    min-block-size: 100vh;
    min-block-size: 100dvh;
    font-family: var(--font-sans);
    font-size: var(--text-0);
    line-height: var(--leading);
    color: var(--color-text);
    background: var(--color-page);
    display: flex;
    flex-direction: column;
  }
  h1, h2, h3, h4 { line-height: var(--leading-tight); font-weight: 600; margin-block: 0 var(--space-3); text-wrap: balance; }
  h1 { font-size: var(--text-3); }
  h2 { font-size: var(--text-2); }
  h3 { font-size: var(--text-1); }
  p { margin-block: 0 var(--space-4); max-inline-size: var(--measure); }
  a { color: var(--color-link); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
  a:hover { text-decoration-thickness: 0.14em; }
  code { font-family: var(--font-mono); font-size: 0.9em; }
  :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
  ::selection { background: var(--color-accent-wash); color: var(--color-text); }
}

/* 6. User display settings (data attributes set by the server from the settings cookie).
   Their own layer sits after the theme, so high contrast beats any theme colour. */
@layer settings {
  [data-text="large"] { font-size: 112.5%; }
  [data-contrast="high"] {
    color-scheme: light;
    --color-page: #ffffff;
    --color-surface: #ffffff;
    --color-surface-2: #ffffff;
    --color-text: #000000;
    --color-text-muted: #000000;
    --color-border: #000000;
    --color-border-strong: #000000;
    --color-link: #00007a;
    --color-focus: #000000;
  }
}
@layer base {
  [data-links="underline"] a { text-decoration: underline; }
  [data-contrast="high"] a { text-decoration: underline; }
  [data-motion="reduce"] *, [data-motion="reduce"] *::before, [data-motion="reduce"] *::after {
    animation-duration: 0.01ms !important; /* user-preference reset: one of the genuine !important cases */
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 7. Utilities. */
@layer utilities {
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .js .js-hide { display: none; }
  .num { text-align: end; font-variant-numeric: tabular-nums; }
}