@import url('/assets/asal/aasal-v2-legacy-bridge.css');
/*
 * آصال V2 — semantic visual tokens
 * Design authority: docs/ai/AASAL_VISUAL_LEGACY_CONSTITUTION_20260901_AR.md
 * Web4 authority: themes govern the full composition, including the ambient world.
 */
:root {
  --a2-font-ui: "Noto Kufi Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --a2-radius-xs: 10px;
  --a2-radius-sm: 14px;
  --a2-radius-md: 20px;
  --a2-radius-lg: 28px;
  --a2-radius-xl: 36px;
  --a2-radius-pill: 999px;
  --a2-space-1: .25rem;
  --a2-space-2: .5rem;
  --a2-space-3: .75rem;
  --a2-space-4: 1rem;
  --a2-space-5: 1.5rem;
  --a2-space-6: 2rem;
  --a2-space-7: 3rem;
  --a2-space-8: 4.5rem;
  --a2-shell-max: 1600px;
  --a2-content-wide: 1440px;
  --a2-content-max: 1180px;
  --a2-reading-max: 58rem;
  --a2-document-max: 900px;
  --a2-touch: 44px;
  --a2-touch-primary: 52px;
  --a2-touch-nav: 56px;
  --a2-disabled-opacity: .52;
  --a2-focus-width: 2px;
  --a2-focus-offset: 3px;
  --a2-ease: cubic-bezier(.16, 1, .3, 1);
  --a2-ease-standard: cubic-bezier(.2, 0, 0, 1);
  --a2-dur-fast: 140ms;
  --a2-dur: 220ms;
  --a2-dur-slow: 360ms;
  --z-base: 0;
  --z-content: 1;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-drawer: 350;
  --z-dialog: 400;
  --z-toast: 500;
  --z-critical-alert: 600;
}

html[data-asal-theme-preference="midnight-gold"] .asal-shell,
[data-aasal-v2-theme="midnight-gold"] {
  --a2-theme-name: "ليل آصال";
  --a2-bg: #100c0a;
  --a2-text: #fbf4e7;
  --a2-text-muted: #c9b79b;
  --a2-text-faint: #9f8e76;
  --a2-ambient-text: #fbf4e7;
  --a2-ambient-text-muted: #c9b79b;
  --a2-ambient-text-faint: #9f8e76;
  --a2-ambient-accent: #f1cf91;
  --a2-accent: #d4a95d;
  --a2-accent-hi: #f1cf91;
  --a2-on-accent: #20160a;
  --a2-surface-0: rgb(17 13 11 / 82%);
  --a2-surface-1: rgb(29 23 19 / 93%);
  --a2-surface-2: rgb(38 29 22 / 98%);
  --a2-surface-solid: #281e17;
  --a2-edge: rgb(229 194 129 / 20%);
  --a2-edge-strong: rgb(229 194 129 / 34%);
  --a2-glow-primary: rgb(212 169 93 / 22%);
  --a2-glow-secondary: rgb(92 133 166 / 10%);
  --a2-nav: rgb(22 17 14 / 96%);
  --a2-reader: #241c16;
  --a2-success: #6fb58c;
  --a2-danger: #da7770;
  --a2-warning: #e1b86b;
  --a2-info: #82b8d8;
  --a2-focus: #f1cf91;
  --a2-shadow-1: 0 10px 30px rgb(0 0 0 / 16%);
  --a2-shadow-2: 0 24px 70px rgb(0 0 0 / 26%);
  --a2-shadow-dialog: 0 34px 100px rgb(0 0 0 / 42%);
  --ankarawi-bg-deep: #0c0806;
  --ankarawi-bg-mid: #17100c;
  --ankarawi-bg-raised: #25170f;
  --ankarawi-line-gold: rgb(229 194 129 / 21%);
  --ankarawi-line-blue: rgb(111 143 166 / 8%);
  --ankarawi-particle: rgb(248 233 203 / 10%);
  --ankarawi-haze-gold: rgb(212 169 93 / 20%);
  --ankarawi-haze-blue: rgb(92 133 166 / 7%);
  --ankarawi-vignette: rgb(0 0 0 / 18%);
}

