:root{
  --accent: #1f55a7;           /* primary */
  --accent-contrast: #ffffff;  /* text on accent */
  --accent-weak: color-mix(in srgb, var(--accent) 12%, #ffffff);
  --accent-weak-2: color-mix(in srgb, var(--accent) 6%, #ffffff);
  --accent-hover: color-mix(in srgb, var(--accent) 88%, #000000);
  --accent-active: color-mix(in srgb, var(--accent) 75%, #000000);
  --ring: color-mix(in srgb, var(--accent) 40%, #ffffff);
  --ink: #0e1320;              /* headings */
  --muted: #5b6472;            /* secondary text */
  --line: #e7e9ee;             /* borders */
  --surface: #fcfdff;          /* cards/backgrounds */
}

/* Links & buttons */
a, .link { color: var(--accent); }
a:hover { color: var(--accent-hover); }

.btn-primary{
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: 12px;
  padding: 10px 14px;
}
.btn-primary:hover{ background: var(--accent-hover); }
.btn-primary:active{ background: var(--accent-active); }

.btn-outline{
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
}
.btn-outline:hover{
  background: var(--accent-weak);
}

/* Chips (artist filters) */
.chip{
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 999px;
}
.chip[aria-pressed="true"]{
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Inputs & focus */
input[type="search"]:focus{
  outline: 3px solid var(--ring);
  border-color: var(--accent);
}

/* Cards */
.product-card{
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
  transition: box-shadow .2s ease, translate .2s ease;
}
.product-card:hover{ box-shadow: 0 8px 24px rgba(0,0,0,.08); translate: 0 -2px; }
.product-card .media{ aspect-ratio: 1 / 1; object-fit: cover; }

/* Badges */
.badge{
  background: var(--accent-weak);
  color: var(--accent);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
}

.bg-main-light {
    background-color: #4483e0a5;
}
.bg-main {
    background-color: #1f55a7ff;
}
.bg-main-secondary {
    background-color: #1f55a7aa;
}