@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/public/brand/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Noto Sans Arabic, SIL OFL 1.1; license: /public/brand/noto-sans-arabic-license.txt. Self-hosted EN/AR subsets only. */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/public/brand/noto-sans-arabic-1.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/public/brand/noto-sans-arabic-2.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/public/brand/noto-sans-arabic-3.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;
}
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/public/brand/noto-sans-arabic-4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/public/brand/noto-sans-arabic-5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Canonical color and geometry tokens. Public/customer aliases stay light; administration uses its scoped palette. Color literals belong here only. */

:root {
  /* One admin palette; scoped aliases below leave the storefront intact. Exactly 12 --admin-* hex tokens */
  --admin-bg: #f4f6f9;
  --admin-surface: #ffffff;
  --admin-raised: #eef2f6;
  --admin-text: #0f172a;
  --admin-muted: #475569;
  --admin-border: #cbd5e1;
  --admin-control-border: #64748b;
  --admin-primary: #0f766e;
  --admin-on-primary: #ffffff;
  --admin-success: #15803d;
  --admin-success-bg: #dcfce7;
  --admin-success-border: #86efac;
  --admin-warning: #b45309;
  --admin-warning-bg: #fef3c7;
  --admin-warning-border: #fcd34d;
  --admin-danger: #b91c1c;
  --admin-danger-bg: #fee2e2;
  --admin-danger-border: #fca5a5;
  --admin-info: #0284c7;
  --admin-info-bg: #e0f2fe;
  --admin-info-border: #bae6fd;

  /* ---- LIGHT palette (default — exactly 12 hex tokens enforced by a11y.test.js) ---- */
  --light-bg: #f7f7f3;
  --light-bg2: #edf2ff;
  --light-card: #ffffff;
  --light-line: #dce3e8;
  --light-ink: #142536;
  --light-muted: #546476;
  --light-accent: #2557d6;
  --light-accent2: #1d46b8;
  --light-danger: #b91c1c;
  --light-warn: #b45309;
  --light-on-accent: #ffffff;
  --light-on-danger: #ffffff;

  /* ---- DARK palette (exactly 12 hex tokens enforced by a11y.test.js) ---- */
  --dark-bg: #0b1120;
  --dark-bg2: #111827;
  --dark-card: #1e293b;
  --dark-line: #334155;
  --dark-ink: #f8fafc;
  --dark-muted: #94a3b8;
  --dark-accent: #2dd4bf;
  --dark-accent2: #5eead4;
  --dark-danger: #f87171;
  --dark-warn: #fbbf24;
  --dark-on-accent: #042f2e;
  --dark-on-danger: #450a0a;

  /* ---- Shell, surface & developer appwaze tokens (non-colliding prefixes) ---- */
  --studio-art: #e8eef8;
  --studio-window-shadow: 0 18px 40px rgb(16 33 60 / 8%);
  --storefront-header-bg: #ffffff;
  --storefront-header-input: #edf2fa;
  --storefront-header-ink: #17243a;
  --storefront-header-muted: #526079;
  --storefront-control-border: #64748b;
  --storefront-focus-shadow: 0 0 0 3px rgb(37 87 214 / 20%);
  --storefront-action-shadow: 0 1px 3px rgb(23 36 58 / 12%);
  --storefront-card-shadow: 0 2px 8px rgb(23 36 58 / 7%);
  --header-bg: #203348;
  --header-input: #30465b;
  --header-ink: #ffffff;
  --header-muted: #d0dbe3;
  --badge-ok-bg: #e6f4f2;
  --badge-warn-bg: #fef8ee;
  --badge-danger-bg: #fef3f2;
  --badge-info-bg: #eff6ff;
  --badge-info-ink: #1e40af;
  --badge-info-border: #93c5fd;
  --badge-neutral-bg: #f1f5f9;
  --surface-subtle: #eef3f8;
  --surface-code: #0f172a;
  --surface-code-ink: #e2e8f0;
  --surface-code-muted: #94a3b8;
  --surface-code-border: #1e293b;
  --modal-backdrop: rgb(15 23 42 / 60%);
  --hero-gradient: radial-gradient(120% 120% at 90% 10%, rgb(15 118 110 / 14%) 0%, transparent 60%), radial-gradient(80% 80% at 10% 90%, rgb(17 94 89 / 7%) 0%, transparent 50%), linear-gradient(135deg, var(--bg2) 0%, var(--card) 100%);
  --radius-xs: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* ---- Active aliases: no literals, so the contrast scraper ignores them ---- */
  --bg: var(--light-bg);
  --bg2: var(--light-bg2);
  --card: var(--light-card);
  --line: var(--light-line);
  --ink: var(--light-ink);
  --muted: var(--light-muted);
  --accent: var(--light-accent);
  --accent2: var(--light-accent2);
  --danger: var(--light-danger);
  --warn: var(--light-warn);
  --on-accent: var(--light-on-accent);
  --on-danger: var(--light-on-danger);

  /* ---- Shape, space, type ---- */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --gutter: 1rem;
  --shadow-xs: 0 1px 2px rgb(16 24 40 / 4%);
  --shadow-sm: 0 1px 3px rgb(16 24 40 / 6%), 0 1px 2px rgb(16 24 40 / 4%);
  --shadow-md: 0 4px 8px -2px rgb(16 24 40 / 8%), 0 2px 4px -2px rgb(16 24 40 / 4%), 0 0 0 1px rgb(16 24 40 / 4%);
  --shadow-lg: 0 12px 16px -4px rgb(16 24 40 / 8%), 0 4px 6px -2px rgb(16 24 40 / 3%), 0 0 0 1px rgb(16 24 40 / 4%);
  --shadow-xl: 0 20px 24px -4px rgb(16 24 40 / 8%), 0 8px 8px -4px rgb(16 24 40 / 3%);
  --shadow-hover: 0 16px 28px -4px rgb(16 24 40 / 10%), 0 6px 12px -2px rgb(15 118 110 / 8%), 0 0 0 1px rgb(15 118 110 / 14%);
  --btn-primary-shadow: 0 2px 6px 0 rgb(15 118 110 / 25%);
  --btn-primary-hover-shadow: 0 6px 16px 0 rgb(15 118 110 / 35%);
  --shadow-focus: 0 0 0 3px rgb(15 118 110 / 18%);
  --card-glass: rgba(255, 255, 255, 0.84);
  --hero-mesh: radial-gradient(circle at 15% 20%, rgba(15, 118, 110, 0.12), transparent 45%), radial-gradient(circle at 85% 10%, rgba(17, 94, 89, 0.10), transparent 40%);
  --shadow-card: 0 2px 6px -1px rgba(15, 23, 42, 0.05), 0 1px 3px -1px rgba(15, 23, 42, 0.03);
  --shadow-float: 0 14px 28px -6px rgba(15, 23, 42, 0.10), 0 4px 10px -3px rgba(15, 23, 42, 0.05);
  --focus-ring: 0 0 0 3px rgba(15, 118, 110, 0.20), 0 0 0 1.5px var(--accent);

  /* Administration retains its system stack; the frontend opts into the self-hosted face. */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
  --step-0: clamp(0.95rem, 0.92rem + 0.16vw, 1.05rem);
  --step-1: clamp(1.13rem, 1.06rem + 0.34vw, 1.33rem);
  --step-2: clamp(1.35rem, 1.22rem + 0.63vw, 1.73rem);
  --step-3: clamp(1.6rem, 1.38rem + 1.08vw, 2.25rem);
  --step-4: clamp(1.94rem, 1.53rem + 2.05vw, 3rem);

  /* Print-only. Prefixed so the per-palette token counts in the contrast
     test are unaffected, and so no generic alias ever holds a literal. */
  --print-ink: #000000;
  --print-line: #999999;
}

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* clip, not hidden: it contains the full-bleed bands without creating a
     scroll container, which would break the sticky header. */
  overflow-x: clip;
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---- Base elements ---- */
h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-4);
}

