/* ============================================================
   Mousto4AI — Web fonts
   Headlines/labels: Thmanyah Serif Display (Black weight supplied)
   Body/UI: DIN Next LT Arabic (Regular weight supplied)
   NOTE: Only one binary per family was provided. Bolder body
   weights fall back to synthetic bold. See readme.md.
   ============================================================ */

@font-face {
  font-family: "Thmanyah Serif Display";
  src: url("../fonts/ThmanyahSerifDisplay-Black.woff2") format("woff2"),
       url("../fonts/ThmanyahSerifDisplay-Black.otf") format("opentype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DIN Next LT Arabic";
  src: url("../fonts/DINNextLTArabic-Regular.woff2") format("woff2"),
       url("../fonts/DINNextLTArabic-Regular.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
/* ============================================================
   Mousto4AI — Color system
   Two themes: Light (white canvas) is the default on :root.
   Dark (pure-black canvas) applies under [data-theme="dark"].
   Add data-theme="dark" to <html> or any container to flip.
   ============================================================ */

:root {
  /* --- Brand palette (fixed reference values, theme-agnostic) --- */
  --brand-cyan:            #22c5ed; /* electric cyan — the signal color   */
  --brand-cyan-bright:     #44d6ff; /* brighter cyan for dark surfaces     */
  --brand-cyan-deep:       #00677e; /* deep teal — accessible action/light */
  --brand-slate:           #376474; /* slate blue — architectural support  */
  --brand-midnight:        #264a66; /* deep navy — heavy grounding accent   */
  --brand-black:           #000000;
  --brand-white:           #ffffff;

  /* ---------- LIGHT THEME (default) ---------- */
  /* Surfaces */
  --color-bg:                    #ffffff;
  --color-surface:               #faf9f9;
  --color-surface-dim:           #dadada;
  --color-surface-bright:        #ffffff;
  --color-surface-lowest:        #ffffff;
  --color-surface-low:           #f4f3f3;
  --color-surface-container:     #eeeeed;
  --color-surface-high:          #e9e8e8;
  --color-surface-highest:       #e3e2e2;

  /* Content on surfaces */
  --color-on-bg:                 #1a1c1c;
  --color-on-surface:            #1a1c1c;
  --color-on-surface-variant:    #3c494d;
  --color-muted:                 #6c797e;

  /* Primary (action) */
  --color-primary:               #00677e;
  --color-on-primary:            #ffffff;
  --color-primary-container:     #22c5ed;
  --color-on-primary-container:  #004e60;

  /* Accent — the vertical cyan bar & signal highlights */
  --color-accent:                #08a5c9;
  --color-on-accent:             #ffffff;

  /* Secondary / tertiary */
  --color-secondary:             #376474;
  --color-on-secondary:          #ffffff;
  --color-secondary-container:   #bbeafc;
  --color-on-secondary-container:#1c4c5b;
  --color-tertiary:              #3f627f;
  --color-on-tertiary:           #ffffff;
  --color-tertiary-container:    #96b9da;
  --color-on-tertiary-container: #264a66;

  /* Semantic */
  --color-error:                 #ba1a1a;
  --color-on-error:              #ffffff;
  --color-error-container:       #ffdad6;
  --color-on-error-container:    #93000a;
  --color-success:               #1f8a5b;
  --color-on-success:            #ffffff;

  /* Lines & structure */
  --color-outline:               #6c797e;
  --color-outline-variant:       #bcc9ce;
  --color-hairline:              #e3e2e2;

  /* Inverse (for spot-contrast chips/badges) */
  --color-inverse-surface:       #2f3131;
  --color-inverse-on-surface:    #f1f0f0;

  /* Technical overlay (dot / line grid) */
  --grid-color:                  rgba(55, 100, 116, 0.14);
  --grid-color-strong:           rgba(55, 100, 116, 0.28);

  /* Focus ring */
  --focus-ring:                  0 0 0 3px rgba(8, 165, 201, 0.35);
}

/* ---------- DARK THEME — pure black canvas ---------- */
[data-theme="dark"] {
  /* Surfaces */
  --color-bg:                    #000000;
  --color-surface:               #0c0e0f;
  --color-surface-dim:           #060707;
  --color-surface-bright:        #24282a;
  --color-surface-lowest:        #000000;
  --color-surface-low:           #121516;
  --color-surface-container:     #171a1b;
  --color-surface-high:          #1f2325;
  --color-surface-highest:       #282d2f;

  /* Content on surfaces */
  --color-on-bg:                 #f1f0f0;
  --color-on-surface:            #f1f0f0;
  --color-on-surface-variant:    #bcc9ce;
  --color-muted:                 #8c999e;

  /* Primary (action) — electric cyan reads as the hero on black */
  --color-primary:               #44d6ff;
  --color-on-primary:            #001f28;
  --color-primary-container:     #004e60;
  --color-on-primary-container:  #b5ebff;

  /* Accent */
  --color-accent:                #44d6ff;
  --color-on-accent:             #001f28;

  /* Secondary / tertiary */
  --color-secondary:             #a0cedf;
  --color-on-secondary:          #001f28;
  --color-secondary-container:   #1c4c5b;
  --color-on-secondary-container:#bbeafc;
  --color-tertiary:              #a7caec;
  --color-on-tertiary:           #001d31;
  --color-tertiary-container:    #264a66;
  --color-on-tertiary-container: #cce5ff;

  /* Semantic */
  --color-error:                 #ffb4ab;
  --color-on-error:              #690005;
  --color-error-container:       #93000a;
  --color-on-error-container:    #ffdad6;
  --color-success:               #6fe0a8;
  --color-on-success:            #00351f;

  /* Lines & structure */
  --color-outline:               #6c797e;
  --color-outline-variant:       #2a3236;
  --color-hairline:              #24282a;

  /* Inverse */
  --color-inverse-surface:       #f1f0f0;
  --color-inverse-on-surface:    #2f3131;

  /* Technical overlay */
  --grid-color:                  rgba(68, 214, 255, 0.10);
  --grid-color-strong:           rgba(68, 214, 255, 0.22);

  /* Focus ring */
  --focus-ring:                  0 0 0 3px rgba(68, 214, 255, 0.40);
}
/* ============================================================
   Mousto4AI — Typography
   Display/labels: Thmanyah Serif Display
   Body/UI:        DIN Next LT Arabic
   Content is Arabic-first, RTL. Sizes are tuned generously
   for social-media legibility.
   ============================================================ */

:root {
  --font-display: "Thmanyah Serif Display", "Times New Roman", serif;
  --font-body: "DIN Next LT Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-label: "Thmanyah Serif Display", "Times New Roman", serif;

  /* Type scale (px) */
  --type-headline-xl:   64px;
  --type-headline-lg:   40px;
  --type-headline-md:   32px;
  --type-title:         24px;
  --type-body-lg:       18px;
  --type-body-md:       16px;
  --type-body-sm:       14px;
  --type-label:         14px;
  --type-quote:         20px;

  /* Line heights */
  --leading-tight:  1.1;
  --leading-snug:   1.2;
  --leading-normal: 1.4;
  --leading-relaxed:1.6;

  /* Tracking */
  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.12em;
}

/* ---- Reusable type classes ---- */
.m-headline-xl {
  font-family: var(--font-display);
  font-size: var(--type-headline-xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.m-headline-lg {
  font-family: var(--font-display);
  font-size: var(--type-headline-lg);
  font-weight: 400;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
.m-headline-md {
  font-family: var(--font-display);
  font-size: var(--type-headline-md);
  font-weight: 400;
  line-height: var(--leading-snug);
}
.m-title {
  font-family: var(--font-display);
  font-size: var(--type-title);
  font-weight: 400;
  line-height: var(--leading-snug);
}
.m-body-lg {
  font-family: var(--font-body);
  font-size: var(--type-body-lg);
  font-weight: 400;
  line-height: var(--leading-relaxed);
}
.m-body-md {
  font-family: var(--font-body);
  font-size: var(--type-body-md);
  font-weight: 400;
  line-height: var(--leading-relaxed);
}
.m-body-sm {
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  font-weight: 400;
  line-height: var(--leading-normal);
}
/* Tracked-out, uppercase (Latin) technical label */
.m-label {
  font-family: var(--font-label);
  font-size: var(--type-label);
  font-weight: 400;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
/* Pull-quote with the signature vertical cyan bar */
.m-quote {
  font-family: var(--font-body);
  font-size: var(--type-quote);
  font-weight: 600;
  line-height: var(--leading-normal);
  border-inline-start: 4px solid var(--color-accent);
  padding-inline-start: 16px;
}
/* ============================================================
   Mousto4AI — Spacing, radii, elevation
   Vertical rhythm on an 8px base unit. Component spacing is
   always a multiple of 8 (8/16/24/32/48/64).
   ============================================================ */

:root {
  /* 8px base unit */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;   /* standard gutter */
  --space-4:  32px;   /* technical grid module */
  --space-6:  48px;
  --space-8:  64px;
  --space-12: 96px;

  /* Layout */
  --gutter:          24px;
  --margin-desktop:  80px;
  --margin-mobile:   20px;
  --container-max:   1440px;
  --grid-columns:    12;    /* @kind other */
  --grid-module:     32px;  /* decorative background grid */

  /* Radii — geometric / pill language */
  --radius-sm:    0.5rem;   /* 8px  */
  --radius:       1rem;     /* 16px — default component */
  --radius-md:    1.5rem;   /* 24px */
  --radius-lg:    2rem;     /* 32px — cards & containers */
  --radius-xl:    3rem;     /* 48px */
  --radius-full:  9999px;   /* pills */

  /* Elevation — depth via tonal layering + hairlines, not heavy shadow */
  --border-hairline: 1px solid var(--color-hairline);
  --border-outline:  1px solid var(--color-outline-variant);
  --border-active:   1px solid var(--color-accent);
  --shadow-soft:   0 1px 2px rgba(16, 24, 28, 0.06);
  --shadow-card:   0 8px 30px rgba(16, 24, 28, 0.08);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* @kind other */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --dur-fast: 120ms;  /* @kind other */
  --dur: 200ms;       /* @kind other */
  --dur-slow: 320ms;  /* @kind other */
}

[data-theme="dark"] {
  --shadow-soft:   0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-card:   0 8px 30px rgba(0, 0, 0, 0.55);
}
/* ============================================================
   Mousto4AI — Backgrounds, base reset & structural motifs
   Two signature technical overlays:
     .m-bg-dots  — 32px dot grid
     .m-bg-lines — 32px line grid
   Plus the oversized outline page-number motif.
   ============================================================ */

/* ---- Base / RTL foundation ---- */
.m-surface {
  background: var(--color-bg);
  color: var(--color-on-bg);
  font-family: var(--font-body);
  direction: rtl;
  text-align: right;
}
.m-ltr { direction: ltr; text-align: left; }

/* ---- Technical background overlays (32px module) ---- */
.m-bg-dots {
  background-color: var(--color-bg);
  background-image: radial-gradient(var(--grid-color) 1.5px, transparent 1.5px);
  background-size: var(--grid-module) var(--grid-module);
  background-position: -1px -1px;
}
.m-bg-lines {
  background-color: var(--color-bg);
  background-image:
    linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
  background-size: var(--grid-module) var(--grid-module);
}

/* Corner dot-cluster anchor (8x8 dots) — decorative technical mark */
.m-dot-anchor {
  width: 56px;
  height: 56px;
  background-image: radial-gradient(var(--grid-color-strong) 1.5px, transparent 1.5px);
  background-size: 8px 8px;
  opacity: 0.9;
  pointer-events: none;
}

/* Small square "technical mark" for card corners */
.m-corner-mark {
  width: 10px;
  height: 10px;
  background: var(--color-accent);
  border-radius: 2px;
}

/* ---- Oversized outline page number (top-left, unobtrusive) ---- */
.m-page-number {
  position: absolute;
  top: var(--space-4);
  left: var(--space-6);
  font-family: var(--font-display);
  font-size: 120px;
  line-height: 0.8;
  font-weight: 400;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-outline-variant);
  text-stroke: 1.5px var(--color-outline-variant);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.04em;
}

/* Vertical cyan axis bar — the recurring sub-header motif */
.m-bar {
  display: inline-block;
  width: 4px;
  align-self: stretch;
  background: var(--color-accent);
  border-radius: var(--radius-full);
}