:root {
  /* Colors — brand */
  --color-brand-primary: #8a6a35;
  --color-brand-secondary: #5c1a26;

  /* Colors — surfaces */
  --color-surface-page: #f7f2e8;
  --color-surface-card: #fcf8ef;
  --color-surface-emphasis: #ebe3d3;
  --color-surface-dark: #3a2819;
  --color-surface-dark-elevated: #44301f;

  /* Colors — text */
  --color-text-primary: #231f20;
  --color-text-secondary: #3d3c39;
  --color-text-tertiary: #6b6a65;
  --color-text-on-dark: #fcf8ef;
  --color-text-on-dark-muted: #a8a59d;

  /* Colors — border */
  --color-border-subtle: #ebe3d3;
  --color-border-emphasis: #d4cab3;
  --color-border-dark: #44301f;

  /* Colors — semantic */
  --color-success: #556b2f;
  --color-warning: #b06810;
  --color-error: #8a3324;
  /* The focus ring lands on every surface the app has, from the lightest card
     to the dark sidebar, so it has to clear 3:1 against all of them (WCAG 1.4.11).
     That pins its relative luminance into a narrow band: light enough to read on
     #3a2819, dark enough to read on #fcf8ef. Same hue as the blue it replaces,
     darkened into that band. 3.12:1 is the best a single colour can do here. */
  --color-focus: #4483c2;

  /* Font families */
  /* Year of the Camel sits in both Latin stacks, not just behind its own token.
     Arabic script turns up inside Dutch prose all over the site — the honorifics
     ﷻ and ﷺ, Qur'an citations in blog quotes, transliterated terms — and those
     runs inherit the paragraph's font rather than naming --font-arabic. Without
     it here they fell past Caslon and Georgia to whatever Arabic face the OS
     happened to have. It carries no Latin glyphs, so it can never capture text
     the Latin face should have rendered. */
  --font-serif: "Libre Caslon Text", "Year of the Camel", Georgia, serif;
  --font-sans: "Instrument Sans", "Year of the Camel", system-ui, sans-serif;
  --font-arabic: "Year of the Camel", serif;

  /* Type scale — display */
  --text-display: clamp(40px, 8vw, 64px);
  --text-display--line-height: 1.1;
  --text-display--font-weight: 500;
  --text-display--letter-spacing: 0em;

  /* Type scale — section */
  --text-section: clamp(28px, 5vw, 40px);
  --text-section--line-height: 1.2;
  --text-section--font-weight: 500;
  --text-section--letter-spacing: 0em;

  /* Type scale — subhead-lg */
  --text-subhead-lg: clamp(28px, 5vw, 36px);
  --text-subhead-lg--line-height: 1.3;
  --text-subhead-lg--font-weight: 500;
  --text-subhead-lg--letter-spacing: 0em;

  /* Type scale — subhead */
  --text-subhead: 32px;
  --text-subhead--line-height: 1.2;
  --text-subhead--font-weight: 500;
  --text-subhead--letter-spacing: 0em;

  /* Type scale — subhead-sm */
  --text-subhead-sm: 25px;
  --text-subhead-sm--line-height: 1.2;
  --text-subhead-sm--font-weight: 500;
  --text-subhead-sm--letter-spacing: 0em;

  /* Type scale — feature-title */
  --text-feature-title: 20px;
  --text-feature-title--line-height: 1.3;
  --text-feature-title--font-weight: 500;
  --text-feature-title--letter-spacing: 0em;

  /* Type scale — body-serif */
  --text-body-serif: 17px;
  --text-body-serif--line-height: 1.6;
  --text-body-serif--font-weight: 400;
  --text-body-serif--letter-spacing: 0em;

  /* Type scale — body-lg */
  --text-body-lg: 20px;
  --text-body-lg--line-height: 1.6;
  --text-body-lg--font-weight: 400;
  --text-body-lg--letter-spacing: 0em;

  /* Type scale — body-nav */
  --text-body-nav: 17px;
  --text-body-nav--line-height: 1.5;
  --text-body-nav--font-weight: 400;
  --text-body-nav--letter-spacing: 0em;

  /* Type scale — body-standard */
  --text-body-standard: 16px;
  --text-body-standard--line-height: 1.6;
  --text-body-standard--font-weight: 400;
  --text-body-standard--letter-spacing: 0em;

  /* Type scale — body-sm */
  --text-body-sm: 15px;
  --text-body-sm--line-height: 1.6;
  --text-body-sm--font-weight: 400;
  --text-body-sm--letter-spacing: 0em;

  /* Type scale — caption */
  --text-caption: 14px;
  --text-caption--line-height: 1.43;
  --text-caption--font-weight: 400;
  --text-caption--letter-spacing: 0em;

  /* Type scale — label */
  --text-label: 12px;
  --text-label--line-height: 1.25;
  --text-label--font-weight: 500;
  --text-label--letter-spacing: 0.01em;

  /* Type scale — overline. The tracking is 0.2em because that is what every
     call site was setting by hand over the old 0.05em: uppercase text this
     small closes up without it. */
  --text-overline: 10px;
  --text-overline--line-height: 1.6;
  --text-overline--font-weight: 500;
  --text-overline--letter-spacing: 0.2em;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;

  /* Spacing scale */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --space-5xl: 96px;
  --space-6xl: 120px;

  /* Layout — the dashboard sidebar is in-flow at md+, so anything fixed to the
     viewport (overlays, dialogs) must offset by this to line up with the content. */
  --sidebar-width: 260px;
  /* Tap-target height for inputs and the buttons that sit beside them. */
  --input-height: 44px;

  /* Elevation — one shadow does all of it. Depth comes from surface colour,
     not from shade. */
  --shadow-whisper: 0 4px 24px rgba(0, 0, 0, 0.04);

  /* Motion
     Three durations, picked against what the eye can actually resolve.

     `fast` is the band where a change reads as a connection between two states
     without anyone waiting on it. For colour, border and opacity, which have no
     position to track.

     `base` is where the eye can follow a change of position or size. Under
     ~150ms a moving element reads as a jump cut and the motion buys nothing;
     over ~400ms the user is waiting on the interface. For popovers, disclosure
     panels and dialogs.

     `slow` is for the sidebar drawer alone. Duration should scale with travel,
     and 260px at `base` reads as a snap rather than a slide.

     Easing splits by direction: entering elements decelerate into place,
     leaving elements accelerate away, because nobody needs to watch something
     go. */
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
}