h2 {
  font-size: var(--step-2);
}

h3 {
  font-size: var(--step-1);
}

h4 {
  font-size: var(--step-0);
}

p {
  margin: 0 0 1rem;
}

p:last-child {
  margin-block-end: 0;
}

a {
  color: var(--accent2);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
  text-decoration-thickness: 2px;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

hr {
  border: 0;
  border-block-start: 1px solid var(--line);
  margin: 1.5rem 0;
}

ul,
ol {
  margin: 0 0 1rem;
  padding-inline-start: 1.25rem;
}

li+li {
  margin-block-start: 0.25rem;
}

small {
  font-size: var(--step--1);
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-variant-ligatures: none;
}

blockquote {
  margin: 0 0 1rem;
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--line);
  color: var(--muted);
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  text-align: start;
}

fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

legend {
  padding-inline: 0.4rem;
  font-weight: 600;
}

/* One consistent focus ring everywhere, including elements scripts make
   focusable. :focus-visible keeps it off pointer interactions. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/*
 * Print always uses the light palette: printing the dark theme wastes ink and
 * lays down large areas of solid colour. Re-aliasing the tokens here means
 * every component prints correctly, instead of print.css having to override
 * each one it happens to remember.
 */

[data-theme="dark"],
:root[data-theme="dark"] {
  --bg: var(--dark-bg);
  --bg2: var(--dark-bg2);
  --card: var(--dark-card);
  --line: var(--dark-line);
  --ink: var(--dark-ink);
  --muted: var(--dark-muted);
  --accent: var(--dark-accent);
  --accent2: var(--dark-accent2);
  --danger: var(--dark-danger);
  --warn: var(--dark-warn);
  --on-accent: var(--dark-on-accent);
  --on-danger: var(--dark-on-danger);
  --card-glass: rgba(30, 41, 59, 0.82);
  --hero-mesh: radial-gradient(circle at 15% 20%, rgba(45, 212, 191, 0.16), transparent 45%), radial-gradient(circle at 85% 10%, rgba(94, 234, 212, 0.12), transparent 40%);
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-float: 0 20px 36px -8px rgba(0, 0, 0, 0.55);
  --focus-ring: 0 0 0 3px rgba(45, 212, 191, 0.25), 0 0 0 1.5px var(--accent);
}

@media print {
  :root {
    --bg: var(--light-bg);
    --bg2: var(--light-bg);
    --card: var(--light-bg);
    --line: var(--print-line);
    --ink: var(--print-ink);
    --muted: var(--light-muted);
    --accent: var(--light-accent);
    --accent2: var(--light-accent2);
    --danger: var(--light-danger);
    --warn: var(--light-warn);
    --on-accent: var(--light-on-accent);
    --on-danger: var(--light-on-danger);
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
  }
}
/* Accessible labels stay available to assistive technology without visible repetition. */
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }