@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=El+Messiri:wght@500;600;700&display=swap');

:root {
  --th-green-deep: #0a241f;
  --th-green: #153d36;
  --th-green-mid: #1f5246;
  --th-green-soft: #2a6b5c;
  --th-gold: #c4a35a;
  --th-gold-bright: #e2c878;
  --th-gold-muted: #9a7b3c;
  --th-lime: #d9ef8c;
  --th-lime-soft: #e8f5b8;
  --th-cream: #fdfcf7;
  --th-cream-warm: #f3efe3;
  --th-ink: #0f2e28;
  --th-text: #3a4f48;
  --th-muted: #6b7d76;
  --th-line: #e0e6dc;
  --th-card-shadow: 0 22px 55px rgba(10, 36, 31, 0.11);
  --th-radius-shell: 32px;
  --th-radius-card: 20px;
  --th-radius-pill: 999px;
  --th-font-display: 'El Messiri', 'IBM Plex Sans Arabic', Tahoma, sans-serif;
  --th-font-body: 'IBM Plex Sans Arabic', Tahoma, Arial, sans-serif;
  --th-nav-height: 72px;
  --th-safe-bottom: env(safe-area-inset-bottom, 0px);
}

body.concept-ui {
  --bg: var(--th-cream-warm);
  --paper: #fff;
  --ink: var(--th-ink);
  --text: var(--th-text);
  --muted: var(--th-muted);
  --line: var(--th-line);
  --accent: var(--th-lime);
  --soft: #eef3e6;
  --green: var(--th-green-mid);
  font-family: var(--th-font-body);
}

body.concept-ui h1,
body.concept-ui h2,
body.concept-ui .concept-display {
  font-family: var(--th-font-display);
}