/*
 * Tahfeezm UI Foundation v1
 *
 * The file is intentionally ordered as tokens -> base -> components -> layouts
 * -> compatibility. New work should use the ui-* contracts below. Existing
 * screens are connected through the compatibility adapters at the end so they
 * can migrate one component at a time without a visual reset.
 */

/* ========================================================================== 
   1. TOKENS
   ========================================================================== */

[data-ui-foundation] {
  color-scheme: light;

  /* Brand and neutral palette. */
  --ui-color-white: #ffffff;
  --ui-color-brand-50: #f0fdfa;
  --ui-color-brand-100: #ccfbf1;
  --ui-color-brand-200: #99f6e4;
  --ui-color-brand-500: #14b8a6;
  --ui-color-brand-600: #0d9488;
  --ui-color-brand-700: #0f766e;
  --ui-color-brand-750: #08766d;
  --ui-color-brand-800: #115e59;
  --ui-color-brand-900: #134e4a;
  --ui-color-accent-50: #fffbeb;
  --ui-color-accent-500: #f59e0b;
  --ui-color-accent-700: #b45309;
  --ui-color-neutral-25: #fcfdfd;
  --ui-color-neutral-50: #f8fafc;
  --ui-color-neutral-100: #f1f5f9;
  --ui-color-neutral-200: #e2e8f0;
  --ui-color-neutral-300: #cbd5e1;
  --ui-color-neutral-400: #94a3b8;
  --ui-color-neutral-500: #64748b;
  --ui-color-neutral-600: #475569;
  --ui-color-neutral-700: #334155;
  --ui-color-neutral-800: #1e293b;
  --ui-color-neutral-900: #0f172a;

  /* Semantic colors are pairs: strong text/action, soft background, border. */
  --ui-color-success: #047857;
  --ui-color-success-soft: #ecfdf5;
  --ui-color-success-border: #a7f3d0;
  --ui-color-warning: #a16207;
  --ui-color-warning-soft: #fffbeb;
  --ui-color-warning-border: #fde68a;
  --ui-color-danger: #b91c1c;
  --ui-color-danger-soft: #fef2f2;
  --ui-color-danger-border: #fecaca;
  --ui-color-info: #0369a1;
  --ui-color-info-soft: #f0f9ff;
  --ui-color-info-border: #bae6fd;

  /* Typography. */
  --ui-font-sans: "Cairo", system-ui, sans-serif;
  --ui-font-heading: "Cairo", system-ui, sans-serif;
  --ui-font-quran: "Amiri", serif;
  --ui-font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
  --ui-font-weight-regular: 400;
  --ui-font-weight-medium: 500;
  --ui-font-weight-semibold: 600;
  --ui-font-weight-bold: 700;
  --ui-font-weight-extrabold: 800;
  --ui-text-xs: 0.75rem;
  --ui-text-sm: 0.875rem;
  --ui-text-md: 1rem;
  --ui-text-lg: 1.125rem;
  --ui-text-xl: 1.25rem;
  --ui-text-2xl: clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem);
  --ui-text-3xl: clamp(1.75rem, 1.4rem + 1.25vw, 2.5rem);
  --ui-leading-tight: 1.25;
  --ui-leading-normal: 1.65;
  --ui-leading-relaxed: 1.85;

  /* Spacing follows a 4px base rhythm. */
  --ui-space-0: 0;
  --ui-space-0-5: 0.125rem;
  --ui-space-1: 0.25rem;
  --ui-space-1-5: 0.375rem;
  --ui-space-2: 0.5rem;
  --ui-space-3: 0.75rem;
  --ui-space-4: 1rem;
  --ui-space-5: 1.25rem;
  --ui-space-6: 1.5rem;
  --ui-space-8: 2rem;
  --ui-space-10: 2.5rem;
  --ui-space-12: 3rem;
  --ui-space-16: 4rem;
  --ui-space-fluid: clamp(1rem, 0.75rem + 1vw, 2rem);

  /* Shape, elevation, controls, and stacking. */
  --ui-radius-xs: 0.5rem;
  --ui-radius-sm: 0.75rem;
  --ui-radius-md: 1rem;
  --ui-radius-lg: 1.25rem;
  --ui-radius-xl: 1.5rem;
  --ui-radius-pill: 999px;
  --ui-border-width: 1px;
  --ui-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --ui-shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.07);
  --ui-shadow-md: 0 12px 32px rgba(15, 23, 42, 0.09);
  --ui-shadow-lg: 0 24px 64px rgba(15, 23, 42, 0.14);
  --ui-focus-ring: 0 0 0 4px rgba(13, 148, 136, 0.2);
  --ui-control-height-sm: 2.25rem;
  --ui-control-height-md: 2.75rem;
  --ui-control-height-lg: 3.25rem;
  --ui-control-inline-padding: 1rem;
  --ui-z-base: 0;
  --ui-z-raised: 10;
  --ui-z-sticky: 100;
  --ui-z-overlay: 1000;
  --ui-z-dialog: 1050;
  --ui-z-toast: 1100;
  --ui-duration-fast: 120ms;
  --ui-duration-base: 200ms;
  --ui-duration-slow: 340ms;
  --ui-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ui-ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
  --ui-container-sm: 45rem;
  --ui-container-md: 64rem;
  --ui-container-lg: 80rem;
  --ui-container-xl: 92.5rem;

  /* Default surface contract. Surface adapters may point at legacy tokens. */
  --ui-surface-canvas: var(--ui-color-neutral-50);
  --ui-surface-card: var(--ui-color-white);
  --ui-surface-soft: var(--ui-color-neutral-100);
  --ui-surface-text: var(--ui-color-neutral-900);
  --ui-surface-text-soft: var(--ui-color-neutral-600);
  --ui-surface-muted: var(--ui-color-neutral-500);
  --ui-surface-border: var(--ui-color-neutral-200);
  --ui-surface-border-strong: var(--ui-color-neutral-300);
  --ui-surface-brand: var(--ui-color-brand-600);
  --ui-surface-brand-hover: var(--ui-color-brand-700);
  --ui-surface-brand-soft: var(--ui-color-brand-50);
}

