/* =====================================================================================================
   MIRAS brand — CSS
   <link rel="stylesheet" href="PATH/MIRAS-Brand/css/miras-brand.css">   (loads the font too)
   Colors, font, the «Developed by MIRAS» signature, the MIRAS wordmark and a ready About / footer block.
   Everything is prefixed «miras-» so it never clashes with the app's own CSS.
   ===================================================================================================== */
@import url('fonts/ibm-plex-sans-arabic.css');

:root {
  /* core */
  --miras-navy: #050e22;          /* logo background — the brand's main dark */
  --miras-navy-deep: #02070f;
  --miras-navy-soft: #0b1a33;
  --miras-gold: #a8782c;          /* gold on LIGHT backgrounds */
  --miras-gold-on-dark: #e0b769;  /* gold on DARK backgrounds */
  --miras-gold-highlight: #e5b36d;
  --miras-blue: #1c6bc2;          /* the blue of the M mark */
  --miras-blue-bright: #3a8ef0;
  --miras-ink: #0f1720;
  --miras-paper: #f7f4ee;
  /* signature gradient (light theme) */
  --sig-a: #8a6222;
  --sig-b: #c4953f;
  /* gradients */
  --miras-gold-gradient: linear-gradient(135deg, #8a6222 0%, #e0b769 45%, #f1d28c 55%, #a8782c 100%);
  --miras-navy-gradient: radial-gradient(120% 90% at 50% 20%, #0b1a33 0%, #050e22 55%, #02070f 100%);
  /* type */
  --miras-font: 'IBM Plex Sans Arabic', system-ui, 'Segoe UI', Tahoma, sans-serif;
}
/* dark backgrounds: brighter gold */
.miras-dark, :root[data-theme='dark'] { --miras-gold: #e0b769; --sig-a: #c99a48; --sig-b: #f1d28c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --miras-gold: #e0b769; --sig-a: #c99a48; --sig-b: #f1d28c; } }

.miras-font { font-family: var(--miras-font); }

/* «MIRAS» wordmark in text (spaced gold capitals) */
.miras-wordmark { font-family: var(--miras-font); font-weight: 700; letter-spacing: .42em; margin-inline-end: -.42em; color: var(--miras-gold); direction: ltr; unicode-bidi: isolate; }

/* the signature: <img class="miras-signature" src=".../signature/developed-by-miras-gold-on-dark.svg" alt="Developed by MIRAS">
   or the inline SVG made by js/miras-brand.js → mirasSignature()  (uses --sig-a / --sig-b) */
.miras-signature, .miras-sig { display: block; width: min(78%, 280px); height: auto; }
.miras-sig svg { display: block; width: 100%; height: auto; }
.miras-sig .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* logo frames (the logo files have a navy background) */
.miras-logo-card { background: var(--miras-navy); border-radius: 22px; overflow: hidden; display: grid; place-items: center; }
.miras-logo-card img { display: block; width: 100%; height: auto; aspect-ratio: 937 / 860; }
.miras-mark { display: block; width: 52px; height: 52px; border-radius: 14px; }
.miras-mark--round { border-radius: 50%; box-shadow: 0 0 0 2px color-mix(in srgb, var(--miras-gold) 45%, transparent); }

/* ready footer: mark + signature + copyright (templates/footer-miras.html) */
.miras-footer { display: grid; justify-items: center; gap: 10px; padding: 18px 0 8px; text-align: center; font-family: var(--miras-font); }
.miras-footer__copy { margin: 0; font-size: .78rem; opacity: .7; letter-spacing: .02em; direction: ltr; }

/* contact links */
.miras-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.miras-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; text-decoration: none; color: inherit; font: 600 .9rem var(--miras-font); background: color-mix(in srgb, currentColor 8%, transparent); }
.miras-link__ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; }
.miras-link__ic svg { width: 16px; height: 16px; }
.miras-link--mail .miras-link__ic { background: var(--miras-gold); }
.miras-link--instagram .miras-link__ic { background: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888); }
.miras-link--facebook .miras-link__ic { background: #1877f2; }
.miras-link--whatsapp .miras-link__ic { background: #25d366; }
.miras-ltr { direction: ltr; unicode-bidi: isolate; }