/* Five deliberately distinct hue families (violet, cyan, emerald, amber,
   pink/rose) spread around the color wheel so the themes read as clearly
   different from one another, not just different shades of navy. */
:root,
:root[data-theme="default"] {
    --theme-gradient-start: #4f46e5;
    --theme-gradient-end: #9333ea;
    --theme-primary: #7c3aed;
    --theme-primary-hover: #6d28d9;
}

:root[data-theme="sky-sand"] {
    --theme-gradient-start: #0284c7;
    --theme-gradient-end: #06b6d4;
    --theme-primary: #0891b2;
    --theme-primary-hover: #0e7490;
}

:root[data-theme="harbor"] {
    --theme-gradient-start: #0d9488;
    --theme-gradient-end: #16a34a;
    --theme-primary: #059669;
    --theme-primary-hover: #047857;
}

:root[data-theme="powder"] {
    --theme-gradient-start: #f59e0b;
    --theme-gradient-end: #ea580c;
    --theme-primary: #d97706;
    --theme-primary-hover: #b45309;
}

:root[data-theme="orchard"] {
    --theme-gradient-start: #db2777;
    --theme-gradient-end: #e11d48;
    --theme-primary: #be185d;
    --theme-primary-hover: #9d174d;
}

/* Derived tokens: computed from the two variables every theme already defines
   above, so adding theme-aware surfaces/badges never requires touching each
   theme block individually. Mix percentages are pushed up from the original
   "barely-there" tints so the selected theme is unmistakable at a glance,
   not just a faint hint. */
:root {
    --theme-primary-soft: color-mix(in srgb, var(--theme-primary) 22%, white);
    --theme-primary-softer: color-mix(in srgb, var(--theme-primary) 10%, white);
    --theme-primary-border: color-mix(in srgb, var(--theme-primary) 42%, white);
    --theme-gradient-wash: linear-gradient(135deg,
        color-mix(in srgb, var(--theme-gradient-start) 7%, white),
        color-mix(in srgb, var(--theme-gradient-end) 7%, white));

    /* Stronger tokens for surfaces that need to visibly carry the theme
       (page header banner, table header row) rather than just a faint tint. */
    --theme-header-banner: linear-gradient(120deg,
        color-mix(in srgb, var(--theme-gradient-start) 12%, white),
        color-mix(in srgb, var(--theme-gradient-end) 12%, white));
    --theme-table-header: color-mix(in srgb, var(--theme-primary) 14%, var(--surface-2, #e9e5f9));

    /* Soft, uniform lavender wash used behind every page — a couple of
       theme-tinted blobs over the neutral surface, instead of a hard banner
       band at the top. Strong enough now that each theme's hue is visible
       in the page background itself. */
    --theme-page-wash:
        radial-gradient(1100px 520px at 8% -12%, color-mix(in srgb, var(--theme-gradient-start) 16%, transparent), transparent 60%),
        radial-gradient(900px 480px at 108% -8%, color-mix(in srgb, var(--theme-gradient-end) 15%, transparent), transparent 60%),
        var(--surface-1, #f2f0fb);
}

a {
    color: var(--theme-primary);
}

a:hover {
    color: var(--theme-primary-hover);
}