/* ==========================================================================
   ALTMEZ — GLOBAL DESIGN TOKENS
   Single source of truth. No raw hex values anywhere else in the child theme.
   RTL-first. Loaded before every other ALTMEZ stylesheet.
   ========================================================================== */

:root {

  /* --- Brand ------------------------------------------------------------ */
  --altmez-accent:        #FFC719;  /* brand yellow — from the ALTMEZ logo */
  --altmez-accent-600:    #E8B000;  /* hover / pressed */
  --altmez-accent-700:    #C99700;  /* active */
  --altmez-accent-soft:   #FFF6DC;  /* tinted surface */
  --altmez-accent-line:   #F2D98A;  /* tinted border */

  /* --- Primary dark (architectural charcoal) ---------------------------- */
  --altmez-dark:          #10151C;  /* primary dark surface / dark buttons */
  --altmez-dark-2:        #1B2430;  /* elevated dark surface */
  --altmez-dark-3:        #2A3542;  /* dark hairlines */
  --altmez-primary:       var(--altmez-dark);

  /* --- Surfaces --------------------------------------------------------- */
  --altmez-bg:            #FFFFFF;
  --altmez-bg-soft:       #F7F6F3;  /* warm neutral alternate section */
  --altmez-bg-soft-2:     #F1F0EC;
  --altmez-card:          #FFFFFF;
  --altmez-card-soft:     #FAFAF8;

  /* --- Text ------------------------------------------------------------- */
  --altmez-text:          #1A1F26;
  --altmez-text-strong:   #0D1116;
  --altmez-muted:         #5C6672;
  --altmez-muted-2:       #7C8794;
  --altmez-on-dark:       #F3F5F7;
  --altmez-on-dark-muted: #A9B3BF;

  /* --- Lines ------------------------------------------------------------ */
  --altmez-border:        #E3E6EA;
  --altmez-border-strong: #CFD5DC;

  /* --- Utility ---------------------------------------------------------- */
  --altmez-whatsapp:      #25D366;
  --altmez-whatsapp-700:  #1DA851;
  --altmez-success:       #13612E;
  --altmez-focus:         #1159AF;

  /* --- Radius ----------------------------------------------------------- */
  --altmez-radius-xs:     6px;
  --altmez-radius-sm:     10px;
  --altmez-radius:        14px;
  --altmez-radius-lg:     20px;
  --altmez-radius-xl:     28px;
  --altmez-radius-pill:   999px;

  /* --- Elevation -------------------------------------------------------- */
  --altmez-shadow-xs:     0 1px 2px rgba(16, 21, 28, .06);
  --altmez-shadow-sm:     0 2px 8px rgba(16, 21, 28, .06);
  --altmez-shadow:        0 6px 24px rgba(16, 21, 28, .08);
  --altmez-shadow-lg:     0 16px 48px rgba(16, 21, 28, .12);
  --altmez-ring:          0 0 0 3px rgba(255, 199, 25, .45);

  /* --- Layout ----------------------------------------------------------- */
  --altmez-container:        1280px;
  --altmez-container-tight:  1120px;
  --altmez-measure:          72ch;   /* article reading measure */
  --altmez-gutter:           clamp(16px, 4vw, 32px);
  --altmez-grid-gap:         clamp(16px, 2.2vw, 28px);

  /* --- Vertical rhythm -------------------------------------------------- */
  --altmez-space-1:  4px;
  --altmez-space-2:  8px;
  --altmez-space-3:  12px;
  --altmez-space-4:  16px;
  --altmez-space-5:  24px;
  --altmez-space-6:  32px;
  --altmez-space-7:  48px;
  --altmez-space-8:  64px;
  --altmez-section:  clamp(48px, 7vw, 96px);   /* section padding block */

  /* --- Typography ------------------------------------------------------- */
  --altmez-font: "Cairo", "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;

  --altmez-fs-h1:   clamp(1.75rem, 1.15rem + 2.6vw, 3.25rem);
  --altmez-fs-h2:   clamp(1.5rem,  1.12rem + 1.6vw, 2.375rem);
  --altmez-fs-h3:   clamp(1.25rem, 1.07rem + 0.8vw, 1.625rem);
  --altmez-fs-h4:   clamp(1.125rem, 1.04rem + 0.4vw, 1.3125rem);
  --altmez-fs-body: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --altmez-fs-sm:   0.9375rem;
  --altmez-fs-xs:   0.8125rem;

  --altmez-lh-tight: 1.28;
  --altmez-lh-head:  1.4;
  --altmez-lh-body:  1.9;

  --altmez-fw-body:   400;
  --altmez-fw-medium: 600;
  --altmez-fw-bold:   700;
  --altmez-fw-black:  800;

  /* --- Motion ----------------------------------------------------------- */
  --altmez-ease:  cubic-bezier(.2, .7, .3, 1);
  --altmez-dur:   .22s;

  /* --- Media ratios ----------------------------------------------------- */
  --altmez-ratio-card:    4 / 3;
  --altmez-ratio-wide:    16 / 9;
  --altmez-ratio-feature: 3 / 2;

  /* --- Header ----------------------------------------------------------- */
  --altmez-header-h:        84px;
  --altmez-header-h-mobile: 64px;
  --altmez-topbar-h:        40px;
}

@media (max-width: 1024px) {
  :root { --altmez-header-h: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --altmez-dur: .001s; }
}