/* ========================================================================== 
   2. BASE
   ========================================================================== */

body[data-ui-foundation] {
  min-inline-size: 20rem;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[data-ui-foundation],
[data-ui-foundation] *,
[data-ui-foundation] *::before,
[data-ui-foundation] *::after {
  box-sizing: border-box;
}

[data-ui-foundation] :where(img, svg, video, canvas) {
  max-inline-size: 100%;
}

[data-ui-foundation] :where(button, input, select, textarea) {
  font: inherit;
}

[data-ui-foundation] :where(button, [role="button"], summary) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

[data-ui-foundation] :where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
  outline: 3px solid var(--ui-surface-brand);
  outline-offset: 3px;
  box-shadow: var(--ui-focus-ring);
}

[data-ui-foundation] :where([id$="main-content"], .ui-skip-target) {
  scroll-margin-block-start: var(--ui-space-4);
}

[data-ui-foundation] :where([id$="main-content"], .ui-skip-target):focus {
  outline: none;
}

[data-ui-foundation] ::selection {
  color: var(--ui-color-neutral-900);
  background: var(--ui-color-brand-200);
}

[data-ui-foundation] :where([disabled], [aria-disabled="true"]) {
  cursor: not-allowed;
}

[data-ui-foundation] :where([aria-busy="true"]) {
  cursor: progress;
}

.ui-skip-link {
  position: fixed;
  inset-block-start: var(--ui-space-3);
  inset-inline-start: var(--ui-space-3);
  z-index: var(--ui-z-toast);
  display: inline-flex;
  align-items: center;
  min-block-size: var(--ui-control-height-md);
  padding: var(--ui-space-2) var(--ui-space-4);
  color: var(--ui-color-white);
  background: var(--ui-color-neutral-900);
  border: 2px solid var(--ui-color-white);
  border-radius: var(--ui-radius-sm);
  box-shadow: var(--ui-shadow-md);
  font-family: var(--ui-font-sans);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-font-weight-bold);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--ui-space-4)));
  transition: transform var(--ui-duration-fast) var(--ui-ease-standard);
}

.ui-skip-link:focus,
.ui-skip-link:focus-visible {
  transform: translateY(0);
}

.ui-skip-target {
  display: block;
  inline-size: 0;
  block-size: 0;
  overflow: hidden;
}

.ui-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ui-heading {
  margin: 0;
  color: var(--ui-surface-text);
  font-family: var(--ui-font-heading);
  font-size: var(--ui-text-2xl);
  font-weight: var(--ui-font-weight-extrabold);
  line-height: var(--ui-leading-tight);
  text-wrap: balance;
}

.ui-heading[data-size="lg"] {
  font-size: var(--ui-text-3xl);
}

.ui-text {
  margin: 0;
  color: var(--ui-surface-text-soft);
  font-family: var(--ui-font-sans);
  font-size: var(--ui-text-md);
  line-height: var(--ui-leading-normal);
}

.ui-caption {
  color: var(--ui-surface-muted);
  font-size: var(--ui-text-sm);
  line-height: var(--ui-leading-normal);
}

.ui-prose {
  max-inline-size: 70ch;
  color: var(--ui-surface-text-soft);
  line-height: var(--ui-leading-relaxed);
}

