/* BhamDIY brand overrides — loaded after base components */

:root {
  --font-sans: "Red Hat Display", system-ui, sans-serif;
  --font-heading: "Comfortaa", system-ui, sans-serif;
  --color-primary: #6a0fc4;
  --color-primary-hover: oklch(from var(--color-primary) calc(l - 0.08) c h);
  --color-brand-dark: #28054b;

  --color-brand-a: #6a0fc4;
  --color-brand-b: #b5007e;
  --color-brand-c: #ff1e6d;
  --color-brand-d: #ff7a4a;
  --color-brand-e: #ffbe44;
  --color-brand-f: #f9f871;

  --heading-area-from: var(--color-brand-a);
  --heading-area-to:   var(--color-brand-c);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

.bhamdiy {
  --color-contrast: #efecf3;
  --color-text-muted: #5e6370;
}

/* Brand card modifier definitions — dark backgrounds */
.card.card--brand-a { --card-color: var(--color-brand-a); --card-next: var(--color-brand-b); --fg: #fff; --fg-muted: rgba(255,255,255,0.82); --fg-link: rgba(255,255,255,0.9); }
.card.card--brand-b { --card-color: var(--color-brand-b); --card-next: var(--color-brand-c); --fg: #fff; --fg-muted: rgba(255,255,255,0.82); --fg-link: rgba(255,255,255,0.9); }
.card.card--brand-c { --card-color: var(--color-brand-c); --card-next: var(--color-brand-d); --fg: #fff; --fg-muted: rgba(255,255,255,0.82); --fg-link: rgba(255,255,255,0.9); }

/* Brand card modifier definitions — light backgrounds */
.card.card--brand-d { --card-color: var(--color-brand-d); --card-next: var(--color-brand-e); --fg: #1a1a1a; --fg-muted: rgba(0,0,0,0.65); --fg-link: rgba(0,0,0,0.8); }
.card.card--brand-e { --card-color: var(--color-brand-e); --card-next: var(--color-brand-f); --fg: #1a1a1a; --fg-muted: rgba(0,0,0,0.65); --fg-link: rgba(0,0,0,0.8); }
.card.card--brand-f { --card-color: var(--color-brand-f); --card-next: var(--color-brand-e); --fg: #1a1a1a; --fg-muted: rgba(0,0,0,0.65); --fg-link: rgba(0,0,0,0.8); }

/* Shared glass + diagonal gradient */
.card.card--brand-a, .card.card--brand-b, .card.card--brand-c,
.card.card--brand-d, .card.card--brand-e, .card.card--brand-f {
  border: 6px solid rgba(255,255,255,0.28);
  box-shadow: 0 6px 28px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.22);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.13) 0%, transparent 52%),
    linear-gradient(135deg, var(--card-color) 68%, var(--card-next) 100%);
}

.card a {
  color: var(--fg-link, var(--color-primary));
}