/* الزجاج — backdrop-filter بعتامات Glass المنخفضة من theme.ts (درس التطبيق:
 * العتامة العالية تخنق الزجاج). fallback معتم لمن لا يدعم. */

.glass-dock,
.glass-sheet,
.glass-chip {
  background: var(--nooda-surface);
  border: 1px solid var(--nooda-border);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass-dock {
    background: var(--glass-tab-bar-overlay);
    -webkit-backdrop-filter: blur(var(--glass-tab-bar-blur)) saturate(1.4);
    backdrop-filter: blur(var(--glass-tab-bar-blur)) saturate(1.4);
  }
  .glass-sheet {
    background: var(--glass-sheet-overlay);
    -webkit-backdrop-filter: blur(var(--glass-sheet-blur)) saturate(1.3);
    backdrop-filter: blur(var(--glass-sheet-blur)) saturate(1.3);
  }
  .glass-chip {
    background: var(--glass-chip-overlay);
    -webkit-backdrop-filter: blur(var(--glass-chip-blur)) saturate(1.3);
    backdrop-filter: blur(var(--glass-chip-blur)) saturate(1.3);
  }
}

/* البطاقة الزجاجية القياسية */
.card {
  background: var(--nooda-surface);
  border: 1px solid var(--nooda-border);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-2xl), 4vw, var(--space-4xl));
  box-shadow: var(--shadow-soft);
}
.card-glass {
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-2xl), 4vw, var(--space-4xl));
  box-shadow: var(--shadow-soft);
}

/* حافة مضيئة خافتة للبطاقات البطلة — الضوء أداة العمق الأولى (§4) */
.card-hero {
  position: relative;
  background:
    linear-gradient(var(--nooda-surface), var(--nooda-surface)) padding-box,
    linear-gradient(135deg, var(--nooda-primary-glow), transparent 40%, rgba(201, 155, 74, 0.2)) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-2xl), 4vw, var(--space-4xl));
  box-shadow: var(--shadow-raised);
}