/* ============================================================================
 * THEME 07 — الفخامة النوارية | Luxury Noir & Gold
 * Matte black, metallic gold, sheen accents. Layout: static.
 * ============================================================================ */

html[data-theme="luxury_noir"],
[data-preview-theme="luxury_noir"] {
  --ui-font: 'Almarai', 'Cairo', 'Tajawal', sans-serif;
  --ui-heading-weight: 800;
  --ui-heading-tracking: 0.01em;
  --ui-body-size: 13.5px;
  --ui-control-h: 50px;
  --ui-radius: 8px;
  --ui-radius-sm: 6px;
  --ui-radius-pill: 999px;
  --ui-avatar-radius: 999px;
  --ui-gap: 20px;
  --ui-card-pad: 26px;
  --ui-row-pad: 15px;
  --ui-motion: 260ms;

  --ui-canvas: #0a0a0b;
  --ui-canvas-2: #121114;
  --ui-pattern:
    radial-gradient(circle at 80% 0%, rgba(201, 162, 39, .10), transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(201, 162, 39, .06), transparent 45%);
  --ui-card-bg: #151417;
  --ui-card-bg-hover: #1b191d;
  --ui-subtle: #1d1b1f;
  --ui-border: rgba(201, 162, 39, .28);
  --ui-border-w: 1px;
  --ui-blur: blur(8px);
  --ui-shadow: 0 12px 34px -18px rgba(0, 0, 0, .9);
  --ui-shadow-hover: 0 18px 42px -20px rgba(201, 162, 39, .35);
  --ui-inset: inset 0 1px 0 rgba(242, 226, 176, .07);

  --ui-text: #eae2d2;
  --ui-heading: #f7f0dd;
  --ui-muted: #a89a80;
  --ui-faint: #7d7360;

  --ui-primary: #c9a227;
  --ui-primary-soft: rgba(201, 162, 39, .14);
  --ui-primary-contrast: #17130a;
  --ui-primary-glow: 0 0 0 1px rgba(201, 162, 39, .45), 0 14px 30px -14px rgba(201, 162, 39, .6);
  --ui-accent: #f2e2b0;
  --ui-accent-soft: rgba(242, 226, 176, .12);
  --ui-chart-1: #c9a227;
  --ui-chart-2: #f2e2b0;
  --ui-chart-3: #8a7a4a;
  --ui-chart-4: #d9d9d9;
  --ui-chart-5: #5c5330;
  --ui-grid: rgba(201, 162, 39, .16);
}

html[data-theme="luxury_noir"][data-mode="light"],
[data-preview-theme="luxury_noir"][data-preview-mode="light"] {
  --ui-canvas: #faf7f0;
  --ui-canvas-2: #fffdf8;
  --ui-pattern: radial-gradient(circle at 85% 5%, rgba(201, 162, 39, .16), transparent 38%);
  --ui-card-bg: #ffffff;
  --ui-card-bg-hover: #fffdf6;
  --ui-subtle: #f6f1e6;
  --ui-border: rgba(161, 128, 26, .3);
  --ui-blur: none;
  --ui-shadow: 0 10px 28px -18px rgba(60, 48, 20, .4);
  --ui-shadow-hover: 0 16px 34px -18px rgba(161, 128, 26, .45);
  --ui-inset: none;

  --ui-text: #3a3222;
  --ui-heading: #241e12;
  --ui-muted: #6d6250;
  --ui-faint: #93866d;

  --ui-primary: #a1801a;
  --ui-primary-soft: rgba(161, 128, 26, .12);
  --ui-primary-contrast: #ffffff;
  --ui-primary-glow: 0 10px 24px -12px rgba(161, 128, 26, .5);
  --ui-accent: #7a5c12;
  --ui-accent-soft: rgba(122, 92, 18, .12);
  --ui-chart-1: #a1801a;
  --ui-chart-2: #c9a227;
  --ui-chart-3: #7a6a3a;
  --ui-chart-4: #8c8c8c;
  --ui-chart-5: #5c5330;
  --ui-grid: rgba(122, 92, 18, .14);
}

/* Metallic sheen used on hero titles and reward badges */
html[data-theme="luxury_noir"] .ui-sheen,
[data-preview-theme="luxury_noir"] .ui-sheen {
  background: linear-gradient(100deg, var(--ui-chart-1) 0%, var(--ui-accent) 42%, #fff8e2 52%, var(--ui-chart-1) 72%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: noirSheen 6.5s ease-in-out infinite;
}

@keyframes noirSheen {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

html[data-theme="luxury_noir"] .ui-gold-rule,
[data-preview-theme="luxury_noir"] .ui-gold-rule {
  height: 1px;
  background: linear-gradient(to left, transparent, var(--ui-border), transparent);
}

html[data-theme="luxury_noir"] .ui-rank,
[data-preview-theme="luxury_noir"] .ui-rank {
  border-color: var(--ui-border);
  letter-spacing: 0.02em;
}