/* Optional brand palettes. Status, warning, category and verification hues stay independent. */

html[data-palette="ocean"] {
  --palette-bg: #071a26;
  --palette-surface: #102c3d;
  --palette-subtle: #0b2231;
  --palette-bright: #7acfff;
  --palette-end: #7fe3e9;
  --palette-deep: #006b9a;
  --action-bg: #006b9a;
  --action-hover: #005379;
}
html[data-palette="ocean"][data-theme="light"] {
  --palette-bg: #f2faff;
  --palette-surface: #ffffff;
  --palette-subtle: #e2f2fa;
  --text: #12344a;
  --text-2: #12344a;
  --text-3: #486579;
  --text-muted: #486579;
}

html[data-palette="cobalt"] {
  --palette-bg: #0b1222;
  --palette-surface: #111d33;
  --palette-subtle: #0e172b;
  --palette-bright: #91b5ff;
  --palette-end: #85e0f5;
  --palette-deep: #134bea;
  --action-bg: #134bea;
  --action-hover: #103ab8;
}
html[data-palette="cobalt"][data-theme="light"] {
  --palette-bg: #f9fbff;
  --palette-surface: #ffffff;
  --palette-subtle: #ecf1ff;
  --text: #132341;
  --text-2: #132341;
  --text-3: #52617a;
  --text-muted: #52617a;
}

html[data-palette="forest"] {
  --palette-bg: #0d1713;
  --palette-surface: #15251d;
  --palette-subtle: #101e17;
  --palette-bright: #97d6b0;
  --palette-end: #ddd09e;
  --palette-deep: #285c45;
  --action-bg: #285c45;
  --action-hover: #1d4634;
}
html[data-palette="forest"][data-theme="light"] {
  --palette-bg: #f5f1e8;
  --palette-surface: #fcfaf5;
  --palette-subtle: #e8e8da;
  --text: #183e32;
  --text-2: #183e32;
  --text-3: #526454;
  --text-muted: #526454;
}

html[data-palette="solar"] {
  --palette-bg: #171310;
  --palette-surface: #251c15;
  --palette-subtle: #1c1611;
  --palette-bright: #ffba8c;
  --palette-end: #f8e84a;
  --palette-deep: #ad3b16;
  --action-bg: #ad3b16;
  --action-hover: #873012;
}
html[data-palette="solar"][data-theme="light"] {
  --palette-bg: #fffaf2;
  --palette-surface: #ffffff;
  --palette-subtle: #f7ecdb;
  --text: #30251e;
  --text-2: #30251e;
  --text-3: #6e594c;
  --text-muted: #6e594c;
}

html[data-palette="midnight"] {
  --palette-bg: #080e20;
  --palette-surface: #101a32;
  --palette-subtle: #0b1428;
  --palette-bright: #b6a3ff;
  --palette-end: #65e5d4;
  --palette-deep: #6244bd;
  --action-bg: #6244bd;
  --action-hover: #49328f;
}
html[data-palette="midnight"][data-theme="light"] {
  --palette-bg: #f7f8ff;
  --palette-surface: #ffffff;
  --palette-subtle: #ececff;
  --text: #1b2042;
  --text-2: #1b2042;
  --text-3: #555b79;
  --text-muted: #555b79;
}

html[data-palette="merlot"] {
  --palette-bg: #1a1016;
  --palette-surface: #291923;
  --palette-subtle: #21141c;
  --palette-bright: #edacc6;
  --palette-end: #edc1ad;
  --palette-deep: #702d45;
  --action-bg: #702d45;
  --action-hover: #552034;
}
html[data-palette="merlot"][data-theme="light"] {
  --palette-bg: #f7eeeb;
  --palette-surface: #fffbfa;
  --palette-subtle: #f0e0dd;
  --text: #482233;
  --text-2: #482233;
  --text-3: #775463;
  --text-muted: #775463;
}

html[data-palette] {
  --bg: var(--palette-bg);
  --bg-subtle: var(--palette-subtle);
  --bg-inset: var(--palette-bg);
  --surface: var(--palette-surface);
  --surface-2: color-mix(in srgb, var(--palette-surface), var(--palette-bright) 5%);
  --surface-hover: color-mix(in srgb, var(--palette-surface), var(--palette-bright) 10%);
  --surface-glass: color-mix(in srgb, var(--palette-surface) 90%, transparent);
  --text: #f4f4f9;
  --text-2: #cfcfdd;
  --text-3: #a9a9be;
  --text-muted: #a9a9be;
  --accent: var(--palette-bright);
  --accent-hover: var(--palette-end);
  --accent-text: var(--palette-bright);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-soft-2: color-mix(in srgb, var(--accent) 20%, transparent);
  --accent-ring: color-mix(in srgb, var(--accent) 45%, transparent);
  --grad-brand: linear-gradient(118deg, var(--palette-bright), var(--palette-end));
  --grad-brand-soft: var(--grad-brand);
  --grad-surface: linear-gradient(170deg, var(--surface), var(--bg));
  --glow-1: color-mix(in srgb, var(--palette-bright) 18%, transparent);
  --glow-2: color-mix(in srgb, var(--palette-end) 12%, transparent);
  --glow: var(--glow-1);
  --nav-bg: color-mix(in srgb, var(--bg) 90%, transparent);
  --nav-bg-scrolled: color-mix(in srgb, var(--bg) 96%, transparent);
}
html[data-palette][data-theme="light"] {
  --accent: var(--palette-deep);
  --accent-hover: var(--action-hover);
  --accent-text: var(--palette-deep);
  --grad-brand: linear-gradient(118deg, var(--palette-deep), var(--action-hover));
}