html[data-asal-theme-preference="midnight-blue"] .asal-shell,
[data-aasal-v2-theme="midnight-blue"] {
  --a2-theme-name: "سَحَر آصال";
  --a2-bg: #08111c;
  --a2-text: #f2f8fc;
  --a2-text-muted: #a9bfd0;
  --a2-text-faint: #7e98ad;
  --a2-ambient-text: #f2f8fc;
  --a2-ambient-text-muted: #a9bfd0;
  --a2-ambient-text-faint: #7e98ad;
  --a2-ambient-accent: #d7edf9;
  --a2-accent: #7ca9c8;
  --a2-accent-hi: #d7edf9;
  --a2-on-accent: #07121b;
  --a2-surface-0: rgb(7 18 29 / 82%);
  --a2-surface-1: rgb(11 28 45 / 93%);
  --a2-surface-2: rgb(14 35 55 / 98%);
  --a2-surface-solid: #0e2337;
  --a2-edge: rgb(159 205 233 / 20%);
  --a2-edge-strong: rgb(159 205 233 / 34%);
  --a2-glow-primary: rgb(124 169 200 / 23%);
  --a2-glow-secondary: rgb(212 169 93 / 10%);
  --a2-nav: rgb(7 20 33 / 96%);
  --a2-reader: #0e2234;
  --a2-success: #7cc3a5;
  --a2-danger: #e18383;
  --a2-warning: #d6ad6a;
  --a2-info: #8fc9e8;
  --a2-focus: #d7edf9;
  --a2-shadow-1: 0 10px 30px rgb(0 0 0 / 18%);
  --a2-shadow-2: 0 24px 72px rgb(0 5 14 / 30%);
  --a2-shadow-dialog: 0 36px 104px rgb(0 5 14 / 50%);
  --ankarawi-bg-deep: #06101a;
  --ankarawi-bg-mid: #0a1928;
  --ankarawi-bg-raised: #0e263b;
  --ankarawi-line-gold: rgb(184 146 80 / 8%);
  --ankarawi-line-blue: rgb(159 205 233 / 20%);
  --ankarawi-particle: rgb(226 242 252 / 10%);
  --ankarawi-haze-gold: rgb(184 146 80 / 7%);
  --ankarawi-haze-blue: rgb(124 169 200 / 22%);
  --ankarawi-vignette: rgb(0 5 14 / 20%);
}

html[data-asal-theme-preference="parchment"] .asal-shell,
[data-aasal-v2-theme="parchment"] {
  --a2-theme-name: "رِواق آصال";
  --a2-bg: #f2eadf;
  --a2-text: #35271f;
  --a2-text-muted: #665344;
  --a2-text-faint: #806e60;
  /* Web4 parchment is a complete light composition, including its ambient canvas. */
  --a2-ambient-text: #35271f;
  --a2-ambient-text-muted: #665344;
  --a2-ambient-text-faint: #806e60;
  --a2-ambient-accent: #7a4d22;
  --a2-accent: #9b6935;
  --a2-accent-hi: #5f3b19;
  --a2-on-accent: #fffdf8;
  --a2-surface-0: rgb(247 241 232 / 96%);
  --a2-surface-1: rgb(255 253 249 / 99%);
  --a2-surface-2: #fffdf9;
  --a2-surface-solid: #fffdf9;
  --a2-edge: rgb(93 63 33 / 18%);
  --a2-edge-strong: rgb(93 63 33 / 32%);
  --a2-glow-primary: rgb(164 111 53 / 10%);
  --a2-glow-secondary: rgb(91 116 132 / 5%);
  --a2-nav: rgb(255 253 249 / 99%);
  --a2-reader: #fffdf9;
  --a2-success: #3d805e;
  --a2-danger: #a3423e;
  --a2-warning: #87591f;
  --a2-info: #3f6680;
  --a2-focus: #5f3b19;
  --a2-shadow-1: 0 10px 30px rgb(101 72 40 / 10%);
  --a2-shadow-2: 0 24px 70px rgb(101 72 40 / 14%);
  --a2-shadow-dialog: 0 34px 90px rgb(101 72 40 / 20%);
  --ankarawi-bg-deep: #e7dac7;
  --ankarawi-bg-mid: #f2eadf;
  --ankarawi-bg-raised: #fffaf2;
  --ankarawi-line-gold: rgb(122 85 41 / 13%);
  --ankarawi-line-blue: rgb(91 116 132 / 7%);
  --ankarawi-particle: rgb(82 56 31 / 8%);
  --ankarawi-haze-gold: rgb(185 132 59 / 11%);
  --ankarawi-haze-blue: rgb(91 116 132 / 5%);
  --ankarawi-vignette: rgb(82 56 31 / 5%);
  --ankarawi-ambient-canvas-opacity: .18;
  --ankarawi-ambient-haze-opacity: .42;
  --ankarawi-ambient-fiber-opacity: .10;
  --ankarawi-ambient-orbit-opacity: .13;
  --ankarawi-ambient-grain-opacity: .07;
  --ankarawi-ambient-veil-opacity: .24;
}

/* Web4 semantic composition layer. This is the target authority; legacy names
 * continue only through aasal-v2-legacy-bridge.css until their callers migrate. */
