/* ============================================================================
   MHutatah-DS, the foundation layer.
   Drop this in as-is. Never edit the scales in a consuming project; add a
   project layer on top. Upstream authority: C:\Projects\sanad\static\sanad.css
   ============================================================================ */
*,*::before,*::after{box-sizing:border-box}

:root{
  /* Ink: the entire palette. Ten steps, ground to paper. */
  --ink-0:#08080a;--ink-1:#141417;--ink-2:#202024;--ink-3:#34343a;--ink-4:#5a5a62;
  --ink-5:#8a8a92;--ink-6:#b8b8bf;--ink-7:#dcdce0;--ink-8:#eeeef1;--ink-9:#f8f8fa;

  /* Three voices, plus Arabic. */
  --font-display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --font-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-arabic:"Amiri","Scheherazade New","Traditional Arabic","Geeza Pro","Noto Naskh Arabic","Segoe UI",serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;

  --t-xs:.75rem;--t-sm:.875rem;--t-base:1rem;--t-md:1.15rem;--t-lg:1.5rem;--t-xl:2rem;--t-2xl:2.75rem;--t-3xl:3.75rem;
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2rem;--s7:3rem;--s8:4.5rem;
  --r-sm:8px;--r-md:12px;--r-lg:20px;--r-full:999px;
  --ease:cubic-bezier(.2,.6,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);--d2:220ms;--d3:420ms;
}

/* Semantic roles. Components reach for these, never for --ink-* directly. */
:root,:root[data-theme="light"]{
  --bg:var(--ink-9);--bg-2:var(--ink-8);--surface:#fff;--surface-2:var(--ink-8);
  /* fg-subtle and line-strong sit off the ink scale on purpose: one value cannot
     clear its threshold against a near-white ground and a near-black one at once.
     --ink-5 is 3.23:1 as light text (needs 4.5), --ink-6 is 1.86:1 as a control
     border (needs 3). Derived by test, not by eye. Do not round them back. */
  --fg:var(--ink-1);--fg-muted:var(--ink-4);--fg-subtle:#6a6a70;--line:var(--ink-7);--line-strong:#87878c;
  --accent:var(--ink-0);--accent-fg:var(--ink-9);--focus:var(--ink-2);
  --glass-fill:rgba(255,255,255,.45);--glass-fill-2:rgba(255,255,255,.12);--glass-border:rgba(20,20,23,.12);
  --glass-hi:rgba(255,255,255,.98);--glass-inner:rgba(255,255,255,.65);--glass-sheen:rgba(255,255,255,.8);
  --glass-shadow:0 24px 60px rgba(8,8,10,.14),0 6px 16px rgba(8,8,10,.08);--glass-blur:26px;--glass-sat:180%;
}
:root[data-theme="dark"]{
  --bg:var(--ink-0);--bg-2:#050506;--surface:var(--ink-1);--surface-2:var(--ink-2);
  --fg:var(--ink-9);--fg-muted:var(--ink-6);--fg-subtle:var(--ink-5);--line:var(--ink-2);--line-strong:#6c6c74;
  --accent:var(--ink-9);--accent-fg:var(--ink-0);--focus:var(--ink-7);
  --glass-fill:rgba(255,255,255,.09);--glass-fill-2:rgba(255,255,255,.02);--glass-border:rgba(255,255,255,.16);
  --glass-hi:rgba(255,255,255,.6);--glass-inner:rgba(255,255,255,.12);--glass-sheen:rgba(255,255,255,.4);
  --glass-shadow:0 28px 70px rgba(0,0,0,.6),0 8px 22px rgba(0,0,0,.4);--glass-blur:30px;--glass-sat:160%;
}
/* Untagged page follows the OS. Override per project if the context demands
   a fixed default (Quantum Serpents pins light: it is projected in classrooms). */
