/* Design tokens: the one place colours, type and spacing are defined. Values come from the V4
   design; the brand colours are still to be confirmed against the client's house style. */
:root {
  /* Brand */
  --plum-950: #241031;
  --plum-900: #2a1136;
  --plum-850: #3a1750;
  --plum-700: #4a2263;
  --plum-600: #5b2a76;
  --plum-500: #7a3e93;
  --orchid-600: #8e3f86;
  --orchid-200: #ebc2dd;
  --aqua-400: #69cce1;
  --aqua-300: #9fd8e9;
  /* Darker end of the brand gradient: white text on it measures 5.3:1 (on aqua-400 it is 1.9:1). */
  --azure-700: #2b6f9a;
  --rose-500: #ce689b;
  --rose-700: #8e2c5c;
  --rose-50: #fdf0f5;

  /* Surfaces */
  --color-bg: #ffffff;
  --color-tint: #eaf4f8;
  --color-tint-hover: #eef6fa;
  --color-card: #ffffff;
  --color-photo-fallback: #dfe3e8;

  /* Text */
  --color-text: var(--plum-950);
  --color-text-body: #4a5164;
  --color-text-soft: #565d70;
  --color-text-strong: #3e4557;
  /* Small meta text gets its own token: the design's light grey measured 3.9:1, this is 5.9:1. */
  --color-text-muted: #5c6476;

  /* Lines and elevation */
  --line: rgb(36 16 49 / 0.1);
  --line-strong: rgb(36 16 49 / 0.16);
  --shadow-soft: 0 6px 16px rgb(36 16 49 / 0.1);
  --shadow-lift: 0 10px 24px rgb(36 16 49 / 0.14);
  --focus-ring: 0 0 0 3px rgb(105 204 225 / 0.55);

  /* Type */
  --font-body: "Instrument Sans", system-ui, "Segoe UI", Tahoma, sans-serif;
  --font-heading: "Newsreader", Georgia, "Segoe UI", Tahoma, serif;
  --font-quote: "Instrument Serif", Georgia, "Segoe UI", Tahoma, serif;

  /* Layout */
  --wrap-max: 1400px;
  --gutter: clamp(20px, 4vw, 56px);
  --radius: 4px;
  --radius-card: 6px;
  --section-space: clamp(56px, 8vw, 100px);
}

/* The serif faces have no Arabic glyphs; keep headings in the sans stack there. */
:lang(ar) {
  --font-heading: var(--font-body);
  --font-quote: var(--font-body);
}