/* CHERT Design System v1.0 — design tokens.
 *
 * THE SINGLE SOURCE OF COLOUR, TYPE AND SPACING FOR THE WHOLE PLATFORM (I3).
 * This file is copied VERBATIM into every engine's theme package. No engine
 * defines a colour, a font stack or a spacing value of its own; a build check
 * fails any theme containing a raw hex code.
 *
 * Values come from branding/CHERT-Design-System.md and are not invented here.
 * Two rules from that document are load-bearing and easy to break:
 *   · orange TEXT never sits on cream (2.28:1 — fails at every size)
 *   · primary buttons are INK text on orange (7.29:1)
 */
:root {
  /* Brand */
  --chert-orange:        #FF8651;
  --chert-orange-deep:   #F26B33;   /* hover, underlines — never body text */
  --chert-orange-tint:   #FDEEE4;
  --chert-tan:           #D2B082;
  --chert-cream:         #FFFAE4;
  --chert-ink:           #1A1A18;

  /* Surfaces */
  --chert-surface:       #FFFFFF;
  --chert-surface-alt:   #FBF7EC;
  --chert-border:        #ECE0C2;
  --chert-border-strong: #D9C9A4;
  --chert-muted:         #6B6B66;

  /* Status */
  --chert-success:       #10B981;  --chert-success-bg: #E7F8F2;
  --chert-warning:       #F59E0B;  --chert-warning-bg: #FEF4E3;
  --chert-error:         #EF4444;  --chert-error-bg:   #FDECEC;
  --chert-info:          #3B82F6;  --chert-info-bg:    #EAF1FE;

  /* Dark surfaces (footer, dark panels) */
  --chert-dark:          #151311;
  --chert-dark-surface:  #1B1815;
  --chert-dark-border:   #26221D;
  --chert-dark-text:     #F3EDE0;
  --chert-dark-muted:    #A89E8D;

  /* Type */
  --font-en: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ar: 'IBM Plex Sans Arabic', 'Cairo', system-ui, sans-serif;

  --fs-display: 56px;  --fs-h1: 40px;  --fs-h2: 30px;  --fs-h3: 22px;
  --fs-lg:      18px;  --fs-base: 16px; --fs-sm: 14px; --fs-xs: 13px;
  --fs-overline:12px;

  --lh-tight: 1.1;  --lh-snug: 1.25;  --lh-base: 1.5;

  /* Radii */
  --radius-sm: 8px;  --radius-md: 12px;  --radius-card: 16px;  --radius-pill: 40px;

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px; --space-6: 32px;  --space-7: 48px;  --space-8: 64px;

  /* Elevation */
  --shadow-card:     0 10px 30px -18px rgba(0,0,0,.2);
  --shadow-hover:    0 20px 40px -20px rgba(242,107,51,.4);
  --shadow-dropdown: 0 12px 32px -8px rgba(0,0,0,.18);
  --shadow-modal:    0 24px 64px -12px rgba(0,0,0,.3);

  --focus-ring: 0 0 0 3px rgba(255,134,81,.25);
}

/* Arabic: +1px and a looser line-height for legibility; letter-spacing must
 * stay `normal` — adjusting it breaks Arabic letter joining. */
:root:lang(ar), [dir="rtl"] {
  --font-body: var(--font-ar);
  --fs-base: 17px;
  --lh-base: 1.7;
  letter-spacing: normal;
}
:root:lang(en), [dir="ltr"] {
  --font-body: var(--font-en);
}
[lang="ar"], [dir="rtl"] { font-style: normal; }   /* no italics in Arabic */