/* ==========================================================================
   MASOUN — Design tokens
   WP: enqueue first (wp_enqueue_style 'masoun-tokens').
   ========================================================================== */

:root {
  /* Palette */
  --c-onyx: #0E0C0A;
  --c-coal: #1A1714;
  --c-coal-2: #24201B;
  --c-saddle: #3E2718;
  --c-cognac: #6B4429;
  --c-tobacco: #8A5A36;
  --c-ivory: #F3ECDF;
  --c-ivory-2: #EAE1D1;
  --c-parchment: #E2D6C2;
  --c-sand: #A8957B;
  --c-sand-dark: #76674F;
  --c-gold: #B89A5E;
  --c-gold-soft: rgba(184, 154, 94, .32);

  --c-text: var(--c-ivory);
  --c-text-soft: rgba(243, 236, 223, .72);
  --c-text-mute: rgba(243, 236, 223, .5);
  --line-light: rgba(243, 236, 223, .14);
  --line-dark: rgba(14, 12, 10, .14);

  /* Type */
  --f-display-ar: "Amiri", "Times New Roman", serif;
  --f-body-ar: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-display-la: "Cormorant Garamond", Georgia, serif;
  --f-ui-la: "Jost", "Helvetica Neue", sans-serif;
  --f-display: var(--f-display-ar);
  --f-body: var(--f-body-ar);

  --fs-hero: clamp(60px, min(17vw, 19svh), 168px);
  --fs-h2: clamp(36px, 6.2vw, 68px);
  --fs-h3: clamp(22px, 2.4vw, 28px);
  --fs-lead: clamp(16px, 1.5vw, 19px);
  --fs-body: 15.5px;
  --fs-small: 13px;
  --fs-micro: 11px;

  /* Layout */
  --gutter: 20px;
  --maxw: 1360px;
  --header-h: 64px;
  --announce-h: 34px;
  --section-y: clamp(88px, 13vw, 176px);
  --radius: 2px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur: .6s;
  --dur-slow: 1.2s;

  /* Surfaces for image placeholders */
  --ph-cognac: radial-gradient(120% 90% at 28% 18%, #94623C 0%, #6B4429 34%, #3E2718 78%, #26170E 100%);
  --ph-saddle: radial-gradient(120% 90% at 70% 15%, #5E3D26 0%, #3E2718 45%, #1E140D 100%);
  --ph-coal: radial-gradient(120% 90% at 30% 20%, #2E2923 0%, #1A1714 55%, #0E0C0A 100%);
  --ph-ivory: radial-gradient(120% 90% at 30% 15%, #FBF7F0 0%, #EEE6D8 50%, #DCCFB9 100%);
  --ph-marble: linear-gradient(135deg, #EDEAE4 0%, #D9D5CE 40%, #F2EFEA 60%, #CFC9C0 100%);

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (min-width: 768px) {
  :root {
    --gutter: 40px;
    --header-h: 76px;
    --fs-body: 16px;
  }
}

@media (min-width: 1280px) {
  :root { --gutter: 64px; }
}

html[lang="en"] {
  --f-display: var(--f-display-la);
  --f-body: var(--f-ui-la);
}