.ui-prose :where(h1, h2, h3, h4) {
  color: var(--ui-surface-text);
  font-family: var(--ui-font-heading);
  line-height: var(--ui-leading-tight);
}

.ui-link {
  color: var(--ui-surface-brand-hover);
  font-weight: var(--ui-font-weight-semibold);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

@media (prefers-reduced-motion: reduce) {
  [data-ui-foundation],
  [data-ui-foundation] :where(*, *::before, *::after) {
    scroll-behavior: auto;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-delay: 0ms;
    transition-duration: 0.01ms;
  }
}

/* ========================================================================== 
   3. COMPONENT CONTRACTS
   ========================================================================== */

/* Button: .ui-button or the opt-in transition alias .ui-compat-button. */
[data-ui-foundation] :where(.ui-button, .ui-compat-button, [data-ui-button]) {
  --ui-button-bg: var(--ui-surface-brand);
  --ui-button-bg-hover: var(--ui-surface-brand-hover);
  --ui-button-border: var(--ui-surface-brand);
  --ui-button-text: var(--ui-color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  min-block-size: var(--ui-control-height-md);
  padding-inline: var(--ui-control-inline-padding);
  color: var(--ui-button-text);
  background: var(--ui-button-bg);
  border: var(--ui-border-width) solid var(--ui-button-border);
  border-radius: var(--ui-radius-sm);
  font-family: var(--ui-font-sans);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-font-weight-bold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--ui-duration-fast) var(--ui-ease-standard),
    background-color var(--ui-duration-fast) var(--ui-ease-standard),
    border-color var(--ui-duration-fast) var(--ui-ease-standard),
    box-shadow var(--ui-duration-fast) var(--ui-ease-standard),
    transform var(--ui-duration-fast) var(--ui-ease-standard);
}

[data-ui-foundation] :where(.ui-button, .ui-compat-button, [data-ui-button])[data-variant="secondary"] {
  --ui-button-bg: var(--ui-surface-card);
  --ui-button-bg-hover: var(--ui-surface-soft);
  --ui-button-border: var(--ui-surface-border-strong);
  --ui-button-text: var(--ui-surface-text);
}

[data-ui-foundation] :where(.ui-button, .ui-compat-button, [data-ui-button])[data-variant="ghost"] {
  --ui-button-bg: transparent;
  --ui-button-bg-hover: var(--ui-surface-brand-soft);
  --ui-button-border: transparent;
  --ui-button-text: var(--ui-surface-brand-hover);
}

[data-ui-foundation] :where(.ui-button, .ui-compat-button, [data-ui-button])[data-variant="danger"] {
  --ui-button-bg: var(--ui-color-danger);
  --ui-button-bg-hover: #991b1b;
  --ui-button-border: var(--ui-color-danger);
  --ui-button-text: var(--ui-color-white);
}

[data-ui-foundation] :where(.ui-button, .ui-compat-button, [data-ui-button])[data-size="sm"] {
  min-block-size: var(--ui-control-height-sm);
  padding-inline: var(--ui-space-3);
  font-size: var(--ui-text-xs);
}

[data-ui-foundation] :where(.ui-button, .ui-compat-button, [data-ui-button])[data-size="lg"] {
  min-block-size: var(--ui-control-height-lg);
  padding-inline: var(--ui-space-5);
  font-size: var(--ui-text-md);
}

[data-ui-foundation] :where(.ui-button, .ui-compat-button, [data-ui-button])[data-icon-only] {
  inline-size: var(--ui-control-height-md);
  padding-inline: 0;
}

[data-ui-foundation] :where(.ui-button, .ui-compat-button, [data-ui-button]):where(:disabled, [aria-disabled="true"]) {
  opacity: 0.56;
  pointer-events: none;
}

@media (hover: hover) {
  [data-ui-foundation] :where(.ui-button, .ui-compat-button, [data-ui-button]):not(:disabled, [aria-disabled="true"]):hover {
    color: var(--ui-button-text);
    background: var(--ui-button-bg-hover);
    border-color: var(--ui-button-bg-hover);
    transform: translateY(-1px);
  }
}

/* Field: wrapper, label, control, supporting text, and invalid state. */
.ui-field {
  display: grid;
  gap: var(--ui-space-2);
  min-inline-size: 0;
}

.ui-field__label {
  color: var(--ui-surface-text);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-font-weight-bold);
  line-height: var(--ui-leading-normal);
}

.ui-field__required {
  color: var(--ui-color-danger);
}

