/* ============================================================================
 * THEME 05 — النعومة المتجسّدة | Soft Neumorphism
 * Dual soft shadows, sunk inputs, pill avatars. Layout: iconrail.
 * ============================================================================ */

html[data-theme="soft_neumorph"],[data-preview-theme="soft_neumorph"] {
  --ui-font: 'Tajawal', 'Cairo', system-ui, sans-serif;
  --ui-heading-weight: 700;
  --ui-control-h: 48px;
  --ui-radius: 20px;
  --ui-radius-sm: 14px;
  --ui-avatar-radius: 999px;
  --ui-radius-pill: 999px;
  --ui-gap: 18px;
  --ui-card-pad: 22px;
  --ui-row-pad: 14px;
  --ui-motion: 190ms;

  --ui-canvas: #eef1f6;
  --ui-canvas-2: #f6f8fb;
  --ui-pattern: none;
  --ui-card-bg: #f4f6fa;
  --ui-card-bg-hover: #f7f9fc;
  --ui-subtle: #e9edf4;
  --ui-border: rgba(255, 255, 255, .75);
  --ui-border-w: 1px;
  --ui-blur: none;
  --ui-shadow: 10px 10px 22px #d3d9e4, -10px -10px 22px #ffffff;
  --ui-shadow-hover: 12px 12px 26px #ccd3e0, -12px -12px 26px #ffffff;
  --ui-inset: none;

  --ui-text: #2b3448;
  --ui-heading: #1e2739;
  --ui-muted: #6b7793;
  --ui-faint: #98a3b8;

  --ui-primary: #31405a;
  --ui-primary-soft: rgba(49, 64, 90, .1);
  --ui-primary-contrast: #ffffff;
  --ui-primary-glow: 6px 6px 16px #d3d9e4, -6px -6px 16px #ffffff;
  --ui-accent: #ff8f6b;
  --ui-accent-soft: rgba(255, 143, 107, .16);
  --ui-chart-1: #31405a;
  --ui-chart-2: #ff8f6b;
  --ui-chart-3: #5b8def;
  --ui-chart-4: #00b8a9;
  --ui-chart-5: #c56cf0;
  --ui-grid: rgba(49, 64, 90, .12);
}

html[data-theme="soft_neumorph"][data-mode="dark"],[data-preview-theme="soft_neumorph"][data-preview-mode="dark"] {
  --ui-canvas: #1b1f27;
  --ui-canvas-2: #20252e;
  --ui-card-bg: #20252e;
  --ui-card-bg-hover: #232932;
  --ui-subtle: #1c212a;
  --ui-border: rgba(255, 255, 255, .05);
  --ui-shadow: 10px 10px 22px #141820, -10px -10px 22px #262d38;
  --ui-shadow-hover: 12px 12px 26px #11151c, -12px -12px 26px #2b323e;
  --ui-inset: inset 2px 2px 6px #171b22, inset -2px -2px 6px #2a313c;

  --ui-text: #dbe3ef;
  --ui-heading: #f2f6fc;
  --ui-muted: #93a1b8;
  --ui-faint: #6d7a90;

  --ui-primary: #8aa0c8;
  --ui-primary-soft: rgba(138, 160, 200, .14);
  --ui-primary-contrast: #0b0f16;
  --ui-primary-glow: 6px 6px 16px #141820, -6px -6px 16px #262d38;
  --ui-accent: #ff9f80;
  --ui-accent-soft: rgba(255, 159, 128, .16);
  --ui-chart-1: #8aa0c8;
  --ui-chart-2: #ff9f80;
  --ui-chart-3: #7aa2f7;
  --ui-chart-4: #4fd1c5;
  --ui-chart-5: #c084fc;
  --ui-grid: rgba(220, 228, 240, .12);
}

/* Sunk (inset) form fields — the neumorphic counterpart of an input */
html[data-theme="soft_neumorph"] input.ui-field,[data-preview-theme="soft_neumorph"] input.ui-field,
html[data-theme="soft_neumorph"] select.ui-field,
[data-preview-theme="soft_neumorph"] select.ui-field,
html[data-theme="soft_neumorph"] textarea.ui-field,
[data-preview-theme="soft_neumorph"] textarea.ui-field {
  background: var(--ui-subtle);
  border-color: transparent;
  box-shadow: var(--ui-inset);
}
html[data-theme="soft_neumorph"] .ui-btn:active,[data-preview-theme="soft_neumorph"] .ui-btn:active,
html[data-theme="soft_neumorph"] .ui-btn-ghost:active,
[data-preview-theme="soft_neumorph"] .ui-btn-ghost:active {
  box-shadow: var(--ui-inset);
  transform: translateY(1px);
}
html[data-theme="soft_neumorph"] .ui-bar,[data-preview-theme="soft_neumorph"] .ui-bar {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18);
}
html[data-theme="soft_neumorph"] .bottom-nav,[data-preview-theme="soft_neumorph"] .bottom-nav,
html[data-theme="soft_neumorph"] .app-aside,
[data-preview-theme="soft_neumorph"] .app-aside {
  box-shadow: 8px 0 20px -14px rgba(20, 25, 35, .45);
}