/* ============================================================================
   Mahmoud Abbadi — Design Tokens
   ============================================================================
   The single source of truth for the brand system (SPEC 001).

   RULES
   1. No component file may contain a raw hex or an unexplained pixel value.
      Every colour, space, radius, shadow, duration and type step is a token.
   2. Palette values are SAMPLED FROM THE LOGO and then adjusted only where
      WCAG AA required it. Every adjustment is logged in
      specs/001-brand-system/brand-guideline.md § Palette provenance.
   3. Contrast ratios in the comments are MEASURED (WCAG 2.1 relative
      luminance), not estimated.
   4. Direction is a token concern: layout uses logical properties only.
      Arabic overrides live in the `:lang(ar)` block at the end of this file.

   Load class: RENDER-CRITICAL. Enqueued in <head>, never deferred.
   ========================================================================= */

:root {
	/* ------------------------------------------------------------------
	   1. PALETTE — raw values, sampled from logo.jpeg
	   ------------------------------------------------------------------ */

	/* Warm neutral ground (the logo's ground) */
	--ma-paper-050: #faf7f2;
	--ma-paper-100: #f4f1ea;
	--ma-sand-200:  #e7e3da;
	--ma-line-300:  #dcd7cc;

	/* Neutral ink ramp */
	--ma-gray-400: #7d8792;
	--ma-gray-500: #5c6875;
	--ma-gray-600: #45515e;
	--ma-ink-700:  #27333f; /* logo's dominant dark */
	--ma-ink-900:  #0c131a; /* logo's deepest dark */

	/* Muted teal ramp (the logo's accent) */
	--ma-teal-300: #b9c8c3;
	--ma-teal-400: #567d84;
	--ma-teal-500: #426770;
	--ma-teal-600: #304e59; /* logo's accent */
	--ma-teal-700: #243d46;
	--ma-teal-800: #1f3740;

	/* Sage washes */
	--ma-sage-050: #edf1ef;
	--ma-sage-100: #e7ece9;
	--ma-sage-200: #dde5e1;

	/* Status — all >= 4.5:1 on paper, white, paper-alt and sage-100 */
	--ma-danger-600:  #9b2c2c;
	--ma-success-600: #1f5c3a;
	--ma-warning-600: #7a5312;

	--ma-danger-wash-100:  #fbedec;
	--ma-success-wash-100: #e9f1eb;
	--ma-warning-wash-100: #f7f0df;

	/* ------------------------------------------------------------------
	   2. SEMANTIC ROLES — components use these, never the raw palette
	   ------------------------------------------------------------------ */

	--ma-bg:            var(--ma-paper-100); /* ink 11.41:1 */
	--ma-bg-alt:        var(--ma-paper-050); /* ink 12.04:1 */
	--ma-surface:       #ffffff;             /* ink 12.87:1 */
	--ma-surface-sunken: var(--ma-sage-050);

	--ma-text:          var(--ma-ink-700);
	--ma-text-strong:   var(--ma-ink-900);   /* 16.57:1 on bg */
	--ma-text-muted:    var(--ma-gray-500);  /* 5.04:1 on bg — AA at any size */
	--ma-text-inverse:  var(--ma-paper-100);

	--ma-border:        var(--ma-line-300);  /* DECORATIVE hairline (1.27:1) */
	--ma-border-strong: var(--ma-gray-400);  /* MEANINGFUL boundary (3.24:1) */

	--ma-accent:        var(--ma-teal-600);  /* 7.89:1 on bg */
	--ma-accent-hover:  var(--ma-teal-700);
	--ma-accent-strong: var(--ma-teal-800);
	--ma-accent-soft:   var(--ma-teal-300);
	--ma-accent-wash:   var(--ma-sage-100);
	--ma-on-accent:     var(--ma-paper-100); /* 7.89:1 on accent */

	/* Dark surfaces (hero, footer, media lightbox) */
	--ma-dark-bg:        var(--ma-ink-900);
	--ma-dark-surface:   var(--ma-ink-700);
	--ma-on-dark:        var(--ma-paper-100); /* 16.57:1 on dark-bg */
	--ma-on-dark-muted:  var(--ma-teal-300);  /* 10.78:1 on dark-bg */
	--ma-dark-border:    rgb(185 200 195 / 18%);

	--ma-danger:        var(--ma-danger-600);
	--ma-danger-wash:   var(--ma-danger-wash-100);
	--ma-success:       var(--ma-success-600);
	--ma-success-wash:  var(--ma-success-wash-100);
	--ma-warning:       var(--ma-warning-600);
	--ma-warning-wash:  var(--ma-warning-wash-100);

	--ma-overlay:       rgb(12 19 26 / 82%);

	/* ------------------------------------------------------------------
	   3. TYPOGRAPHY
	   Latin metrics are the default; Arabic overrides come later in this file.
	   ------------------------------------------------------------------ */

	--ma-font-sans: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system,
		"Segoe UI", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
	--ma-font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
	--ma-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--ma-fw-regular:  400;
	--ma-fw-medium:   500;
	--ma-fw-semibold: 600;
	--ma-fw-bold:     700;

	/* Fluid size ramp — Latin */
	--ma-fs-display: clamp(2.5rem, 1.6rem + 4.2vw, 4.25rem);
	--ma-fs-h1:      clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
	--ma-fs-h2:      clamp(1.625rem, 1.25rem + 1.6vw, 2.375rem);
	--ma-fs-h3:      clamp(1.3125rem, 1.12rem + 0.8vw, 1.625rem);
	--ma-fs-h4:      clamp(1.125rem, 1.03rem + 0.4vw, 1.3125rem);
	--ma-fs-lead:    clamp(1.0625rem, 1.02rem + 0.25vw, 1.1875rem);
	--ma-fs-body:    1.0625rem; /* 17px */
	--ma-fs-sm:      0.9375rem;
	--ma-fs-xs:      0.8125rem;
	--ma-fs-label:   0.75rem;

	/* Line heights — Latin */
	--ma-lh-display: 1.05;
	--ma-lh-heading: 1.18;
	--ma-lh-snug:    1.35;
	--ma-lh-body:    1.65;

	/* Letter spacing — Latin */
	--ma-track-display: -0.022em;
	--ma-track-heading: -0.012em;
	--ma-track-body:    0em;
	--ma-track-label:   0.06em;

	/* Measure (reading width) */
	--ma-measure: 68ch;
	--ma-measure-narrow: 52ch;

	/* ------------------------------------------------------------------
	   4. SPACE — 4px base scale
	   ------------------------------------------------------------------ */

	--ma-space-1:  0.25rem; /*  4px */
	--ma-space-2:  0.5rem;  /*  8px */
	--ma-space-3:  0.75rem; /* 12px */
	--ma-space-4:  1rem;    /* 16px */
	--ma-space-5:  1.5rem;  /* 24px */
	--ma-space-6:  2rem;    /* 32px */
	--ma-space-7:  3rem;    /* 48px */
	--ma-space-8:  4rem;    /* 64px */
	--ma-space-9:  6rem;    /* 96px */
	--ma-space-10: 8rem;    /* 128px */

	/* Vertical rhythm of a page section */
	--ma-section-pad: clamp(var(--ma-space-6), 4vw, var(--ma-space-8));

	/* ------------------------------------------------------------------
	   5. SHAPE
	   ------------------------------------------------------------------ */

	--ma-radius-xs:   2px;
	--ma-radius-sm:   4px;
	--ma-radius-md:   8px;
	--ma-radius-lg:   14px;
	--ma-radius-full: 999px;

	--ma-border-width: 1px;
	--ma-border-width-strong: 2px;

	/* ------------------------------------------------------------------
	   6. ELEVATION — deliberately restrained; hierarchy comes from type
	   ------------------------------------------------------------------ */

	--ma-elev-0: none;
	--ma-elev-1: 0 1px 2px rgb(12 19 26 / 6%), 0 1px 1px rgb(12 19 26 / 4%);
	--ma-elev-2: 0 4px 16px rgb(12 19 26 / 8%), 0 1px 2px rgb(12 19 26 / 5%);
	--ma-elev-3: 0 12px 32px rgb(12 19 26 / 12%), 0 2px 6px rgb(12 19 26 / 6%);

	/* ------------------------------------------------------------------
	   7. MOTION — functional only, 120–250ms, no scroll-jacking
	   ------------------------------------------------------------------ */

	--ma-dur-fast: 120ms;
	--ma-dur-base: 180ms;
	--ma-dur-slow: 250ms;
	--ma-ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
	--ma-ease-exit:     cubic-bezier(0.4, 0, 1, 1);
	--ma-transition-base: all var(--ma-dur-base) var(--ma-ease-standard);

	/* ------------------------------------------------------------------
	   8. LAYOUT
	   ------------------------------------------------------------------ */

	--ma-container-narrow:  46rem;  /*  736px — long-form reading */
	--ma-container-content: 75rem;  /* 1200px — default page container */
	--ma-container-wide:    90rem;  /* 1440px — full-bleed sections */
	--ma-gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);

	--ma-grid-columns: 12;
	--ma-grid-gap: var(--ma-space-5);

	--ma-header-height: 3.5rem;

	/* ------------------------------------------------------------------
	   9. FOCUS — two-tone ring: the dark line contrasts on light grounds,
	      the light halo contrasts on dark grounds. One of the two is always
	      visible, so the indicator never disappears.
	   ------------------------------------------------------------------ */

	--ma-focus-ring:   var(--ma-ink-900);    /* 16.57:1 on bg */
	--ma-focus-halo:   var(--ma-paper-100);  /* 16.57:1 on focus-ring */
	--ma-focus-width:  2px;
	--ma-focus-offset: 2px;
	--ma-focus-halo-width: 5px;

	/* ------------------------------------------------------------------
	   10. STACKING
	   ------------------------------------------------------------------ */

	--ma-z-base:    0;
	--ma-z-header:  100;
	--ma-z-menu:    200;
	--ma-z-overlay: 300;
	--ma-z-toast:   400;

	/* ------------------------------------------------------------------
	   11. TARGET SIZE — WCAG 2.2 §2.5.8 minimum
	   ------------------------------------------------------------------ */

	--ma-tap-min: 44px;
}