[data-ui-foundation] :where(.ui-input, .ui-select, .ui-textarea, .ui-compat-field, [data-ui-field]) {
  inline-size: 100%;
  min-block-size: var(--ui-control-height-md);
  padding: var(--ui-space-2) var(--ui-space-3);
  color: var(--ui-surface-text);
  background: var(--ui-surface-card);
  border: var(--ui-border-width) solid var(--ui-surface-border-strong);
  border-radius: var(--ui-radius-sm);
  caret-color: var(--ui-surface-brand);
  font-size: var(--ui-text-md);
  line-height: var(--ui-leading-normal);
  transition: border-color var(--ui-duration-fast) var(--ui-ease-standard),
    box-shadow var(--ui-duration-fast) var(--ui-ease-standard),
    background-color var(--ui-duration-fast) var(--ui-ease-standard);
}

[data-ui-foundation] :where(.ui-textarea, textarea.ui-compat-field, textarea[data-ui-field]) {
  min-block-size: 7rem;
  resize: vertical;
}

[data-ui-foundation] :where(.ui-input, .ui-select, .ui-textarea, .ui-compat-field, [data-ui-field])::placeholder {
  color: var(--ui-surface-muted);
  opacity: 1;
}

[data-ui-foundation] :where(.ui-input, .ui-select, .ui-textarea, .ui-compat-field, [data-ui-field]):hover:not(:disabled) {
  border-color: var(--ui-surface-brand);
}

[data-ui-foundation] :where(.ui-input, .ui-select, .ui-textarea, .ui-compat-field, [data-ui-field])[aria-invalid="true"] {
  border-color: var(--ui-color-danger);
  background: var(--ui-color-danger-soft);
}

.ui-field__help,
.ui-field__error {
  margin: 0;
  font-size: var(--ui-text-xs);
  line-height: var(--ui-leading-normal);
}

.ui-field__help {
  color: var(--ui-surface-muted);
}

.ui-field__error {
  color: var(--ui-color-danger);
  font-weight: var(--ui-font-weight-semibold);
}

/* Card: header/body/footer remain optional and preserve logical direction. */
[data-ui-foundation] :where(.ui-card, .ui-compat-card, [data-ui-card]) {
  min-inline-size: 0;
  color: var(--ui-surface-text);
  background: var(--ui-surface-card);
  border: var(--ui-border-width) solid var(--ui-surface-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-xs);
}

.ui-card__header,
.ui-card__body,
.ui-card__footer {
  padding: var(--ui-space-fluid);
}

.ui-card__header,
.ui-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
}

.ui-card__header {
  border-block-end: var(--ui-border-width) solid var(--ui-surface-border);
}

.ui-card__footer {
  border-block-start: var(--ui-border-width) solid var(--ui-surface-border);
}

.ui-card__title {
  margin: 0;
  color: var(--ui-surface-text);
  font-family: var(--ui-font-heading);
  font-size: var(--ui-text-lg);
  font-weight: var(--ui-font-weight-bold);
  line-height: var(--ui-leading-tight);
}

/* Status: use data-tone=neutral|success|warning|danger|info. */
[data-ui-foundation] :where(.ui-status, .ui-compat-status, [data-ui-status]) {
  --ui-status-color: var(--ui-surface-text-soft);
  --ui-status-bg: var(--ui-surface-soft);
  --ui-status-border: var(--ui-surface-border);
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1-5);
  max-inline-size: 100%;
  min-block-size: 1.75rem;
  padding-inline: var(--ui-space-2);
  color: var(--ui-status-color);
  background: var(--ui-status-bg);
  border: var(--ui-border-width) solid var(--ui-status-border);
  border-radius: var(--ui-radius-pill);
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-font-weight-bold);
  line-height: 1.25;
  white-space: nowrap;
}

[data-ui-foundation] :where(.ui-status, .ui-compat-status, [data-ui-status])[data-tone="success"] {
  --ui-status-color: var(--ui-color-success);
  --ui-status-bg: var(--ui-color-success-soft);
  --ui-status-border: var(--ui-color-success-border);
}

[data-ui-foundation] :where(.ui-status, .ui-compat-status, [data-ui-status])[data-tone="warning"] {
  --ui-status-color: var(--ui-color-warning);
  --ui-status-bg: var(--ui-color-warning-soft);
  --ui-status-border: var(--ui-color-warning-border);
}

[data-ui-foundation] :where(.ui-status, .ui-compat-status, [data-ui-status])[data-tone="danger"] {
  --ui-status-color: var(--ui-color-danger);
  --ui-status-bg: var(--ui-color-danger-soft);
  --ui-status-border: var(--ui-color-danger-border);
}

[data-ui-foundation] :where(.ui-status, .ui-compat-status, [data-ui-status])[data-tone="info"] {
  --ui-status-color: var(--ui-color-info);
  --ui-status-bg: var(--ui-color-info-soft);
  --ui-status-border: var(--ui-color-info-border);
}

