/**
 * @file theme.css
 * B'Tselem design-system tokens, mapped onto Mercury's token names.
 *
 * Source: the B'Tselem Design System (Claude Design). Brand colours: ink
 * #010B13, red #DB373F (deep #B12A31), paper #EBEAE5 (#DEDDD7). The site
 * background is white (decided 2026-10-14); paper is used for secondary
 * surfaces. Square corners, no shadows.
 *
 * Mercury reads these at runtime, so values can be tried without rebuilding.
 */

:root {
  /* Brand palette. */
  --bts-ink: #010b13;
  --bts-red: #db373f;
  --bts-red-deep: #b12a31;
  --bts-paper: #ebeae5;
  --bts-paper-2: #deddd7;
  --bts-grey: #4a4f58;
  --bts-line: #c9c8c3;
  --bts-white: #ffffff;

  /* Surfaces. */
  --background: var(--bts-white);
  --foreground: var(--bts-ink);
  --card: var(--bts-white);
  --card-foreground: var(--bts-ink);
  --muted: var(--bts-paper);
  --muted-foreground: var(--bts-grey);

  /* Brand roles. Red is for actions and accents, never body text. */
  --primary: var(--bts-red);
  --primary-foreground: var(--bts-white);
  --secondary: var(--bts-ink);
  --secondary-foreground: var(--bts-white);
  --accent: var(--bts-paper);
  --accent-foreground: var(--bts-ink);
  --destructive: var(--bts-red-deep);
  --destructive-foreground: var(--bts-white);

  /* Lines. */
  --border: var(--bts-line);
  --input: var(--bts-ink);

  /* Type: display = Levit 1950 stand-in (Archivo, expanded) with Hebrew and
     Arabic fallbacks; body = David Libre, Arabic in IBM Plex Sans Arabic. */
  --font-sans: "Archivo", "Rubik", "IBM Plex Sans Arabic", "Helvetica Neue", Arial, sans-serif;
  --font-body: "David Libre", "IBM Plex Sans Arabic", Georgia, "Times New Roman", serif;
  --font-serif: "David Libre", Georgia, "Times New Roman", serif;
  --font-mono: "Menlo", "Consolas", "Liberation Mono", monospace;
  --font-display-stretch: 125%;
  --tracking-normal: 0em;

  /* Shape and depth: square, flat. */
  --radius: 0px;
  --shadow-x: 0;
  --shadow-y: 0;
  --shadow-blur: 0;
  --shadow-spread: 0px;
  --shadow-opacity: 0;
  --shadow-color: transparent;
  --shadow-2xs: none;
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --shadow-2xl: none;

  --spacing: 0.25rem;

  /* Header height (also used by hero overlays). */
  --navbar-height: calc(var(--spacing) * 16);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 20);
  }
}

/* Arabic pages: one family for display and body, as the brand specifies. */
:root:lang(ar) {
  --font-sans: "IBM Plex Sans Arabic", "Archivo", Arial, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "David Libre", Arial, sans-serif;
}

/* Hebrew pages: Rubik for display, David Libre for body. */
:root:lang(he) {
  --font-sans: "Rubik", "Archivo", Arial, sans-serif;
}