/* ============================================================================
   ARABIC SCRIPT ADJUSTMENTS
   ----------------------------------------------------------------------------
   Two facts drive this block, and both are non-negotiable:

   1. LETTER-SPACING BREAKS ARABIC. Arabic is cursive: adjacent letters must
      join. Any non-zero tracking inserts gaps inside a joined word. Every
      tracking token is therefore reset to 0 — including the label style, which
      is the usual offender.

   2. ARABIC NEEDS MORE VERTICAL ROOM. Ascenders, descenders and optional
      diacritics sit above Latin x-height norms, so the same line-height that
      looks generous in Latin crowds Arabic. Line-heights and the body size are
      raised, which is why the ramp is defined per script rather than scaled.
   ========================================================================= */

:lang(ar) {
	--ma-fs-body:    1.125rem; /* 18px — Arabic legibility floor */
	--ma-fs-sm:      1rem;
	--ma-fs-xs:      0.875rem;

	--ma-lh-display: 1.24;
	--ma-lh-heading: 1.42;
	--ma-lh-snug:    1.55;
	--ma-lh-body:    1.85;

	--ma-track-display: 0em;
	--ma-track-heading: 0em;
	--ma-track-body:    0em;
	--ma-track-label:   0em;

	--ma-measure: 58ch; /* Arabic word density is higher per character count */
}