.a2-shell {
  --a2-control-bg: var(--a2-surface-1);
  --a2-control-bg-hover: color-mix(in srgb, var(--a2-surface-2) 76%, var(--a2-accent) 6%);
  --a2-control-border: var(--a2-edge);
  --a2-control-text: var(--a2-text);
  --a2-selected-bg: color-mix(in srgb, var(--a2-accent) 16%, var(--a2-surface-1));
  --a2-selected-text: var(--a2-accent-hi);
  --a2-overlay: color-mix(in srgb, var(--a2-bg) 54%, transparent);
  --a2-overlay-solid: color-mix(in srgb, var(--a2-bg) 88%, var(--a2-text) 12%);
  --a2-border: var(--a2-edge);
  --a2-divider: var(--a2-edge);
  --a2-hover-bg: var(--a2-control-bg-hover);
  --a2-disabled-text: color-mix(in srgb, var(--a2-text) 52%, transparent);
  --a2-dialog: var(--a2-surface-solid);
  --a2-drawer: var(--a2-surface-solid);
  --a2-map-surface: var(--a2-surface-solid);
  --a2-map-chrome: var(--a2-surface-1);
  --a2-audio-dock: var(--a2-nav);
  --a2-page-gutter: clamp(12px, 2vw, 28px);
}

.a2-page {
  width: min(100%, var(--a2-content-max));
  margin-inline: auto;
  min-width: 0;
}
.a2-page-wide {
  width: min(100%, var(--a2-content-wide));
  margin-inline: auto;
  min-width: 0;
}
.a2-page-immersive {
  width: 100%;
  min-width: 0;
}
.a2-page-reading {
  width: min(100%, var(--a2-reading-max));
  margin-inline: auto;
  min-width: 0;
}
.a2-page-document {
  width: min(100%, var(--a2-document-max));
  margin-inline: auto;
  min-width: 0;
}

.a2-control {
  min-height: var(--a2-touch);
  border: 1px solid var(--a2-control-border);
  border-radius: var(--a2-radius-sm);
  background: var(--a2-control-bg);
  color: var(--a2-control-text);
  transition:
    background var(--a2-dur-fast) var(--a2-ease-standard),
    border-color var(--a2-dur-fast) var(--a2-ease-standard),
    color var(--a2-dur-fast) var(--a2-ease-standard);
}
.a2-control:hover { background: var(--a2-control-bg-hover); }
.a2-control[aria-pressed="true"],
.a2-control[aria-selected="true"],
.a2-control[data-selected="true"] {
  border-color: var(--a2-accent);
  background: var(--a2-selected-bg);
  color: var(--a2-selected-text);
}

.a2-functional-surface {
  border: 1px solid var(--a2-edge);
  border-radius: var(--a2-radius-lg);
  background: var(--a2-surface-1);
  box-shadow: var(--a2-shadow-1);
  backdrop-filter: blur(6px) saturate(1.03);
}

.a2-reader-surface {
  max-width: var(--a2-reading-max);
  margin-inline: auto;
  border: 1px solid var(--a2-edge);
  border-radius: var(--a2-radius-xl);
  background: var(--a2-reader);
  box-shadow: var(--a2-shadow-2);
}

.a2-float-nav {
  border: 1px solid var(--a2-edge);
  background: var(--a2-nav);
  box-shadow: var(--a2-shadow-1);
  backdrop-filter: blur(8px) saturate(1.04);
}

.a2-focus-ring:focus-visible,
.a2-functional-surface :where(a,button,input,select,textarea):focus-visible {
  outline: var(--a2-focus-width) solid var(--a2-accent-hi);
  outline-offset: var(--a2-focus-offset);
}

.asal-shell :where([aria-disabled="true"],:disabled) {
  opacity: var(--a2-disabled-opacity);
}
.asal-shell :where(a[aria-disabled="true"],button:disabled) {
  cursor: not-allowed;
}
.asal-shell a[aria-disabled="true"] {
  pointer-events: none;
}

html[data-asal-theme-preference="parchment"] .asal-shell :where(.a2-functional-surface,.a2-float-nav) {
  backdrop-filter: none;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --a2-dur-fast: 0ms;
    --a2-dur: 0ms;
    --a2-dur-slow: 0ms;
  }
}

@media (forced-colors: active) {
  .a2-functional-surface,
  .a2-reader-surface,
  .a2-float-nav {
    border: 1px solid CanvasText;
    box-shadow: none;
    backdrop-filter: none;
  }
  .a2-focus-ring:focus-visible,
  .a2-functional-surface :where(a,button,input,select,textarea):focus-visible {
    outline-color: Highlight;
  }
}