/* ============================================================
   Ali Al-Masrdi Law Firm — Design System (tokens + fonts + base)
   Imported from the Claude Design project:
   "Ali Al-Masrdi Law Firm Design System".
   Brand teal #43928a · Tajawal single-family · RTL-first.
   ============================================================ */

/* ---------- Fonts: Tajawal (SIL OFL, weights 200–900) ---------- */
@font-face { font-family:"Tajawal"; font-weight:200; font-style:normal; font-display:swap; src:url("../fonts/Tajawal-ExtraLight.ttf") format("truetype"); }
@font-face { font-family:"Tajawal"; font-weight:300; font-style:normal; font-display:swap; src:url("../fonts/Tajawal-Light.ttf") format("truetype"); }
@font-face { font-family:"Tajawal"; font-weight:400; font-style:normal; font-display:swap; src:url("../fonts/Tajawal-Regular.ttf") format("truetype"); }
@font-face { font-family:"Tajawal"; font-weight:500; font-style:normal; font-display:swap; src:url("../fonts/Tajawal-Medium.ttf") format("truetype"); }
@font-face { font-family:"Tajawal"; font-weight:700; font-style:normal; font-display:swap; src:url("../fonts/Tajawal-Bold.ttf") format("truetype"); }
@font-face { font-family:"Tajawal"; font-weight:800; font-style:normal; font-display:swap; src:url("../fonts/Tajawal-ExtraBold.ttf") format("truetype"); }
@font-face { font-family:"Tajawal"; font-weight:900; font-style:normal; font-display:swap; src:url("../fonts/Tajawal-Black.ttf") format("truetype"); }

:root {
  /* --- Brand teal (sampled from logo) --- */
  --teal-50:#eff6f5; --teal-100:#d6e9e6; --teal-200:#aed3ce; --teal-300:#7fbab2;
  --teal-400:#57a49a; --teal-500:#43928a; --teal-600:#3a7d76; --teal-700:#316863;
  --teal-800:#2a5450; --teal-900:#1f3d3a; --teal-950:#132624;

  /* --- Neutral ink (cool slate, faint green cast) --- */
  --ink-0:#ffffff; --ink-50:#f6f8f7; --ink-100:#eceff0; --ink-200:#dde2e2;
  --ink-300:#c3cbcb; --ink-400:#98a3a3; --ink-500:#6d7877; --ink-600:#515b5a;
  --ink-700:#3d4544; --ink-800:#2a3130; --ink-900:#1a1f1e;

  /* --- Parchment --- */
  --sand-50:#faf8f3; --sand-100:#f3efe4; --sand-200:#e7dfcc;

  /* --- Semantic hues --- */
  --green-500:#2f8a5b; --green-50:#e8f4ee;
  --amber-500:#c08a2e; --amber-50:#f7efdd;
  --red-500:#c0473f;   --red-50:#f8e9e8;
  --blue-500:#2f6f9e;  --blue-50:#e7f0f6;

  /* --- Semantic aliases --- */
  --text-strong:var(--ink-900); --text-body:var(--ink-700); --text-muted:var(--ink-500);
  --text-faint:var(--ink-400); --text-on-brand:#fff; --text-link:var(--teal-600); --text-link-hover:var(--teal-800);
  --surface-page:var(--ink-50); --surface-card:#fff; --surface-sunken:var(--ink-100);
  --surface-parchment:var(--sand-50); --surface-brand:var(--teal-500); --surface-brand-strong:var(--teal-900);
  --brand:var(--teal-500); --brand-hover:var(--teal-600); --brand-active:var(--teal-700);
  --brand-subtle:var(--teal-50); --brand-subtle-hover:var(--teal-100); --on-brand:#fff;
  --border-subtle:var(--ink-200); --border-default:var(--ink-300); --border-strong:var(--ink-400);
  --border-brand:var(--teal-500); --divider:var(--ink-200);
  --focus-ring:color-mix(in srgb, var(--teal-500) 45%, transparent);
  --highlight-from-dark:#6ee7d2; --highlight-to-dark:var(--teal-500);
  --highlight-from-light:var(--teal-500); --highlight-to-light:var(--teal-800);
  --success:var(--green-500); --success-subtle:var(--green-50);
  --warning:var(--amber-500); --warning-subtle:var(--amber-50);
  --danger:var(--red-500); --danger-subtle:var(--red-50);
  --info:var(--blue-500); --info-subtle:var(--blue-50);

  /* --- Typography --- */
  --font-sans:"Tajawal", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-display:"Tajawal", ui-sans-serif, system-ui, sans-serif;
  --fw-extralight:200; --fw-light:300; --fw-regular:400; --fw-medium:500;
  --fw-bold:700; --fw-extrabold:800; --fw-black:900;
  --fs-display:64px; --fs-h1:48px; --fs-h2:36px; --fs-h3:28px; --fs-h4:22px;
  --fs-title:18px; --fs-body-lg:18px; --fs-body:16px; --fs-body-sm:14px;
  --fs-caption:13px; --fs-overline:12px;
  --lh-tight:1.1; --lh-snug:1.25; --lh-normal:1.5; --lh-relaxed:1.7;
  --ls-tight:-0.02em; --ls-normal:0; --ls-wide:0.04em; --ls-overline:0.14em;

  /* --- Spacing (4px grid) --- */
  --sp-0:0; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  --sp-20:80px; --sp-24:96px; --sp-32:128px;

  /* --- Radius --- */
  --radius-xs:3px; --radius-sm:5px; --radius-md:8px; --radius-lg:12px; --radius-xl:18px; --radius-pill:999px;

  /* --- Borders --- */
  --bw-hairline:1px; --bw-thick:2px; --bw-rule:3px;

  /* --- Shadows --- */
  --shadow-xs:0 1px 2px rgba(26,31,30,.06);
  --shadow-sm:0 1px 3px rgba(26,31,30,.08), 0 1px 2px rgba(26,31,30,.04);
  --shadow-md:0 4px 12px rgba(26,31,30,.08), 0 2px 4px rgba(26,31,30,.04);
  --shadow-lg:0 12px 28px rgba(26,31,30,.12), 0 4px 8px rgba(26,31,30,.05);
  --shadow-brand:0 8px 24px rgba(67,146,138,.28);

  /* --- Motion --- */
  --ease-standard:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:340ms;

  /* --- Layout --- */
  --container-max:1200px; --container-narrow:760px; --gutter:var(--sp-6); --header-h:76px;
}

