/* Card Component (customizable via CSS variables) */

.c-card{
  --card-radius: 1rem;
  --card-padding: 1rem;
  --card-shadow: 0 10px 30px rgba(0,0,0,.35);
  border-radius:var(--card-radius);
  padding:var(--card-padding);
  color:var(--text)
}

/* Solid surface */
.c-card--solid{
  --card-surface: var(--surface);
  background:var(--card-surface);
  box-shadow: var(--card-shadow)
}

/* Glass surface with golden gradient border */
.c-card--glass{
  --card-glass-start: hsla(220,90%,70%,.08);
  --card-glass-end: hsla(220,90%,30%,.08);
  --card-blur: 12px; --card-sat: 140%;
  --card-border-start: var(--gold-400);
  --card-border-end: var(--gold-600);
  border:1px solid transparent;
  background:
    linear-gradient(to bottom right, var(--card-glass-start), var(--card-glass-end)) padding-box,
    linear-gradient(135deg, var(--card-border-start), var(--card-border-end)) border-box;
  backdrop-filter: blur(var(--card-blur)) saturate(var(--card-sat));
  -webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-sat));
  box-shadow: var(--card-shadow)
}
@supports not ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){
  .c-card--glass{background:
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) padding-box,
      linear-gradient(135deg, var(--card-border-start), var(--card-border-end)) border-box}
}

/* Solid with gradient border only */
.c-card--border-gold{
  --card-surface: var(--surface);
  --card-border-start: var(--gold-400);
  --card-border-end: var(--gold-600);
  border:1px solid transparent;
  background:
    linear-gradient(var(--card-surface), var(--card-surface)) padding-box,
    linear-gradient(135deg, var(--card-border-start), var(--card-border-end)) border-box;
  box-shadow: var(--card-shadow)
}