/* Table: put .ui-data-table inside .ui-table-wrap for safe horizontal scrolling. */
.ui-table-wrap,
.ui-table-shell,
.ui-compat-table-shell {
  max-inline-size: 100%;
  overflow: auto;
  background: var(--ui-surface-card);
  border: var(--ui-border-width) solid var(--ui-surface-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-xs);
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

[data-ui-foundation] :where(.ui-data-table, .ui-table, .ui-compat-table, [data-ui-table]) {
  inline-size: 100%;
  min-inline-size: 42rem;
  border-collapse: collapse;
  color: var(--ui-surface-text-soft);
  font-size: var(--ui-text-sm);
  font-variant-numeric: tabular-nums;
}

[data-ui-foundation] :where(.ui-data-table, .ui-table, .ui-compat-table, [data-ui-table]) :where(th, td) {
  padding: var(--ui-space-3) var(--ui-space-4);
  border-block-end: var(--ui-border-width) solid var(--ui-surface-border);
  text-align: start;
  vertical-align: middle;
}

[data-ui-foundation] :where(.ui-data-table, .ui-table, .ui-compat-table, [data-ui-table]) th {
  color: var(--ui-surface-text);
  background: var(--ui-surface-soft);
  font-weight: var(--ui-font-weight-bold);
  white-space: nowrap;
}

[data-ui-foundation] :where(.ui-data-table, .ui-table, .ui-compat-table, [data-ui-table]) tbody tr:last-child td {
  border-block-end: 0;
}

@media (hover: hover) {
  [data-ui-foundation] :where(.ui-data-table, .ui-table, .ui-compat-table, [data-ui-table]) tbody tr:hover {
    background: var(--ui-color-brand-50);
  }
}

/* Dialog: works with native dialog or an existing role=dialog container. */
[data-ui-foundation] :where(.ui-dialog, .ui-compat-dialog, [data-ui-dialog]) {
  inline-size: min(calc(100% - 2rem), 38rem);
  max-block-size: calc(100dvh - 2rem);
  padding: 0;
  color: var(--ui-surface-text);
  background: var(--ui-surface-card);
  border: var(--ui-border-width) solid var(--ui-surface-border);
  border-radius: var(--ui-radius-xl);
  box-shadow: var(--ui-shadow-lg);
  overflow: auto;
  overscroll-behavior: contain;
}

dialog.ui-dialog::backdrop,
dialog.ui-compat-dialog::backdrop,
dialog[data-ui-dialog]::backdrop {
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(3px);
}

.ui-dialog__header,
.ui-dialog__body,
.ui-dialog__footer {
  padding: var(--ui-space-5);
}

.ui-dialog__header,
.ui-dialog__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
}

.ui-dialog__header {
  border-block-end: var(--ui-border-width) solid var(--ui-surface-border);
}

.ui-dialog__footer {
  justify-content: flex-end;
  border-block-start: var(--ui-border-width) solid var(--ui-surface-border);
}

/* Empty state: one readable contract for icon, title, message, and action. */
[data-ui-foundation] :where(.ui-empty, .ui-compat-empty, [data-ui-empty]) {
  display: grid;
  justify-items: center;
  gap: var(--ui-space-3);
  padding: clamp(2rem, 5vw, 4rem) var(--ui-space-fluid);
  color: var(--ui-surface-text-soft);
  text-align: center;
  text-wrap: pretty;
}

.ui-empty__icon,
.ui-error-state__icon {
  display: grid;
  place-items: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  color: var(--ui-surface-brand-hover);
  background: var(--ui-surface-brand-soft);
  border-radius: var(--ui-radius-lg);
  font-size: var(--ui-text-2xl);
}

.ui-empty__title,
.ui-error-state__title {
  margin: 0;
  color: var(--ui-surface-text);
  font-family: var(--ui-font-heading);
  font-size: var(--ui-text-xl);
  font-weight: var(--ui-font-weight-bold);
}

.ui-empty__message,
.ui-error-state__message {
  max-inline-size: 52ch;
  margin: 0;
  line-height: var(--ui-leading-normal);
}

/* Error state: blocking feedback with an optional recovery action. */
[data-ui-foundation] :where(.ui-error-state, [data-ui-error-state]) {
  display: grid;
  justify-items: center;
  gap: var(--ui-space-3);
  padding: clamp(2rem, 5vw, 4rem) var(--ui-space-fluid);
  color: var(--ui-color-danger);
  background: var(--ui-color-danger-soft);
  border: var(--ui-border-width) solid var(--ui-color-danger-border);
  border-radius: var(--ui-radius-lg);
  text-align: center;
  text-wrap: pretty;
}

