/* ============================================================
   MOROCCO TIZIRI — Brand Design Tokens
   Flattened from morocco-tiziri-design-system/project/tokens/*.css
   (colors, typography, spacing, radius, shadow, base).
   This is the single source of truth for the visual system.
   Elementor Global Colors / Global Fonts mirror these values.
   Fonts are enqueued separately in functions.php (MTZ_FONTS_URL).
   ============================================================ */

/* ---------- Colors ---------- */
:root {
  /* Sand — warm paper neutrals (surfaces & backgrounds) */
  --sand-50:  #FCF9F3; --sand-100: #F8F1E7; --sand-200: #F0E6D6; --sand-300: #E4D3BC; --sand-400: #D3BE9F;
  /* Ink — warm charcoal browns (text) */
  --ink-900:  #2A2116; --ink-800: #3B2F20; --ink-700: #574734; --ink-600: #75634C; --ink-500: #948068; --ink-400: #B4A288;
  /* Clay — terracotta PRIMARY */
  --clay-50:  #FBECE2; --clay-100: #F5D3BF; --clay-200: #EBAE8A; --clay-300: #DE8859; --clay-400: #CF6C39;
  --clay-500: #BE551F; --clay-600: #A2461A; --clay-700: #833914; --clay-800: #632B10;
  /* Saffron — amber/gold accent */
  --saffron-100: #FBEDCB; --saffron-300: #F0C572; --saffron-400: #E4AB43; --saffron-500: #D4922A;
  --gold: #B8934A;
  /* Atlas — deep teal-green SECONDARY */
  --atlas-100: #D5E4E1; --atlas-300: #6FA39C; --atlas-500: #1F6E67; --atlas-700: #114F49; --atlas-800: #0C3A36;
  /* Majorelle — Moroccan cobalt jewel accent */
  --majorelle-400: #4C5FC0; --majorelle-500: #37489C;
  --white: #FFFFFF; --black: #1A140C;

  /* Semantic aliases */
  --color-primary: var(--clay-500); --color-primary-hover: var(--clay-600); --color-primary-active: var(--clay-700); --color-primary-soft: var(--clay-50);
  --color-accent: var(--saffron-400); --color-secondary: var(--atlas-500); --color-secondary-hover: var(--atlas-700); --color-jewel: var(--majorelle-500);
  --surface-page: var(--sand-50); --surface-raised: var(--white); --surface-sunken: var(--sand-100); --surface-inverse: var(--ink-900); --surface-brand: var(--clay-500); --surface-brand-soft: var(--clay-50);
  --text-strong: var(--ink-900); --text-body: var(--ink-800); --text-muted: var(--ink-600); --text-subtle: var(--ink-500); --text-on-brand: var(--sand-50); --text-on-inverse: var(--sand-100); --text-link: var(--clay-600); --text-link-hover: var(--clay-700);
  --border-subtle: #EADFCD; --border-default: #E0D0B7; --border-strong: #CBB491; --border-inverse: rgba(255,255,255,0.14);
  --success: #3C7A50; --success-soft: #E3EFE6; --warning: #C9842A; --warning-soft: #FBEECF; --danger: #B23A2E; --danger-soft: #F7E2DE; --info: #2F6C9E; --info-soft: #E1ECF4;
}

/* ---------- Typography ---------- */
:root {
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;   /* headlines, hero titles, prices */
  --font-label:   'Marcellus', 'Cormorant Garamond', Georgia, serif;          /* wordmark + eyebrow labels */
  --font-body:    'Mulish', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; /* UI + body */
  --font-mono:    'SFMono-Regular', 'Menlo', 'Consolas', monospace;

  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.375rem;
  --text-xl: 1.75rem; --text-2xl: 2.25rem; --text-3xl: 3rem; --text-4xl: 4rem; --text-5xl: 5.25rem;

  --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800;
  --leading-tight: 1.05; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.7;
  --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.14em; --tracking-widest: 0.24em;
}

/* ---------- Spacing & layout ---------- */
:root {
  --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem;
  --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 5rem; --space-12: 7rem; --space-16: 10rem;
  --container-max: 1200px; --container-narrow: 760px; --gutter: 2rem; --section-y: 6rem;
}

/* ---------- Radius ---------- */
:root {
  --radius-none: 0; --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px;
  --radius-xl: 28px; --radius-2xl: 40px; --radius-pill: 999px;
  --radius-arch: 50% 50% 12px 12px / 32% 32% 12px 12px; /* Moroccan keyhole/arch feature crop */
}

/* ---------- Shadows & motion ---------- */
:root {
  --shadow-xs: 0 1px 2px rgba(42,33,22,0.06);
  --shadow-sm: 0 2px 6px rgba(42,33,22,0.08);
  --shadow-md: 0 10px 24px -8px rgba(42,33,22,0.16);
  --shadow-lg: 0 22px 48px -14px rgba(42,33,22,0.22);
  --shadow-xl: 0 40px 80px -24px rgba(42,33,22,0.28);
  --shadow-clay: 0 14px 30px -10px rgba(190,85,31,0.45); /* warm CTA glow */
  --ring-focus: 0 0 0 3px rgba(190,85,31,0.28);
  --transition-fast: 140ms cubic-bezier(0.3,0,0.2,1);
  --transition-base: 240ms cubic-bezier(0.3,0,0.2,1);
  --transition-slow: 420ms cubic-bezier(0.22,0.61,0.36,1);
}

/* ---------- Base element defaults (for native, non-Elementor content) ---------- */
:root {
  color-scheme: light;
  --pattern-zellige:
    radial-gradient(circle at 50% 0, transparent 0 8px, var(--border-subtle) 8px 9px, transparent 9px),
    radial-gradient(circle at 0 50%, transparent 0 8px, var(--border-subtle) 8px 9px, transparent 9px);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 0.4em;
}
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--text-link); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--text-link-hover); }
::selection { background: var(--clay-100); color: var(--ink-900); }

/* ---------- Brand utilities ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-primary);
}
.mtz-arch { border-radius: var(--radius-arch); overflow: hidden; }               /* keyhole-arch image crop */
.mtz-zellige { background-image: var(--pattern-zellige); background-size: 18px 18px; } /* subtle zellige texture */