/* Shared, softened palettes for the site, settings previews and native sports UI.
   Keep accents readable on soft surfaces and white labels readable on button fills.
   Appearance (light/dark) is independent from the selected color family. */
:root[data-color-theme="amethyst"], .nocturne[data-color-theme="amethyst"], .m-color-preview[data-color-theme="amethyst"] {
  --p-bg:#f7f6fa; --p-panel:#ffffff; --p-soft:#f2eff7; --p-hover:#eae5f2;
  --p-text:#2f2440; --p-secondary:#675b77; --p-muted:#72657e; --p-line:#e5e1ec;
  --p-accent:#79559e; --p-accent-soft:#eee7f5; --p-button:#8255a6; --p-button-end:#70549d;
}
:root[data-theme="dark"][data-color-theme="amethyst"], .nocturne.theme-dark[data-color-theme="amethyst"], .m-color-preview.theme-dark[data-color-theme="amethyst"] {
  --p-bg:#14131c; --p-panel:#1e1c29; --p-soft:#282533; --p-hover:#322d3e;
  --p-text:#f1ecfa; --p-secondary:#c1b9ce; --p-muted:#a296b3; --p-line:#3b3547;
  --p-accent:#bba4d9; --p-accent-soft:#372d45; --p-button:#8255a6; --p-button-end:#70549d;
}
:root[data-color-theme="emerald"], .nocturne[data-color-theme="emerald"], .m-color-preview[data-color-theme="emerald"] {
  --p-bg:#f5f8f6; --p-panel:#ffffff; --p-soft:#edf3ef; --p-hover:#e2ebe5;
  --p-text:#173e32; --p-secondary:#44695a; --p-muted:#4e6c5e; --p-line:#dce6df;
  --p-accent:#39735e; --p-accent-soft:#e1eee5; --p-button:#38765f; --p-button-end:#376752;
}
:root[data-theme="dark"][data-color-theme="emerald"], .nocturne.theme-dark[data-color-theme="emerald"], .m-color-preview.theme-dark[data-color-theme="emerald"] {
  --p-bg:#111a17; --p-panel:#1b2823; --p-soft:#26362e; --p-hover:#32463c;
  --p-text:#e9f7ef; --p-secondary:#b4cfc1; --p-muted:#98b9a8; --p-line:#3a4c42;
  --p-accent:#8ac8af; --p-accent-soft:#2a3c33; --p-button:#38765f; --p-button-end:#376752;
}
:root[data-color-theme="ocean"], .nocturne[data-color-theme="ocean"], .m-color-preview[data-color-theme="ocean"] {
  --p-bg:#f5f7fb; --p-panel:#ffffff; --p-soft:#eef2f8; --p-hover:#e4ebf4;
  --p-text:#203b5e; --p-secondary:#4d6481; --p-muted:#556983; --p-line:#dfe5ee;
  --p-accent:#4b68a0; --p-accent-soft:#e4ecf7; --p-button:#4b6fa5; --p-button-end:#4b6092;
}
:root[data-theme="dark"][data-color-theme="ocean"], .nocturne.theme-dark[data-color-theme="ocean"], .m-color-preview.theme-dark[data-color-theme="ocean"] {
  --p-bg:#141923; --p-panel:#1e2734; --p-soft:#283446; --p-hover:#344258;
  --p-text:#eaf2ff; --p-secondary:#b8cce7; --p-muted:#9eb5d5; --p-line:#3b4c63;
  --p-accent:#9cbee5; --p-accent-soft:#2c3d53; --p-button:#4b6fa5; --p-button-end:#4b6092;
}
:root[data-color-theme="rose"], .nocturne[data-color-theme="rose"], .m-color-preview[data-color-theme="rose"] {
  --p-bg:#faf6f8; --p-panel:#ffffff; --p-soft:#f6eef2; --p-hover:#f0e4eb;
  --p-text:#482639; --p-secondary:#785269; --p-muted:#835f74; --p-line:#e9dfe5;
  --p-accent:#a04c73; --p-accent-soft:#f3e3ec; --p-button:#aa507b; --p-button-end:#915372;
}
:root[data-theme="dark"][data-color-theme="rose"], .nocturne.theme-dark[data-color-theme="rose"], .m-color-preview.theme-dark[data-color-theme="rose"] {
  --p-bg:#21191f; --p-panel:#2c222c; --p-soft:#392d37; --p-hover:#473844;
  --p-text:#fcecf5; --p-secondary:#dfbace; --p-muted:#c4a0b6; --p-line:#51424b;
  --p-accent:#dca6c0; --p-accent-soft:#49313f; --p-button:#aa507b; --p-button-end:#915372;
}

.nocturne[class][data-color-theme] {
  --n-ivory:var(--p-text); --n-muted:var(--p-secondary); --n-line:var(--p-line);
  --crystal-edge:var(--p-accent);
  --crystal-wash:linear-gradient(135deg,color-mix(in srgb,var(--p-accent) 16%,transparent),transparent);
  --crystal-floor-core:color-mix(in srgb,var(--p-accent) 65%,white);
  --crystal-floor-halo:color-mix(in srgb,var(--p-accent) 30%,transparent);
}
html[data-theme][data-color-theme] { background:var(--p-bg) }
.nocturne[data-color-theme] .n-primary {
  background:linear-gradient(105deg,var(--p-button),var(--p-button-end))!important;
}
.nocturne[data-color-theme] .n-avatar, .nocturne[data-color-theme] .m-user-avatar {
  background:linear-gradient(140deg,var(--p-button),var(--p-button-end))!important;
}
.nocturne[data-color-theme] .m-wallet-summary {
  background:linear-gradient(110deg,var(--p-button-end),var(--p-button));
}
.nocturne[data-color-theme] .m-wallet-summary span, .nocturne[data-color-theme] .m-wallet-summary .m-icon { color:#fff!important }

/* Compact, keyboard-accessible palette cards; previews use the same tokens. */
.nocturne .m-color-heading { font:600 13px/1.5 system-ui; margin:23px 0 11px; color:var(--p-secondary) }
.nocturne .m-color-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:18px }
.nocturne .m-color-option { padding:7px!important; border:1px solid var(--p-line)!important; border-radius:10px; text-align:left; background:var(--p-panel); min-width:0 }
.nocturne .m-color-option:hover { border-color:var(--p-accent)!important }
.nocturne .m-color-option[aria-pressed="true"] { border-color:var(--p-accent)!important; box-shadow:0 0 0 1px var(--p-accent); background:var(--p-accent-soft) }
.m-color-preview { display:grid; grid-template-columns:17px 1fr; grid-template-rows:9px 1fr; gap:6px; height:48px; padding:8px; border-radius:5px; background:var(--p-bg) }
.m-color-preview i { background:var(--p-panel); border-radius:3px }
.m-color-preview i:first-child { grid-row:1/3; background:var(--p-soft); border-bottom:3px solid var(--p-accent) }
.m-color-preview i:last-child { width:64%; background:linear-gradient(100deg,var(--p-button),var(--p-accent)) }
.nocturne .m-color-label { display:flex; align-items:center; justify-content:space-between; padding:9px 4px 3px; font-size:12px; font-weight:550; color:var(--p-text) }
.nocturne .m-color-label svg { width:15px!important; height:15px!important; color:var(--p-accent); visibility:hidden }
.nocturne .m-color-option[aria-pressed="true"] .m-color-label svg { visibility:visible }