/* ============================================================================
   DARK SURFACES
   Components rendered on a dark ground opt in with data-surface="dark" so the
   focus ring and text roles invert without duplicating the palette.
   ========================================================================= */

[data-surface="dark"] {
	--ma-text:         var(--ma-on-dark);
	--ma-text-strong:  var(--ma-on-dark);
	--ma-text-muted:   var(--ma-on-dark-muted);
	--ma-border:       var(--ma-dark-border);
	--ma-border-strong: var(--ma-on-dark-muted);
	--ma-accent:       var(--ma-teal-300);
	--ma-accent-hover: var(--ma-paper-100);
	--ma-focus-ring:   var(--ma-paper-100);
	--ma-focus-halo:   var(--ma-ink-900);
}

/* ============================================================================
   REDUCED MOTION — collapse to 0ms rather than animated-but-shorter.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	:root {
		--ma-dur-fast: 0ms;
		--ma-dur-base: 0ms;
		--ma-dur-slow: 0ms;
	}
}

/* ============================================================================
   FORCED COLORS (Windows High Contrast) — hand control back to the OS.
   ========================================================================= */

@media (forced-colors: active) {
	:root {
		--ma-border:        CanvasText;
		--ma-border-strong: CanvasText;
		--ma-focus-ring:    Highlight;
		--ma-focus-halo:    Canvas;
	}
}