/* ============================================================
   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:       #000000;
  --mst-white:       #ffffff;

  --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, 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:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.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, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);

  /* ── MOTION ───────────────────────────────────────────── */
  --transition-fast:   120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.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;
}