/* ============================================================
   MST BRAND TOKENS — v2.0  (2026-06-26)
   Shared across: multisys.me · labelgraff.com · texgraff.com · migraff.com
   Single palette across all four sites. Sub-brand identity =
   logo + content + photography, not color.
   ============================================================ */
:root {
	/* ── BRAND PALETTE ─────────────────────────────────────────
     Red, black, white, gray, light gray. That's it.
     ──────────────────────────────────────────────────────── */
	--mst-red: #c00c0d;
	--mst-red-hover: #a00a0b;
	--mst-red-soft: #fdf2f2;
	/* 5% tint for backgrounds, badges */
	--mst-black: #000;
	--mst-white: #fff;
	--mst-gray: #737373;
	/* secondary text */
	--mst-gray-dark: #404040;
	/* primary body text alt */
	--mst-light-gray: #e5e5e5;
	/* borders */
	--mst-bg-gray: #f5f5f5;
	/* canvas / sunken surfaces */
	
	/* ── SEMANTIC ALIASES ─────────────────────────────────────
     Use these in components — never the raw colors above.
     Lets us re-skin everything from one place.
     ──────────────────────────────────────────────────────── */
	--brand-accent: var(--mst-red);
	--brand-accent-hover: var(--mst-red-hover);
	--brand-accent-soft: var(--mst-red-soft);
	--surface-base: var(--mst-white);
	--surface-canvas: var(--mst-bg-gray);
	--surface-raised: var(--mst-white);
	--surface-sunken: var(--mst-bg-gray);
	--surface-overlay: rgba(0, 0, 0, .72);
	--border-subtle: var(--mst-light-gray);
	--border-default: #d4d4d4;
	--border-strong: var(--mst-gray);
	--text-primary: var(--mst-black);
	--text-secondary: var(--mst-gray-dark);
	--text-muted: var(--mst-gray);
	--text-inverse: var(--mst-white);
	--text-on-accent: var(--mst-white);
	/* Semantic still useful for non-color meaning (icons, alerts) */
	--color-success: #15803d;
	--color-warning: #d97706;
	--color-danger: var(--mst-red);
	--color-info: #0369a1;
	--color-whatsapp: #25d366;
	--color-whatsapp-hover: #1fb955;
	/* ── TYPOGRAPHY ───────────────────────────────────────────
     Headings:  Outfit (geometric, modern, premium)
     Body:      Inter  (workhorse, exceptional legibility)
     Arabic:    IBM Plex Sans Arabic (pairs with Inter)
     Mono:      JetBrains Mono (specs, SKUs, code)
     All free on Google Fonts.
     ──────────────────────────────────────────────────────── */
	--font-display: "Outfit", "IBM Plex Sans Arabic", system-ui, -apple-system, sans-serif;
	--font-body: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, sans-serif;
	--font-arabic: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
	--font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
	/* Type scale — modular, mobile-first */
	--fs-xs: 12px;
	--fs-sm: 14px;
	--fs-base: 16px;
	--fs-md: 18px;
	--fs-lg: 20px;
	--fs-xl: 24px;
	--fs-2xl: 30px;
	--fs-3xl: 36px;
	--fs-4xl: 48px;
	--fs-5xl: 60px;
	--fs-6xl: 72px;
	/* Weights */
	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-black: 800;
	/* Line heights */
	--lh-tight: 1.15;
	--lh-snug: 1.3;
	--lh-normal: 1.5;
	--lh-relaxed: 1.65;
	--lh-loose: 1.8;
	/* Tracking */
	--tracking-tight: -.02em;
	--tracking-normal: 0;
	--tracking-wide: .04em;
	--tracking-caps: .08em;
	/* ── SPACING SCALE (4px base) ─────────────────────────── */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;
	/* ── RADII ────────────────────────────────────────────── */
	--radius-xs: 2px;
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--radius-xl: 12px;
	--radius-2xl: 16px;
	--radius-pill: 9999px;
	/* ── ELEVATION ────────────────────────────────────────── */
	--shadow-xs: 0 1px 2px rgba(0, 0, 0, .04);
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .05);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .05);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .05);
	/* ── MOTION ───────────────────────────────────────────── */
	--transition-fast: 120ms cubic-bezier(.4, 0, .2, 1);
	--transition-base: 200ms cubic-bezier(.4, 0, .2, 1);
	--transition-slow: 300ms cubic-bezier(.4, 0, .2, 1);
	--transition-bounce: 400ms cubic-bezier(.34, 1.56, .64, 1);
	/* ── LAYOUT ───────────────────────────────────────────── */
	--container-narrow: 720px;
	--container-base: 960px;
	--container-wide: 1200px;
	--container-full: 1440px;
	--z-base: 1;
	--z-dropdown: 10;
	--z-sticky: 20;
	--z-modal: 1000;
	--z-toast: 9999;
	--bp-sm: 640px;
	--bp-md: 768px;
	--bp-lg: 1024px;
	--bp-xl: 1280px;
}

/* ============================================================
   BASE TYPOGRAPHY (opt-in via .mst-typography wrapper)
   Avoids fighting Elementor/Brizy theme defaults.
   ============================================================ */
.mst-typography {
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--text-primary);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.mst-typography h1, .mst-h1 {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-4xl);
	line-height: var(--lh-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--text-primary);
}

.mst-typography h2, .mst-h2 {
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-2xl);
	line-height: var(--lh-snug);
	letter-spacing: var(--tracking-tight);
	color: var(--text-primary);
}

.mst-typography h3, .mst-h3 {
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-xl);
	line-height: var(--lh-snug);
	color: var(--brand-accent);
}

.mst-typography p {
	margin: 0 0 var(--space-5);
}

.mst-typography a {
	color: var(--brand-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--transition-fast);
}

.mst-typography a:hover {
	color: var(--brand-accent-hover);
}

/* ============================================================
   COMPONENT PRIMITIVES (opt-in classes)
   ============================================================ */

/* Button */
.mst-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	line-height: 1;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	cursor: pointer;
	text-decoration: none;
	transition: all var(--transition-fast);
}

.mst-btn--primary {
	background: var(--brand-accent);
	color: var(--text-on-accent);
}

.mst-btn--primary:hover {
	background: var(--brand-accent-hover);
}

.mst-btn--dark {
	background: var(--mst-black);
	color: var(--mst-white);
}

.mst-btn--dark:hover {
	background: var(--mst-gray-dark);
}

.mst-btn--ghost {
	background: transparent;
	color: var(--mst-black);
	border-color: var(--mst-black);
}

.mst-btn--ghost:hover {
	background: var(--mst-black);
	color: var(--mst-white);
}

.mst-btn--whatsapp {
	background: var(--color-whatsapp);
	color: #fff;
}

.mst-btn--whatsapp:hover {
	background: var(--color-whatsapp-hover);
}

/* Card */
.mst-card {
	background: var(--surface-raised);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.mst-card:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
}

/* Brand endorsement chip — "an MST company" */
.mst-endorse {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--text-muted);
}

.mst-endorse::before {
	content: "";
	width: 18px;
	height: 1px;
	background: var(--border-strong);
}

/* ============================================================
   ARABIC (RTL) SUPPORT
   ============================================================ */
[lang="ar"], [dir="rtl"] {
	font-family: var(--font-arabic);
	line-height: var(--lh-loose);
}

[lang="ar"] .mst-typography, [dir="rtl"] .mst-typography {
	font-family: var(--font-arabic);
}

[lang="ar"] .mst-endorse::before, [dir="rtl"] .mst-endorse::before {
	order: 2;
}