/* Shared Home and category hero palette. Keep the color decisions here. */
:root {
  --hero-brand-ink: #12234b;
  --hero-brand-muted: #53688d;
  --hero-brand-surface: #fff;
  --hero-brand-line: #dce7fc;
  --hero-brand-mobile-veil: #eef5ff;
  --hero-brand-backdrop:
    linear-gradient(180deg, transparent 60%, var(--color-bg) 100%),
    radial-gradient(ellipse at 76% 32%, #e1edff 0, transparent 48%),
    linear-gradient(120deg, #eaf3ff, #f7faff 48%, #e8f2ff);
  --hero-brand-title: linear-gradient(100deg, #3165ff, #7044f9 65%, #a43bf4);
  --hero-brand-cta: linear-gradient(135deg, #2563eb 0%, #6366f1 55%, #8b5cf6 100%);
  --hero-brand-cta-hover: linear-gradient(135deg, #1d4ed8 0%, #4f46e5 52%, #7c3aed 100%);
  --hero-brand-badge-bg: rgb(255 255 255 / .38);
  --hero-brand-badge-line: rgb(255 255 255 / .75);
  --hero-brand-badge-shadow: 0 8px 24px rgb(58 100 185 / .12), inset 0 1px 0 rgb(255 255 255 / .65);
}

:root[data-theme="dark"] {
  --hero-brand-ink: #edf3ff;
  --hero-brand-muted: #a7b6d1;
  --hero-brand-surface: #18253d;
  --hero-brand-line: #334567;
  --hero-brand-mobile-veil: #15253f;
  --hero-brand-backdrop:
    linear-gradient(180deg, transparent 60%, var(--color-bg) 100%),
    radial-gradient(ellipse at 76% 32%, #203668, transparent 55%),
    linear-gradient(120deg, #14223a, #101b2f);
  --hero-brand-badge-bg: rgb(24 37 61 / .45);
  --hero-brand-badge-line: rgb(152 185 255 / .25);
  --hero-brand-badge-shadow: 0 8px 24px rgb(0 0 0 / .18), inset 0 1px 0 rgb(152 185 255 / .15);
}