/* ===================================================================
   Modern — sleek minimal dark. Deep ink canvas, frosted-glass surfaces,
   a single violet accent with a soft ambient glow. Grotesk display.
   Component structure comes from the shared sf-* layer; this theme only
   sets tokens + atmosphere + a couple of signatures.
   =================================================================== */

:root {
  --font-display: 'Space Grotesk', var(--font-body);
  --color-bg:        #0a0a12;
  --color-surface:   #14141f;
  --color-border:    #262636;
  --color-border-lt: #1e1e2c;
  --color-text:      #f4f4f8;
  --color-text-2:    #b8b8c6;
  --color-text-3:    #7a7a8c;
  --color-primary:   #a78bfa;
  --color-primary-h: #c4b5fd;
  --color-primary-l: rgba(167, 139, 250, .14);
  --color-muted-bg:  #1b1b28;
  --shadow-sm:   0 1px 2px rgba(0,0,0,.5);
  --shadow-md:   0 10px 30px -12px rgba(0,0,0,.7);
  --shadow-lg:   0 16px 44px -16px rgba(0,0,0,.8);
  --shadow-lift: 0 24px 60px -20px rgba(0,0,0,.85);
}

body {
  background:
    radial-gradient(120% 80% at 85% -10%, rgba(167,139,250,.16), transparent 55%),
    radial-gradient(90% 60% at -10% 10%, rgba(56,189,248,.10), transparent 50%),
    var(--color-bg);
  background-attachment: fixed;
}

.site-header { background: rgba(10, 10, 18, .72); }
.site-footer { background: rgba(10, 10, 18, .6); }

/* Glass cards */
.sf-card,
.sf-entry,
.sf-piece,
.sf-product {
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 42%),
    var(--color-surface);
}
.sf-card:hover { border-color: rgba(167,139,250,.5); }
.filter-chip__input:checked + .filter-chip__text { color: #14141f; }