/* ============================================================================
 * THEME 08 — تدرّج الفينتك | Fintech Gradient
 * Violet→cyan gradients, tall balance card, pill controls. Layout: topbar.
 * ============================================================================ */

html[data-theme="fintech_gradient"],[data-preview-theme="fintech_gradient"] {
  --ui-font: 'Cairo', 'Tajawal', system-ui, sans-serif;
  --ui-heading-weight: 850;
  --ui-heading-tracking: -0.015em;
  --ui-control-h: 48px;
  --ui-radius: 24px;
  --ui-radius-sm: 16px;
  --ui-radius-pill: 999px;
  --ui-avatar-radius: 999px;
  --ui-gap: 18px;
  --ui-card-pad: 22px;
  --ui-row-pad: 13px;
  --ui-motion: 220ms;

  --ui-canvas: #0f0c29;
  --ui-canvas-2: #1b1540;
  --ui-pattern:
    radial-gradient(circle at 12% 8%, rgba(124, 92, 255, .30), transparent 42%),
    radial-gradient(circle at 88% 12%, rgba(34, 211, 238, .20), transparent 38%),
    radial-gradient(circle at 50% 100%, rgba(244, 114, 182, .16), transparent 45%),
    linear-gradient(160deg, #0f0c29 0%, #171235 55%, #0f0c29 100%);
  --ui-card-bg: rgba(27, 21, 64, .74);
  --ui-card-bg-hover: rgba(35, 27, 79, .88);
  --ui-subtle: rgba(124, 92, 255, .10);
  --ui-border: rgba(124, 92, 255, .32);
  --ui-border-w: 1px;
  --ui-blur: blur(18px);
  --ui-shadow: 0 18px 44px -22px rgba(124, 92, 255, .6);
  --ui-shadow-hover: 0 24px 54px -24px rgba(124, 92, 255, .75);
  --ui-inset: inset 0 1px 0 rgba(255, 255, 255, .07);

  --ui-text: #eae7ff;
  --ui-heading: #ffffff;
  --ui-muted: #a49fd6;
  --ui-faint: #7b76ad;

  --ui-primary: #7c5cff;
  --ui-primary-soft: rgba(124, 92, 255, .18);
  --ui-primary-contrast: #ffffff;
  --ui-primary-glow: 0 0 0 1px rgba(124, 92, 255, .45), 0 16px 34px -16px rgba(124, 92, 255, .8);
  --ui-accent: #22d3ee;
  --ui-accent-soft: rgba(34, 211, 238, .16);
  --ui-chart-1: #7c5cff;
  --ui-chart-2: #22d3ee;
  --ui-chart-3: #f472b6;
  --ui-chart-4: #facc15;
  --ui-chart-5: #34d399;
  --ui-grid: rgba(164, 159, 214, .18);
}

html[data-theme="fintech_gradient"][data-mode="light"],[data-preview-theme="fintech_gradient"][data-preview-mode="light"] {
  --ui-canvas: #f4f2ff;
  --ui-canvas-2: #ffffff;
  --ui-pattern:
    radial-gradient(circle at 85% 8%, rgba(124, 92, 255, .18), transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(34, 211, 238, .16), transparent 42%);
  --ui-card-bg: #ffffff;
  --ui-card-bg-hover: #fdfcff;
  --ui-subtle: #f3f0ff;
  --ui-border: #e3ddff;
  --ui-blur: none;
  --ui-shadow: 0 14px 34px -22px rgba(80, 60, 200, .5);
  --ui-shadow-hover: 0 20px 42px -22px rgba(80, 60, 200, .6);
  --ui-inset: none;

  --ui-text: #2a2450;
  --ui-heading: #171236;
  --ui-muted: #6a638f;
  --ui-faint: #928cb5;

  --ui-primary: #6d4aff;
  --ui-primary-soft: rgba(109, 74, 255, .12);
  --ui-primary-contrast: #ffffff;
  --ui-accent: #0891b2;
  --ui-accent-soft: rgba(8, 145, 178, .12);
  --ui-chart-1: #6d4aff;
  --ui-chart-2: #0891b2;
  --ui-chart-3: #db2777;
  --ui-chart-4: #d97706;
  --ui-chart-5: #059669;
  --ui-grid: rgba(42, 36, 80, .12);
}

/* Signature gradient buttons + tall hero balance card */
html[data-theme="fintech_gradient"] .ui-btn,[data-preview-theme="fintech_gradient"] .ui-btn {
  background-image: linear-gradient(135deg, var(--ui-primary) 0%, var(--ui-chart-2) 100%);
  background-color: transparent;
  border: none;
}
html[data-theme="fintech_gradient"] .ui-balance-card,[data-preview-theme="fintech_gradient"] .ui-balance-card {
  background-image: linear-gradient(135deg, rgba(124, 92, 255, .95) 0%, rgba(34, 211, 238, .85) 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 22px 50px -22px rgba(124, 92, 255, .85);
}
html[data-theme="fintech_gradient"] .ui-balance-card .ui-muted,[data-preview-theme="fintech_gradient"] .ui-balance-card .ui-muted,
html[data-theme="fintech_gradient"] .ui-balance-card .text-slate-400,
[data-preview-theme="fintech_gradient"] .ui-balance-card .text-slate-400 {
  color: rgba(255, 255, 255, .82) !important;
}
html[data-theme="fintech_gradient"] .ui-float-action,[data-preview-theme="fintech_gradient"] .ui-float-action {
  border-radius: 999px;
  box-shadow: 0 14px 30px -12px rgba(124, 92, 255, .8);
}