/**
 * Design tokens — Step 4 UI System. This is the single source of truth
 * for color, type, spacing, and radius; component/base CSS should only
 * ever reference these variables, never hardcode a hex value or px size.
 *
 * @package XCursionGuide
 */

:root {
  /* --- Color: Brand --- */
  --xcg-color-terracotta: #C1652F;
  --xcg-color-terracotta-dark: #9C4E22;
  --xcg-color-majorelle: #2E4374;
  --xcg-color-gold: #B8942F; /* accent only — never a large fill, see Step 4 §1 rule */

  /* --- Color: Neutrals --- */
  --xcg-color-sand-50: #FBF8F3;
  --xcg-color-sand-100: #F5EFE6;
  --xcg-color-sand-300: #E4D9C8;
  --xcg-color-charcoal: #221E1D;
  --xcg-color-charcoal-60: #55504D;

  /* --- Color: Functional --- */
  --xcg-color-success: #3F7A52;
  --xcg-color-error: #B4453A;
  --xcg-color-link: var(--xcg-color-majorelle);

  /* --- Elevation --- */
  --xcg-shadow-card: 0 2px 8px rgba(34, 30, 29, 0.06);
  --xcg-shadow-card-hover: 0 8px 24px rgba(34, 30, 29, 0.12);

  /* --- Typography --- */
  --xcg-font-display: "Fraunces", Georgia, serif;
  --xcg-font-body: "Inter", -apple-system, sans-serif;

  --xcg-text-h1: clamp(2.25rem, 4vw + 1rem, 3.75rem);
  --xcg-text-h2: clamp(1.75rem, 2.5vw + 1rem, 2.75rem);
  --xcg-text-h3: clamp(1.375rem, 1.5vw + 1rem, 1.875rem);
  --xcg-text-body: 1rem;
  --xcg-text-small: 0.875rem;

  /* --- Spacing (8px base unit) --- */
  --xcg-space-1: 0.5rem;
  --xcg-space-2: 1rem;
  --xcg-space-3: 1.5rem;
  --xcg-space-4: 2rem;
  --xcg-space-6: 3rem;
  --xcg-space-8: 4rem;
  --xcg-space-12: 6rem;

  /* --- Radius --- */
  --xcg-radius-sm: 6px;
  --xcg-radius-md: 12px;
  --xcg-radius-lg: 20px;

  /* --- Layout --- */
  --xcg-container-max: 1280px;
}

/*
 * Arabic (RTL) font-stack override — decided at the token level (Step 4 §2)
 * so no component needs a separate RTL font rule.
 */
html[lang="ar"] {
  --xcg-font-display: "Noto Serif Arabic", serif;
  --xcg-font-body: "IBM Plex Sans Arabic", sans-serif;
}