.ui-error-state__icon {
  color: var(--ui-color-danger);
  background: var(--ui-color-danger-soft);
  border: var(--ui-border-width) solid var(--ui-color-danger-border);
}

.ui-error-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ui-space-3);
}

/* ========================================================================== 
   4. LAYOUT CONTRACTS
   ========================================================================== */

.ui-container {
  inline-size: min(100%, var(--ui-container-xl));
  margin-inline: auto;
  padding-inline: var(--ui-space-fluid);
}

.ui-container[data-size="sm"] {
  max-inline-size: var(--ui-container-sm);
}

.ui-container[data-size="md"] {
  max-inline-size: var(--ui-container-md);
}

.ui-container[data-size="lg"] {
  max-inline-size: var(--ui-container-lg);
}

.ui-section {
  padding-block: clamp(1.5rem, 1rem + 2vw, 4rem);
}

.ui-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ui-stack-gap, var(--ui-space-4));
  min-inline-size: 0;
}

.ui-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-cluster-gap, var(--ui-space-3));
  min-inline-size: 0;
}

.ui-split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-4);
  min-inline-size: 0;
}

.ui-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ui-grid-min, 16rem)), 1fr));
  gap: var(--ui-grid-gap, var(--ui-space-4));
  min-inline-size: 0;
}

.ui-sidebar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ui-space-fluid);
  min-inline-size: 0;
}