@media (prefers-color-scheme:dark){:root:not([data-theme]){
  --bg:var(--ink-0);--bg-2:#050506;--surface:var(--ink-1);--surface-2:var(--ink-2);
  --fg:var(--ink-9);--fg-muted:var(--ink-6);--fg-subtle:var(--ink-5);--line:var(--ink-2);--line-strong:#6c6c74;
  --accent:var(--ink-9);--accent-fg:var(--ink-0);--focus:var(--ink-7);
  --glass-fill:rgba(255,255,255,.09);--glass-fill-2:rgba(255,255,255,.02);--glass-border:rgba(255,255,255,.16);
  --glass-hi:rgba(255,255,255,.6);--glass-inner:rgba(255,255,255,.12);--glass-sheen:rgba(255,255,255,.4);
  --glass-shadow:0 28px 70px rgba(0,0,0,.6),0 8px 22px rgba(0,0,0,.4);--glass-blur:30px;--glass-sat:160%;
}}

html{background:var(--bg)}  /* a hidden body must never flash white */
body{margin:0;font-family:var(--font-sans);font-size:var(--t-base);line-height:1.6;color:var(--fg);
  background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;line-height:1.15;text-wrap:balance}
a{color:var(--fg)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}

.eyebrow{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-muted)}
.muted{color:var(--fg-muted)}.mono{font-family:var(--font-mono)}.tnum{font-variant-numeric:tabular-nums}
.serif-i{font-family:var(--font-display);font-style:italic}

/* Glass. The resting surface. Fallback is mandatory, not optional. */
.glass{position:relative;isolation:isolate;border-radius:var(--r-lg);border:1px solid var(--glass-border);
  background:linear-gradient(160deg,var(--glass-fill) 0%,var(--glass-fill-2) 78%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:var(--glass-shadow),inset 0 1.5px 0 var(--glass-inner),inset 0 -1px 1px rgba(0,0,0,.05);overflow:hidden}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background:linear-gradient(150deg,var(--glass-hi) 0%,transparent 30%,transparent 72%,var(--glass-hi) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;opacity:.85;z-index:2}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;pointer-events:none;
  background:radial-gradient(90% 60% at 12% -8%,var(--glass-sheen) 0%,transparent 42%),
             radial-gradient(70% 50% at 108% 110%,var(--glass-sheen) 0%,transparent 40%);opacity:.55}
.glass>*{position:relative;z-index:3}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:var(--surface)}.glass::before,.glass::after{display:none}}

/* Scrollbars are part of the glass system. Every overflow area, not just the page. */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--fg) 24%,transparent) transparent}
*::-webkit-scrollbar{width:12px;height:12px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{border-radius:var(--r-full);border:3px solid transparent;background-clip:padding-box;
  background-color:color-mix(in srgb,var(--fg) 20%,transparent);
  box-shadow:inset 0 0 0 1px var(--glass-border),inset 1px 1px 0 var(--glass-inner)}
*::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--fg) 36%,transparent)}
*::-webkit-scrollbar-corner{background:transparent}

/* Controls. 44px base height is a floor, not a suggestion. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:44px;padding:0 var(--s5);
  border-radius:var(--r-sm);font-family:var(--font-sans);font-size:var(--t-sm);font-weight:560;letter-spacing:.01em;
  border:1px solid transparent;cursor:pointer;transition:transform .12s,filter var(--d2),background var(--d2),border-color var(--d2)}
.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.45;pointer-events:none}
.btn--primary{background:var(--accent);color:var(--accent-fg)}.btn--primary:hover{filter:brightness(1.1)}
.btn--ghost{background:transparent;color:var(--fg);border-color:var(--line-strong)}.btn--ghost:hover{background:var(--surface-2)}
.btn--lg{height:52px;font-size:var(--t-base);padding:0 var(--s6)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s5)}
.input,.select{height:46px;width:100%;padding:0 var(--s3);background:var(--surface);color:var(--fg);
  font-family:var(--font-sans);font-size:var(--t-base);border:1px solid var(--line-strong);border-radius:var(--r-sm)}
.input:focus,.select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}

/* Arabic / RTL: bump the muted secondary lines only. Never touch the size tokens,
   so primary text keeps its rhythm across every language. Never track Arabic
   script (letter-spacing disconnects the letters), and never set Arabic in the
   mono face (it has no Arabic glyphs and falls back oversized). */
html[dir=rtl] .eyebrow{font-size:1rem;font-family:var(--font-arabic);letter-spacing:0;text-transform:none}

@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}