/* ---------- Standalone base reset (previously inherited from parent theme) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }
button, [type="button"], [type="submit"], [type="reset"] { cursor: pointer; }
img, svg, video { vertical-align: middle; }

/* ---------- Base element styling (scoped to the theme body) ---------- */
body.amx-body {
  margin:0;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
  font-family:var(--font-sans);
  font-weight:var(--fw-regular);
  font-size:var(--fs-body);
  line-height:var(--lh-normal);
  color:var(--text-body);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.amx-body h1, body.amx-body h2, body.amx-body h3,
body.amx-body h4, body.amx-body h5, body.amx-body h6 {
  margin:0; font-family:var(--font-display); color:var(--text-strong);
  line-height:var(--lh-snug); letter-spacing:var(--ls-tight); font-weight:var(--fw-bold);
}
body.amx-body p { margin:0; }
body.amx-body a { color:var(--text-link); text-decoration:none; transition:color var(--dur-fast) var(--ease-standard); }
body.amx-body a:hover { color:var(--text-link-hover); }
body.amx-body a:focus-visible { outline:var(--bw-thick) solid var(--focus-ring); outline-offset:2px; border-radius:var(--radius-xs); }
body.amx-body img { max-width:100%; height:auto; }
body.amx-body ::selection { background:var(--teal-100); color:var(--teal-900); }
body.amx-body hr { border:0; border-top:var(--bw-hairline) solid var(--divider); margin:var(--sp-6) 0; }

/* Eyebrow / overline */
.amx-body .overline, .amx-body .amx-eyebrow {
  display:inline-block; font-size:var(--fs-overline); font-weight:var(--fw-extrabold);
  letter-spacing:var(--ls-overline); text-transform:uppercase; color:var(--brand);
}