.ui-scroll-region {
  max-inline-size: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.ui-flow > * {
  margin-block: 0;
}

.ui-flow > * + * {
  margin-block-start: var(--ui-flow-space, var(--ui-space-4));
}

@media (min-width: 64rem) {
  .ui-sidebar-layout {
    grid-template-columns: minmax(14rem, var(--ui-sidebar-width, 18rem)) minmax(0, 1fr);
  }
}

/* ========================================================================== 
   5. TRANSITIONAL COMPATIBILITY ADAPTERS

   These adapters are intentionally one-way: legacy tokens feed the new
   --ui-surface-* contract. They never overwrite legacy variables. Existing
   selectors therefore keep their current rendering while new ui-* components
   match the surface they are placed in.

   Adoption aliases (opt in on legacy markup):
   .ui-compat-button -> .ui-button       .ui-compat-field -> field control
   .ui-compat-card   -> .ui-card         .ui-compat-status -> .ui-status
   .ui-compat-table  -> .ui-data-table   .ui-compat-dialog -> .ui-dialog
   .ui-compat-empty  -> .ui-empty
   ========================================================================== */

body.admin-app[data-ui-surface="admin"] {
  --ui-font-sans: "Cairo", "Readex Pro", "Tajawal", system-ui, sans-serif;
  --ui-font-heading: "Cairo", "Tajawal", var(--ui-font-sans);
  --ui-surface-canvas: var(--ui-color-neutral-50);
  --ui-surface-card: var(--ui-color-white);
  --ui-surface-soft: var(--ui-color-neutral-100);
  --ui-surface-text: var(--ui-color-neutral-900);
  --ui-surface-text-soft: var(--ui-color-neutral-700);
  --ui-surface-muted: var(--ui-color-neutral-500);
  --ui-surface-border: var(--ui-color-neutral-200);
  --ui-surface-border-strong: var(--ui-color-neutral-300);
  --ui-surface-brand: var(--ui-color-brand-600);
  --ui-surface-brand-hover: var(--ui-color-brand-700);
  --ui-surface-brand-soft: var(--ui-color-brand-50);

  /* Legacy admin variables now consume the canonical palette. */
  --ds-canvas: var(--ui-surface-canvas);
  --ds-surface: var(--ui-surface-card);
  --ds-surface-soft: var(--ui-surface-soft);
  --ds-ink: var(--ui-surface-text);
  --ds-text: var(--ui-surface-text-soft);
  --ds-muted: var(--ui-surface-muted);
  --ds-border: var(--ui-surface-border);
  --ds-border-strong: var(--ui-surface-border-strong);
  --ds-brand: var(--ui-surface-brand);
  --ds-brand-strong: var(--ui-surface-brand-hover);
  --ds-brand-soft: var(--ui-surface-brand-soft);
  --aui-bg: var(--ui-surface-canvas);
  --aui-surface: var(--ui-surface-card);
  --aui-surface-soft: var(--ui-surface-soft);
  --aui-text: var(--ui-surface-text);
  --aui-text-soft: var(--ui-surface-text-soft);
  --aui-muted: var(--ui-surface-muted);
  --aui-border: var(--ui-surface-border);
  --aui-border-strong: var(--ui-surface-border-strong);
  --aui-primary: var(--ui-surface-brand);
  --aui-primary-hover: var(--ui-surface-brand-hover);
  --aui-primary-soft: var(--ui-surface-brand-soft);
  --c-bg: var(--ui-surface-canvas);
  --c-surface: var(--ui-surface-card);
  --c-surface-2: var(--ui-surface-soft);
  --c-text: var(--ui-surface-text);
  --c-text-2: var(--ui-surface-text-soft);
  --c-text-muted: var(--ui-surface-muted);
  --c-border: var(--ui-surface-border);
  --c-border-2: var(--ui-surface-border-strong);
  --c-primary: var(--ui-surface-brand);
  --c-primary-light: var(--ui-surface-brand-hover);
  --c-primary-xlight: var(--ui-surface-brand-soft);
}

body.public-shell[data-ui-surface="public"] {
  --ui-font-sans: "Readex Pro", "Tajawal", "Cairo", system-ui, sans-serif;
  --ui-font-heading: "Tajawal", "Cairo", var(--ui-font-sans);
  --ui-surface-canvas: var(--ui-color-neutral-50);
  --ui-surface-card: var(--ui-color-white);
  --ui-surface-soft: var(--ui-color-brand-50);
  --ui-surface-text: var(--ui-color-neutral-900);
  --ui-surface-text-soft: var(--ui-color-neutral-600);
  --ui-surface-muted: var(--ui-color-neutral-500);
  --ui-surface-border: var(--ui-color-neutral-200);
  --ui-surface-border-strong: var(--ui-color-neutral-300);
  --ui-surface-brand: var(--ui-color-brand-600);
  --ui-surface-brand-hover: var(--ui-color-brand-700);
  --ui-surface-brand-soft: var(--ui-color-brand-50);
  --ui-primary: var(--ui-surface-brand);
  --ui-primary-soft: var(--ui-surface-brand-soft);
  --ui-ink: var(--ui-surface-text);
  --ui-ink-soft: var(--ui-surface-text-soft);
  --ui-muted: var(--ui-surface-muted);
  --ui-line: var(--ui-surface-border);
  --ui-glass-strong: var(--ui-surface-card);
}

body.student-portal[data-ui-surface="student"] {
  --ui-font-sans: var(--font-main, "Cairo", system-ui, sans-serif);
  --ui-font-heading: var(--font-title, "Cairo", var(--ui-font-sans));
  --ui-font-quran: var(--font-quran, "Amiri", serif);
  --ui-surface-canvas: var(--ui-color-neutral-50);
  --ui-surface-card: var(--ui-color-white);
  --ui-surface-soft: var(--ui-color-brand-50);
  --ui-surface-text: var(--ui-color-neutral-900);
  --ui-surface-text-soft: var(--ui-color-neutral-700);
  --ui-surface-muted: var(--ui-color-neutral-500);
  --ui-surface-border: var(--ui-color-neutral-200);
  --ui-surface-border-strong: var(--ui-color-neutral-300);
  --ui-surface-brand: var(--ui-color-brand-600);
  --ui-surface-brand-hover: var(--ui-color-brand-700);
  --ui-surface-brand-soft: var(--ui-color-brand-50);
  --bg-body: var(--ui-surface-canvas);
  --glass-bg: var(--ui-surface-card);
  --primary-color: var(--ui-surface-brand);
  --primary-dark: var(--ui-surface-brand-hover);
  --primary-light: var(--ui-surface-brand-soft);
  --text-main: var(--ui-surface-text);
  --ink: var(--ui-surface-text);
  --text-muted: var(--ui-surface-muted);
  --muted: var(--ui-surface-muted);
  --ui-line: var(--ui-surface-border);
}

/* Behavioral-only bridges for existing controls; no visual properties reset. */
[data-ui-foundation] :where(.btn, .admin-btn, .academy-btn, .btn-theme, .btn-minimal) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

[data-ui-foundation] :where(.form-control, .form-select, .admin-input, .academy-input) {
  accent-color: var(--ui-surface-brand);
  caret-color: var(--ui-surface-brand);
}

[data-ui-foundation] :where(.table, .admin-table, .table-modern, .academy-table) {
  font-variant-numeric: tabular-nums;
}

[data-ui-foundation] :where(.modal, .admin-dialog, .academy-dialog) {
  overscroll-behavior: contain;
}

/* ========================================================================== 
   6. GLOBAL PALETTE ENFORCEMENT

   One palette owns every surface. Page CSS may control layout and geometry,
   but common visual primitives consume the canonical Foundation colors.
   ========================================================================== */

@media screen {
  [data-ui-foundation] {
    color: var(--ui-surface-text);
    background-color: var(--ui-surface-canvas);
    font-family: var(--ui-font-sans);
  }

  [data-ui-foundation] :where(h1, h2, h3, h4, h5, h6) {
    color: var(--ui-surface-text);
    font-family: var(--ui-font-heading);
  }

  [data-ui-foundation] :where(a:not(.btn):not([class*="brand"]):not([class*="logo"])) {
    color: var(--ui-surface-brand-hover);
  }

  body.admin-app[data-ui-foundation][data-ui-surface="admin"] :where(
    .card,
    .modal-content,
    .dropdown-menu,
    [class$="-card"],
    [class*="-card "],
    [class$="-panel"],
    [class*="-panel "],
    [class$="-hero"],
    [class*="-hero "]
  ) {
    color: var(--ui-surface-text);
    background-color: var(--ui-surface-card);
    background-image: none;
    border-color: var(--ui-surface-border);
  }

  [data-ui-foundation] :where(.form-control, .form-select, .form-check-input, .input-group-text, textarea, input, select) {
    color: var(--ui-surface-text);
    background-color: var(--ui-surface-card);
    border-color: var(--ui-surface-border-strong);
    accent-color: var(--ui-surface-brand);
    caret-color: var(--ui-surface-brand);
  }

  [data-ui-foundation] :where(.form-control, .form-select, textarea, input, select):focus {
    color: var(--ui-surface-text);
    background-color: var(--ui-surface-card);
    border-color: var(--ui-surface-brand);
    box-shadow: var(--ui-focus-ring);
  }

  [data-ui-foundation] :where(.btn-primary, .btn-success, .admin-btn-primary, .academy-btn-primary) {
    color: var(--ui-color-white);
    background-color: var(--ui-surface-brand);
    background-image: none;
    border-color: var(--ui-surface-brand);
  }

  [data-ui-foundation] :where(.btn-primary, .btn-success, .admin-btn-primary, .academy-btn-primary):hover {
    color: var(--ui-color-white);
    background-color: var(--ui-surface-brand-hover);
    border-color: var(--ui-surface-brand-hover);
  }

  [data-ui-foundation] :where(.btn-light, .btn-secondary, .btn-outline-primary, .btn-outline-secondary) {
    color: var(--ui-surface-text);
    background-color: var(--ui-surface-card);
    background-image: none;
    border-color: var(--ui-surface-border-strong);
  }

  [data-ui-foundation] :where(.text-primary, .text-info) {
    color: var(--ui-surface-brand-hover);
  }

  [data-ui-foundation] :where(.bg-primary, .bg-info) {
    color: var(--ui-color-white);
    background-color: var(--ui-surface-brand);
    background-image: none;
  }

  [data-ui-foundation] :where(.table, .admin-table, .table-modern, .academy-table) {
    color: var(--ui-surface-text-soft);
    background-color: var(--ui-surface-card);
    border-color: var(--ui-surface-border);
  }

  [data-ui-foundation] :where(.table, .admin-table, .table-modern, .academy-table) :where(th, td) {
    color: inherit;
    background-color: var(--ui-surface-card);
    border-color: var(--ui-surface-border);
  }

  [data-ui-foundation] :where(.table, .admin-table, .table-modern, .academy-table) th {
    color: var(--ui-surface-text);
    background-color: var(--ui-surface-soft);
  }

  [data-ui-foundation] :where(.badge, .status-badge, [class$="-badge"], [class*="-badge "]) {
    color: var(--ui-surface-text-soft);
    background-color: var(--ui-surface-soft);
    background-image: none;
    border-color: var(--ui-surface-border);
  }

  [data-ui-foundation] :where(.alert-success, .text-bg-success, .bg-success-subtle) {
    color: var(--ui-color-success);
    background-color: var(--ui-color-success-soft);
    border-color: var(--ui-color-success-border);
  }

  [data-ui-foundation] :where(.alert-warning, .text-bg-warning, .bg-warning-subtle) {
    color: var(--ui-color-warning);
    background-color: var(--ui-color-warning-soft);
    border-color: var(--ui-color-warning-border);
  }

  [data-ui-foundation] :where(.alert-danger, .text-bg-danger, .bg-danger-subtle) {
    color: var(--ui-color-danger);
    background-color: var(--ui-color-danger-soft);
    border-color: var(--ui-color-danger-border);
  }

  [data-ui-foundation] :where(.alert-info, .text-bg-info, .bg-info-subtle) {
    color: var(--ui-color-info);
    background-color: var(--ui-color-info-soft);
    border-color: var(--ui-color-info-border);
  }

  [data-ui-foundation] :where(.modal-content, dialog, .dropdown-menu, .offcanvas) {
    color: var(--ui-surface-text);
    background-color: var(--ui-surface-card);
    border-color: var(--ui-surface-border);
  }
}