@relements/core 0.2.0 → 0.4.0

package/dist/themes/renascent.css

@@ -1 +1 @@
-:root{--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--re-color-bg:#0f131a;--re-color-bg-subtle:#171c26;--re-color-bg-muted:#1f2430;--re-color-surface:#171c26;--re-color-text:#f8fafc;--re-color-text-muted:#97a3b4;--re-color-text-subtle:#6b7a90;--re-color-border:#29303d;--re-color-border-strong:#353d4d;--re-color-accent-50:#eff6ff;--re-color-accent-100:#dbeafe;--re-color-accent-200:#bdd6fe;--re-color-accent-300:#93c3fd;--re-color-accent-400:#60a5fa;--re-color-accent-500:#60a5fa;--re-color-accent-600:#3c83f6;--re-color-accent-700:#2563eb;--re-color-accent-800:#1d4ed8;--re-color-accent-900:#1e3a8a;--re-color-link:#3c83f6;--re-color-link-hover:#60a5fa;--re-color-link-visited:#a78bfa;--re-color-focus-ring:#3c83f6;--re-color-text-on-accent:#0f131a;--re-color-success-500:#2fe9d0;--re-color-success-600:#0fd4bb;--re-color-success-700:#0ab8a2;--re-color-warning-500:#f9cf53;--re-color-warning-600:#f0b929;--re-color-warning-700:#d4a020;--re-color-danger-500:#ef4444;--re-color-danger-600:#dc2626;--re-color-danger-700:#b91c1c;--re-focus-ring-offset:0px;--re-shadow-focus:0 0 0 2px var(--re-color-focus-ring);--re-color-selection-bg:#3c83f64d;--re-color-selection-text:#f8fafc;--re-color-text-danger:#f87171;--re-color-border-danger:#ef4444;--re-color-phoenix:#f3753f;--re-color-phoenix-light:#f9a07a;--re-color-phoenix-dark:#d45a26;--re-color-purple:#a855f7;--re-color-purple-light:#c084fc;--re-color-purple-dark:#7c3aed;--re-gradient-brand:linear-gradient(135deg, #3c83f6, #a855f7);--re-gradient-phoenix:linear-gradient(135deg, #f3753f, #f9cf53);--re-gradient-hero:linear-gradient(135deg, #3c83f6 0%, #a855f7 50%, #f3753f 100%)}.theme-renascent{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--re-color-bg:#0f131a;--re-color-bg-subtle:#171c26;--re-color-bg-muted:#1f2430;--re-color-surface:#171c26;--re-color-text:#f8fafc;--re-color-text-muted:#97a3b4;--re-color-text-subtle:#6b7a90;--re-color-border:#29303d;--re-color-border-strong:#353d4d;--re-color-accent-500:#3c83f6;--re-color-accent-600:#2563eb;--re-color-accent-700:#1d4ed8;--re-color-link:#3c83f6;--re-color-link-hover:#60a5fa;--re-color-focus-ring:#3c83f6;--re-color-text-on-accent:#0f131a;--re-color-text-danger:#f87171;--re-color-border-danger:#ef4444;--re-color-success-500:#2fe9d0;--re-color-success-600:#0fd4bb;--re-color-success-700:#0ab8a2;--re-color-warning-500:#f9cf53;--re-color-warning-600:#f0b929;--re-color-warning-700:#d4a020;--re-color-danger-500:#ef4444;--re-color-danger-600:#dc2626;--re-color-danger-700:#b91c1c;--re-focus-ring-offset:0px;--re-shadow-focus:0 0 0 2px var(--re-color-focus-ring);--re-color-selection-bg:#3c83f64d;--re-color-selection-text:#f8fafc;background-color:var(--re-color-bg);color:var(--re-color-text)}.re-button[data-variant=phoenix]{background:var(--re-gradient-phoenix);color:#fff;border-color:#0000}.re-button[data-variant=phoenix]:hover{filter:brightness(1.12);background:var(--re-gradient-phoenix)}.re-button[data-variant=phoenix]:active{filter:brightness(.9)}.re-button[data-variant=phoenix]:focus-visible{border-color:#0000}.re-button[data-variant=phoenix]:disabled,.re-button[data-variant=phoenix][aria-disabled=true]{filter:none;opacity:.55}.re-button[data-variant=brand]{background:var(--re-gradient-brand);color:#fff;border-color:#0000}.re-button[data-variant=brand]:hover{filter:brightness(1.12);background:var(--re-gradient-brand)}.re-button[data-variant=brand]:active{filter:brightness(.9)}.re-button[data-variant=brand]:focus-visible{border-color:#0000}.re-button[data-variant=brand]:disabled,.re-button[data-variant=brand][aria-disabled=true]{filter:none;opacity:.55}
+:root{--re-rn-dark-bg:#0f131a;--re-rn-dark-bg-subtle:#171c26;--re-rn-dark-bg-muted:#1f2430;--re-rn-dark-surface:#171c26;--re-rn-dark-text:#f8fafc;--re-rn-dark-text-muted:#97a3b4;--re-rn-dark-text-subtle:#6b7a90;--re-rn-dark-text-danger:#f87171;--re-rn-dark-border:#29303d;--re-rn-dark-border-strong:#353d4d;--re-rn-dark-border-danger:#ef4444;--re-rn-dark-link:#3c83f6;--re-rn-dark-link-hover:#60a5fa;--re-rn-dark-link-visited:#a78bfa;--re-rn-dark-selection-bg:#3c83f64d;--re-rn-dark-selection-text:#f8fafc;--re-rn-dark-focus-ring-offset:0px;--re-rn-dark-shadow-focus:0 0 0 2px var(--re-color-focus-ring);--re-rn-dark-info-surface:oklab(27.3825% -.00852493 -.0491423);--re-rn-dark-info-border:#60a5fa;--re-rn-dark-info-text:#93c3fd;--re-rn-dark-success-surface:oklab(31.6968% -.0306542 -.0128758);--re-rn-dark-success-border:#2fe9d0;--re-rn-dark-success-text:#2fe9d0;--re-rn-dark-warning-surface:oklab(32.2476% -.00189379 .0168638);--re-rn-dark-warning-border:#f9cf53;--re-rn-dark-warning-text:#f9cf53;--re-rn-dark-danger-surface:oklab(27.6095% .0357271 .00536118);--re-rn-dark-danger-border:#ef4444;--re-rn-dark-danger-text:#f87171;--re-rn-dark-accent-600:#3c83f6;--re-rn-dark-accent-700:#2563eb;--re-rn-dark-accent-800:#1d4ed8;--re-rn-light-bg:#f6f8fc;--re-rn-light-bg-subtle:#eef2f8;--re-rn-light-bg-muted:#e3e9f2;--re-rn-light-surface:#fff;--re-rn-light-text:#0f131a;--re-rn-light-text-muted:#475569;--re-rn-light-text-subtle:#64748b;--re-rn-light-text-danger:#b91c1c;--re-rn-light-border:#d7dfea;--re-rn-light-border-strong:#c0cad9;--re-rn-light-border-danger:#dc2626;--re-rn-light-link:#2563eb;--re-rn-light-link-hover:#1d4ed8;--re-rn-light-link-visited:#7c3aed;--re-rn-light-selection-bg:#3c83f62e;--re-rn-light-selection-text:#0f131a;--re-rn-light-focus-ring-offset:2px;--re-rn-light-shadow-focus:0 0 0 var(--re-focus-ring-offset) var(--re-color-bg), 0 0 0 calc(var(--re-focus-ring-offset) + var(--re-focus-ring-width)) var(--re-color-focus-ring);--re-rn-light-info-surface:oklab(93.6354% -.0044884 -.0270548);--re-rn-light-info-border:#3c83f6;--re-rn-light-info-text:#2563eb;--re-rn-light-success-surface:oklab(96.224% -.0177659 -.0052949);--re-rn-light-success-border:#0fd4bb;--re-rn-light-success-text:#0f766e;--re-rn-light-warning-surface:oklab(96.5544% -.000509714 .0125489);--re-rn-light-warning-border:#f0b929;--re-rn-light-warning-text:#b45309;--re-rn-light-danger-surface:oklab(93.7716% .0220628 .00564731);--re-rn-light-danger-border:#dc2626;--re-rn-light-danger-text:#b91c1c;--re-rn-light-accent-600:#2563eb;--re-rn-light-accent-700:#1d4ed8;--re-rn-light-accent-800:#1e40af;--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--re-color-bg:var(--re-rn-dark-bg);--re-color-bg-subtle:var(--re-rn-dark-bg-subtle);--re-color-bg-muted:var(--re-rn-dark-bg-muted);--re-color-surface:var(--re-rn-dark-surface);--re-color-text:var(--re-rn-dark-text);--re-color-text-muted:var(--re-rn-dark-text-muted);--re-color-text-subtle:var(--re-rn-dark-text-subtle);--re-color-border:var(--re-rn-dark-border);--re-color-border-strong:var(--re-rn-dark-border-strong);--re-color-accent-50:#eff6ff;--re-color-accent-100:#dbeafe;--re-color-accent-200:#bdd6fe;--re-color-accent-300:#93c3fd;--re-color-accent-400:#60a5fa;--re-color-accent-500:#60a5fa;--re-color-accent-600:#3c83f6;--re-color-accent-700:#2563eb;--re-color-accent-800:#1d4ed8;--re-color-accent-900:#1e3a8a;--re-color-link:var(--re-rn-dark-link);--re-color-link-hover:var(--re-rn-dark-link-hover);--re-color-link-visited:var(--re-rn-dark-link-visited);--re-color-focus-ring:#3c83f6;--re-color-text-on-accent:#fff;--re-color-success-500:#2fe9d0;--re-color-success-600:#0fd4bb;--re-color-success-700:#0ab8a2;--re-color-warning-500:#f9cf53;--re-color-warning-600:#f0b929;--re-color-warning-700:#d4a020;--re-color-danger-500:#ef4444;--re-color-danger-600:#dc2626;--re-color-danger-700:#b91c1c;--re-color-info-surface:var(--re-rn-dark-info-surface);--re-color-info-border:var(--re-rn-dark-info-border);--re-color-info-text:var(--re-rn-dark-info-text);--re-color-success-surface:var(--re-rn-dark-success-surface);--re-color-success-border:var(--re-rn-dark-success-border);--re-color-success-text:var(--re-rn-dark-success-text);--re-color-warning-surface:var(--re-rn-dark-warning-surface);--re-color-warning-border:var(--re-rn-dark-warning-border);--re-color-warning-text:var(--re-rn-dark-warning-text);--re-color-danger-surface:var(--re-rn-dark-danger-surface);--re-color-danger-border:var(--re-rn-dark-danger-border);--re-color-danger-text:var(--re-rn-dark-danger-text);--re-focus-ring-offset:var(--re-rn-dark-focus-ring-offset);--re-shadow-focus:var(--re-rn-dark-shadow-focus);--re-color-selection-bg:var(--re-rn-dark-selection-bg);--re-color-selection-text:var(--re-rn-dark-selection-text);--re-color-text-danger:var(--re-rn-dark-text-danger);--re-color-border-danger:var(--re-rn-dark-border-danger);--re-color-phoenix:#f3753f;--re-color-phoenix-light:#f9a07a;--re-color-phoenix-dark:#d45a26;--re-color-purple:#a855f7;--re-color-purple-light:#c084fc;--re-color-purple-dark:#7c3aed;--re-gradient-brand:linear-gradient(135deg, #3c83f6, #a855f7);--re-gradient-phoenix:linear-gradient(135deg, #f3753f, #f9cf53);--re-gradient-hero:linear-gradient(135deg, #3c83f6 0%, #a855f7 50%, #f3753f 100%)}.theme-renascent,.theme-renascent-dark{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--re-color-bg:var(--re-rn-dark-bg);--re-color-bg-subtle:var(--re-rn-dark-bg-subtle);--re-color-bg-muted:var(--re-rn-dark-bg-muted);--re-color-surface:var(--re-rn-dark-surface);--re-color-text:var(--re-rn-dark-text);--re-color-text-muted:var(--re-rn-dark-text-muted);--re-color-text-subtle:var(--re-rn-dark-text-subtle);--re-color-border:var(--re-rn-dark-border);--re-color-border-strong:var(--re-rn-dark-border-strong);--re-color-accent-500:#3c83f6;--re-color-accent-600:#2563eb;--re-color-accent-700:#1d4ed8;--re-color-link:var(--re-rn-dark-link);--re-color-link-hover:var(--re-rn-dark-link-hover);--re-color-focus-ring:#3c83f6;--re-color-text-on-accent:#fff;--re-color-text-danger:var(--re-rn-dark-text-danger);--re-color-border-danger:var(--re-rn-dark-border-danger);--re-color-success-500:#2fe9d0;--re-color-success-600:#0fd4bb;--re-color-success-700:#0ab8a2;--re-color-warning-500:#f9cf53;--re-color-warning-600:#f0b929;--re-color-warning-700:#d4a020;--re-color-danger-500:#ef4444;--re-color-danger-600:#dc2626;--re-color-danger-700:#b91c1c;--re-color-info-surface:var(--re-rn-dark-info-surface);--re-color-info-border:var(--re-rn-dark-info-border);--re-color-info-text:var(--re-rn-dark-info-text);--re-color-success-surface:var(--re-rn-dark-success-surface);--re-color-success-border:var(--re-rn-dark-success-border);--re-color-success-text:var(--re-rn-dark-success-text);--re-color-warning-surface:var(--re-rn-dark-warning-surface);--re-color-warning-border:var(--re-rn-dark-warning-border);--re-color-warning-text:var(--re-rn-dark-warning-text);--re-color-danger-surface:var(--re-rn-dark-danger-surface);--re-color-danger-border:var(--re-rn-dark-danger-border);--re-color-danger-text:var(--re-rn-dark-danger-text);--re-focus-ring-offset:var(--re-rn-dark-focus-ring-offset);--re-shadow-focus:var(--re-rn-dark-shadow-focus);--re-color-selection-bg:var(--re-rn-dark-selection-bg);--re-color-selection-text:var(--re-rn-dark-selection-text);background-color:var(--re-color-bg);color:var(--re-color-text)}@media (prefers-color-scheme:light){:root,.theme-renascent{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--re-color-bg:var(--re-rn-light-bg);--re-color-bg-subtle:var(--re-rn-light-bg-subtle);--re-color-bg-muted:var(--re-rn-light-bg-muted);--re-color-surface:var(--re-rn-light-surface);--re-color-text:var(--re-rn-light-text);--re-color-text-muted:var(--re-rn-light-text-muted);--re-color-text-subtle:var(--re-rn-light-text-subtle);--re-color-text-on-accent:#fff;--re-color-accent-600:var(--re-rn-light-accent-600);--re-color-accent-700:var(--re-rn-light-accent-700);--re-color-accent-800:var(--re-rn-light-accent-800);--re-color-text-danger:var(--re-rn-light-text-danger);--re-color-border:var(--re-rn-light-border);--re-color-border-strong:var(--re-rn-light-border-strong);--re-color-border-danger:var(--re-rn-light-border-danger);--re-color-link:var(--re-rn-light-link);--re-color-link-hover:var(--re-rn-light-link-hover);--re-color-link-visited:var(--re-rn-light-link-visited);--re-color-focus-ring:#3c83f6;--re-color-selection-bg:var(--re-rn-light-selection-bg);--re-color-selection-text:var(--re-rn-light-selection-text);--re-focus-ring-offset:var(--re-rn-light-focus-ring-offset);--re-shadow-focus:var(--re-rn-light-shadow-focus);--re-color-info-surface:var(--re-rn-light-info-surface);--re-color-info-border:var(--re-rn-light-info-border);--re-color-info-text:var(--re-rn-light-info-text);--re-color-success-surface:var(--re-rn-light-success-surface);--re-color-success-border:var(--re-rn-light-success-border);--re-color-success-text:var(--re-rn-light-success-text);--re-color-warning-surface:var(--re-rn-light-warning-surface);--re-color-warning-border:var(--re-rn-light-warning-border);--re-color-warning-text:var(--re-rn-light-warning-text);--re-color-danger-surface:var(--re-rn-light-danger-surface);--re-color-danger-border:var(--re-rn-light-danger-border);--re-color-danger-text:var(--re-rn-light-danger-text)}}.theme-renascent-light{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--re-color-bg:var(--re-rn-light-bg);--re-color-bg-subtle:var(--re-rn-light-bg-subtle);--re-color-bg-muted:var(--re-rn-light-bg-muted);--re-color-surface:var(--re-rn-light-surface);--re-color-text:var(--re-rn-light-text);--re-color-text-muted:var(--re-rn-light-text-muted);--re-color-text-subtle:var(--re-rn-light-text-subtle);--re-color-text-on-accent:#fff;--re-color-accent-600:var(--re-rn-light-accent-600);--re-color-accent-700:var(--re-rn-light-accent-700);--re-color-accent-800:var(--re-rn-light-accent-800);--re-color-text-danger:var(--re-rn-light-text-danger);--re-color-border:var(--re-rn-light-border);--re-color-border-strong:var(--re-rn-light-border-strong);--re-color-border-danger:var(--re-rn-light-border-danger);--re-color-link:var(--re-rn-light-link);--re-color-link-hover:var(--re-rn-light-link-hover);--re-color-link-visited:var(--re-rn-light-link-visited);--re-color-focus-ring:#3c83f6;--re-color-selection-bg:var(--re-rn-light-selection-bg);--re-color-selection-text:var(--re-rn-light-selection-text);--re-focus-ring-offset:var(--re-rn-light-focus-ring-offset);--re-shadow-focus:var(--re-rn-light-shadow-focus);--re-color-info-surface:var(--re-rn-light-info-surface);--re-color-info-border:var(--re-rn-light-info-border);--re-color-info-text:var(--re-rn-light-info-text);--re-color-success-surface:var(--re-rn-light-success-surface);--re-color-success-border:var(--re-rn-light-success-border);--re-color-success-text:var(--re-rn-light-success-text);--re-color-warning-surface:var(--re-rn-light-warning-surface);--re-color-warning-border:var(--re-rn-light-warning-border);--re-color-warning-text:var(--re-rn-light-warning-text);--re-color-danger-surface:var(--re-rn-light-danger-surface);--re-color-danger-border:var(--re-rn-light-danger-border);--re-color-danger-text:var(--re-rn-light-danger-text);background-color:var(--re-color-bg);color:var(--re-color-text)}.re-button[data-variant=phoenix]{background:var(--re-gradient-phoenix);color:#fff;background-origin:border-box;border-color:#0000}.re-button[data-variant=phoenix]:hover{filter:brightness(1.12)}.re-button[data-variant=phoenix]:active{filter:brightness(.9)}.re-button[data-variant=phoenix]:focus-visible{border-color:#0000}.re-button[data-variant=phoenix]:disabled,.re-button[data-variant=phoenix][aria-disabled=true]{filter:none;opacity:.55}.re-button[data-variant=brand]{background:var(--re-gradient-brand);color:#fff;background-origin:border-box;border-color:#0000}.re-button[data-variant=brand]:hover{filter:brightness(1.12)}.re-button[data-variant=brand]:active{filter:brightness(.9)}.re-button[data-variant=brand]:focus-visible{border-color:#0000}.re-button[data-variant=brand]:disabled,.re-button[data-variant=brand][aria-disabled=true]{filter:none;opacity:.55}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@relements/core",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "HTML-first design system core: tokens, styles, and progressive enhancement.",
   "repository": {
     "type": "git",

package/src/themes/renascent.css

@@ -14,6 +14,93 @@
  * Consumer overrides still win because this file is un-layered.
  */
 
+/* ============================================================
+   Per-scheme brand palette (concrete values, always available)
+
+   These --re-rn-{dark,light}-* custom properties expose the
+   Renascent palette as concrete values regardless of the active
+   scheme, so consumers can map them onto their own theme
+   mechanism. The scheme blocks below reference these instead of
+   repeating literals — single source of truth, no duplication.
+   Computed values are identical to the originals.
+   ============================================================ */
+:root {
+  /* ----- DARK palette --------------------------------------- */
+  --re-rn-dark-bg: #0f131a;
+  --re-rn-dark-bg-subtle: #171c26;
+  --re-rn-dark-bg-muted: #1f2430;
+  --re-rn-dark-surface: #171c26;
+  --re-rn-dark-text: #f8fafc;
+  --re-rn-dark-text-muted: #97a3b4;
+  --re-rn-dark-text-subtle: #6b7a90;
+  --re-rn-dark-text-danger: #f87171;
+  --re-rn-dark-border: #29303d;
+  --re-rn-dark-border-strong: #353d4d;
+  --re-rn-dark-border-danger: #ef4444;
+  --re-rn-dark-link: #3c83f6;
+  --re-rn-dark-link-hover: #60a5fa;
+  --re-rn-dark-link-visited: #a78bfa;
+  --re-rn-dark-selection-bg: rgba(60, 131, 246, 0.3);
+  --re-rn-dark-selection-text: #f8fafc;
+  --re-rn-dark-focus-ring-offset: 0px;
+  --re-rn-dark-shadow-focus: 0 0 0 2px var(--re-color-focus-ring);
+  --re-rn-dark-info-surface: color-mix(in oklab, #3c83f6 20%, #0f131a);
+  --re-rn-dark-info-border: #60a5fa;
+  --re-rn-dark-info-text: #93c3fd;
+  --re-rn-dark-success-surface: color-mix(in oklab, #2fe9d0 20%, #0f131a);
+  --re-rn-dark-success-border: #2fe9d0;
+  --re-rn-dark-success-text: #2fe9d0;
+  --re-rn-dark-warning-surface: color-mix(in oklab, #f9cf53 20%, #0f131a);
+  --re-rn-dark-warning-border: #f9cf53;
+  --re-rn-dark-warning-text: #f9cf53;
+  --re-rn-dark-danger-surface: color-mix(in oklab, #ef4444 20%, #0f131a);
+  --re-rn-dark-danger-border: #ef4444;
+  --re-rn-dark-danger-text: #f87171;
+  /* Interactive accent steps (button base/hover/active) for dark. */
+  --re-rn-dark-accent-600: #3c83f6;
+  --re-rn-dark-accent-700: #2563eb;
+  --re-rn-dark-accent-800: #1d4ed8;
+
+  /* ----- LIGHT palette -------------------------------------- */
+  --re-rn-light-bg: #f6f8fc;
+  --re-rn-light-bg-subtle: #eef2f8;
+  --re-rn-light-bg-muted: #e3e9f2;
+  --re-rn-light-surface: #ffffff;
+  --re-rn-light-text: #0f131a;
+  --re-rn-light-text-muted: #475569;
+  --re-rn-light-text-subtle: #64748b;
+  --re-rn-light-text-danger: #b91c1c;
+  --re-rn-light-border: #d7dfea;
+  --re-rn-light-border-strong: #c0cad9;
+  --re-rn-light-border-danger: #dc2626;
+  --re-rn-light-link: #2563eb;
+  --re-rn-light-link-hover: #1d4ed8;
+  --re-rn-light-link-visited: #7c3aed;
+  --re-rn-light-selection-bg: rgba(60, 131, 246, 0.18);
+  --re-rn-light-selection-text: #0f131a;
+  --re-rn-light-focus-ring-offset: 2px;
+  --re-rn-light-shadow-focus:
+    0 0 0 var(--re-focus-ring-offset) var(--re-color-bg),
+    0 0 0 calc(var(--re-focus-ring-offset) + var(--re-focus-ring-width)) var(--re-color-focus-ring);
+  --re-rn-light-info-surface: color-mix(in oklab, #3c83f6 12%, #f6f8fc);
+  --re-rn-light-info-border: #3c83f6;
+  --re-rn-light-info-text: #2563eb;
+  --re-rn-light-success-surface: color-mix(in oklab, #2fe9d0 12%, #f6f8fc);
+  --re-rn-light-success-border: #0fd4bb;
+  --re-rn-light-success-text: #0f766e;
+  --re-rn-light-warning-surface: color-mix(in oklab, #f9cf53 12%, #f6f8fc);
+  --re-rn-light-warning-border: #f0b929;
+  --re-rn-light-warning-text: #b45309;
+  --re-rn-light-danger-surface: color-mix(in oklab, #ef4444 12%, #f6f8fc);
+  --re-rn-light-danger-border: #dc2626;
+  --re-rn-light-danger-text: #b91c1c;
+  /* On light bg, white-on-accent buttons need accent-600 = #2563eb
+     (white 5.17:1); the dark #3c83f6 only reaches 3.64:1. */
+  --re-rn-light-accent-600: #2563eb;
+  --re-rn-light-accent-700: #1d4ed8;
+  --re-rn-light-accent-800: #1e40af;
+}
+
 /* ============================================================
    Global dark theme (matches the renascentelements.hu design)
    ============================================================ */
@@ -21,19 +108,19 @@
   color-scheme: dark;
 
   /* ----- Backgrounds ---------------------------------------- */
-  --re-color-bg: #0f131a; /* hsl(220 27% 8%)  — page background  */
-  --re-color-bg-subtle: #171c26; /* hsl(220 25% 12%) — card / surface   */
-  --re-color-bg-muted: #1f2430; /* hsl(220 20% 15%) — muted section    */
-  --re-color-surface: #171c26;
+  --re-color-bg: var(--re-rn-dark-bg); /* hsl(220 27% 8%)  — page background  */
+  --re-color-bg-subtle: var(--re-rn-dark-bg-subtle); /* hsl(220 25% 12%) — card / surface   */
+  --re-color-bg-muted: var(--re-rn-dark-bg-muted); /* hsl(220 20% 15%) — muted section    */
+  --re-color-surface: var(--re-rn-dark-surface);
 
   /* ----- Text ----------------------------------------------- */
-  --re-color-text: #f8fafc; /* hsl(210 40% 98%) — primary text     */
-  --re-color-text-muted: #97a3b4; /* hsl(215 16% 65%) — secondary text   */
-  --re-color-text-subtle: #6b7a90; /* dimmer tertiary text                */
+  --re-color-text: var(--re-rn-dark-text); /* hsl(210 40% 98%) — primary text     */
+  --re-color-text-muted: var(--re-rn-dark-text-muted); /* hsl(215 16% 65%) — secondary text   */
+  --re-color-text-subtle: var(--re-rn-dark-text-subtle); /* dimmer tertiary text                */
 
   /* ----- Border --------------------------------------------- */
-  --re-color-border: #29303d; /* hsl(220 20% 20%) */
-  --re-color-border-strong: #353d4d;
+  --re-color-border: var(--re-rn-dark-border); /* hsl(220 20% 20%) */
+  --re-color-border-strong: var(--re-rn-dark-border-strong);
 
   /* ----- Brand: electric blue (primary interactive) ---------
      Their --primary is hsl(217 91% 60%) = #3c83f6.
@@ -50,11 +137,13 @@
   --re-color-accent-900: #1e3a8a;
 
   /* ----- Semantic role colors ------------------------------- */
-  --re-color-link: #3c83f6;
-  --re-color-link-hover: #60a5fa;
-  --re-color-link-visited: #a78bfa;
+  --re-color-link: var(--re-rn-dark-link);
+  --re-color-link-hover: var(--re-rn-dark-link-hover);
+  --re-color-link-visited: var(--re-rn-dark-link-visited);
   --re-color-focus-ring: #3c83f6;
-  --re-color-text-on-accent: #0f131a;
+  /* White on accent-600 (#2563eb) = 5.17:1; the dark navy used elsewhere
+     only reaches 3.6:1 on the blue/red button fills, below WCAG AA. */
+  --re-color-text-on-accent: #ffffff;
 
   /* ----- Semantic feedback ---------------------------------- */
   /* Success: teal (hsl(172 81% 55%) — their --success)        */
@@ -72,21 +161,40 @@
   --re-color-danger-600: #dc2626;
   --re-color-danger-700: #b91c1c;
 
+  /* ----- Status surfaces (dark) -----------------------------
+     Defined explicitly so they mix against this theme's dark bg.
+     Without these they inherit the un-themed :root tokens, whose
+     color-mix captured the light-mode bg → light alert surfaces
+     under dark-section body text (≈1.05:1). White body text on
+     these 20%/dark mixes clears AA (≥4.5:1).                    */
+  --re-color-info-surface: var(--re-rn-dark-info-surface);
+  --re-color-info-border: var(--re-rn-dark-info-border);
+  --re-color-info-text: var(--re-rn-dark-info-text);
+  --re-color-success-surface: var(--re-rn-dark-success-surface);
+  --re-color-success-border: var(--re-rn-dark-success-border);
+  --re-color-success-text: var(--re-rn-dark-success-text);
+  --re-color-warning-surface: var(--re-rn-dark-warning-surface);
+  --re-color-warning-border: var(--re-rn-dark-warning-border);
+  --re-color-warning-text: var(--re-rn-dark-warning-text);
+  --re-color-danger-surface: var(--re-rn-dark-danger-surface);
+  --re-color-danger-border: var(--re-rn-dark-danger-border);
+  --re-color-danger-text: var(--re-rn-dark-danger-text);
+
   /* ----- Focus ring on dark background ----------------------
      Remove the offset gap: the "white gap" trick is for light
      themes. On dark bg, offset + border = double blue line.     */
-  --re-focus-ring-offset: 0px;
-  --re-shadow-focus: 0 0 0 2px var(--re-color-focus-ring);
+  --re-focus-ring-offset: var(--re-rn-dark-focus-ring-offset);
+  --re-shadow-focus: var(--re-rn-dark-shadow-focus);
 
   /* ----- Selection ------------------------------------------ */
-  --re-color-selection-bg: rgba(60, 131, 246, 0.3);
-  --re-color-selection-text: #f8fafc;
+  --re-color-selection-bg: var(--re-rn-dark-selection-bg);
+  --re-color-selection-text: var(--re-rn-dark-selection-text);
 
   /* ----- Text danger for validation messages ---------------- */
-  --re-color-text-danger: #f87171; /* lighter red for dark backgrounds */
+  --re-color-text-danger: var(--re-rn-dark-text-danger); /* lighter red for dark backgrounds */
 
   /* ----- Border danger -------------------------------------- */
-  --re-color-border-danger: #ef4444;
+  --re-color-border-danger: var(--re-rn-dark-border-danger);
 }
 
 /* ============================================================
@@ -111,27 +219,28 @@
 /* ============================================================
    Scoped class — apply on any container instead of :root
    ============================================================ */
-.theme-renascent {
+.theme-renascent,
+.theme-renascent-dark {
   color-scheme: dark;
 
-  --re-color-bg: #0f131a;
-  --re-color-bg-subtle: #171c26;
-  --re-color-bg-muted: #1f2430;
-  --re-color-surface: #171c26;
-  --re-color-text: #f8fafc;
-  --re-color-text-muted: #97a3b4;
-  --re-color-text-subtle: #6b7a90;
-  --re-color-border: #29303d;
-  --re-color-border-strong: #353d4d;
+  --re-color-bg: var(--re-rn-dark-bg);
+  --re-color-bg-subtle: var(--re-rn-dark-bg-subtle);
+  --re-color-bg-muted: var(--re-rn-dark-bg-muted);
+  --re-color-surface: var(--re-rn-dark-surface);
+  --re-color-text: var(--re-rn-dark-text);
+  --re-color-text-muted: var(--re-rn-dark-text-muted);
+  --re-color-text-subtle: var(--re-rn-dark-text-subtle);
+  --re-color-border: var(--re-rn-dark-border);
+  --re-color-border-strong: var(--re-rn-dark-border-strong);
   --re-color-accent-500: #3c83f6;
   --re-color-accent-600: #2563eb;
   --re-color-accent-700: #1d4ed8;
-  --re-color-link: #3c83f6;
-  --re-color-link-hover: #60a5fa;
+  --re-color-link: var(--re-rn-dark-link);
+  --re-color-link-hover: var(--re-rn-dark-link-hover);
   --re-color-focus-ring: #3c83f6;
-  --re-color-text-on-accent: #0f131a;
-  --re-color-text-danger: #f87171;
-  --re-color-border-danger: #ef4444;
+  --re-color-text-on-accent: #ffffff;
+  --re-color-text-danger: var(--re-rn-dark-text-danger);
+  --re-color-border-danger: var(--re-rn-dark-border-danger);
   --re-color-success-500: #2fe9d0;
   --re-color-success-600: #0fd4bb;
   --re-color-success-700: #0ab8a2;
@@ -141,10 +250,108 @@
   --re-color-danger-500: #ef4444;
   --re-color-danger-600: #dc2626;
   --re-color-danger-700: #b91c1c;
-  --re-focus-ring-offset: 0px;
-  --re-shadow-focus: 0 0 0 2px var(--re-color-focus-ring);
-  --re-color-selection-bg: rgba(60, 131, 246, 0.3);
-  --re-color-selection-text: #f8fafc;
+  --re-color-info-surface: var(--re-rn-dark-info-surface);
+  --re-color-info-border: var(--re-rn-dark-info-border);
+  --re-color-info-text: var(--re-rn-dark-info-text);
+  --re-color-success-surface: var(--re-rn-dark-success-surface);
+  --re-color-success-border: var(--re-rn-dark-success-border);
+  --re-color-success-text: var(--re-rn-dark-success-text);
+  --re-color-warning-surface: var(--re-rn-dark-warning-surface);
+  --re-color-warning-border: var(--re-rn-dark-warning-border);
+  --re-color-warning-text: var(--re-rn-dark-warning-text);
+  --re-color-danger-surface: var(--re-rn-dark-danger-surface);
+  --re-color-danger-border: var(--re-rn-dark-danger-border);
+  --re-color-danger-text: var(--re-rn-dark-danger-text);
+  --re-focus-ring-offset: var(--re-rn-dark-focus-ring-offset);
+  --re-shadow-focus: var(--re-rn-dark-shadow-focus);
+  --re-color-selection-bg: var(--re-rn-dark-selection-bg);
+  --re-color-selection-text: var(--re-rn-dark-selection-text);
+
+  background-color: var(--re-color-bg);
+  color: var(--re-color-text);
+}
+
+/* LIGHT — when the OS prefers light (global import + the auto .theme-renascent). */
+@media (prefers-color-scheme: light) {
+  :root,
+  .theme-renascent {
+    color-scheme: light;
+    --re-color-bg: var(--re-rn-light-bg);
+    --re-color-bg-subtle: var(--re-rn-light-bg-subtle);
+    --re-color-bg-muted: var(--re-rn-light-bg-muted);
+    --re-color-surface: var(--re-rn-light-surface);
+    --re-color-text: var(--re-rn-light-text);
+    --re-color-text-muted: var(--re-rn-light-text-muted);
+    --re-color-text-subtle: var(--re-rn-light-text-subtle);
+    --re-color-text-on-accent: #ffffff;
+    --re-color-accent-600: var(--re-rn-light-accent-600);
+    --re-color-accent-700: var(--re-rn-light-accent-700);
+    --re-color-accent-800: var(--re-rn-light-accent-800);
+    --re-color-text-danger: var(--re-rn-light-text-danger);
+    --re-color-border: var(--re-rn-light-border);
+    --re-color-border-strong: var(--re-rn-light-border-strong);
+    --re-color-border-danger: var(--re-rn-light-border-danger);
+    --re-color-link: var(--re-rn-light-link);
+    --re-color-link-hover: var(--re-rn-light-link-hover);
+    --re-color-link-visited: var(--re-rn-light-link-visited);
+    --re-color-focus-ring: #3c83f6;
+    --re-color-selection-bg: var(--re-rn-light-selection-bg);
+    --re-color-selection-text: var(--re-rn-light-selection-text);
+    --re-focus-ring-offset: var(--re-rn-light-focus-ring-offset);
+    --re-shadow-focus: var(--re-rn-light-shadow-focus);
+    --re-color-info-surface: var(--re-rn-light-info-surface);
+    --re-color-info-border: var(--re-rn-light-info-border);
+    --re-color-info-text: var(--re-rn-light-info-text);
+    --re-color-success-surface: var(--re-rn-light-success-surface);
+    --re-color-success-border: var(--re-rn-light-success-border);
+    --re-color-success-text: var(--re-rn-light-success-text);
+    --re-color-warning-surface: var(--re-rn-light-warning-surface);
+    --re-color-warning-border: var(--re-rn-light-warning-border);
+    --re-color-warning-text: var(--re-rn-light-warning-text);
+    --re-color-danger-surface: var(--re-rn-light-danger-surface);
+    --re-color-danger-border: var(--re-rn-light-danger-border);
+    --re-color-danger-text: var(--re-rn-light-danger-text);
+  }
+}
+
+/* LIGHT — forced regardless of OS. */
+.theme-renascent-light {
+  color-scheme: light;
+  --re-color-bg: var(--re-rn-light-bg);
+  --re-color-bg-subtle: var(--re-rn-light-bg-subtle);
+  --re-color-bg-muted: var(--re-rn-light-bg-muted);
+  --re-color-surface: var(--re-rn-light-surface);
+  --re-color-text: var(--re-rn-light-text);
+  --re-color-text-muted: var(--re-rn-light-text-muted);
+  --re-color-text-subtle: var(--re-rn-light-text-subtle);
+  --re-color-text-on-accent: #ffffff;
+  --re-color-accent-600: var(--re-rn-light-accent-600);
+  --re-color-accent-700: var(--re-rn-light-accent-700);
+  --re-color-accent-800: var(--re-rn-light-accent-800);
+  --re-color-text-danger: var(--re-rn-light-text-danger);
+  --re-color-border: var(--re-rn-light-border);
+  --re-color-border-strong: var(--re-rn-light-border-strong);
+  --re-color-border-danger: var(--re-rn-light-border-danger);
+  --re-color-link: var(--re-rn-light-link);
+  --re-color-link-hover: var(--re-rn-light-link-hover);
+  --re-color-link-visited: var(--re-rn-light-link-visited);
+  --re-color-focus-ring: #3c83f6;
+  --re-color-selection-bg: var(--re-rn-light-selection-bg);
+  --re-color-selection-text: var(--re-rn-light-selection-text);
+  --re-focus-ring-offset: var(--re-rn-light-focus-ring-offset);
+  --re-shadow-focus: var(--re-rn-light-shadow-focus);
+  --re-color-info-surface: var(--re-rn-light-info-surface);
+  --re-color-info-border: var(--re-rn-light-info-border);
+  --re-color-info-text: var(--re-rn-light-info-text);
+  --re-color-success-surface: var(--re-rn-light-success-surface);
+  --re-color-success-border: var(--re-rn-light-success-border);
+  --re-color-success-text: var(--re-rn-light-success-text);
+  --re-color-warning-surface: var(--re-rn-light-warning-surface);
+  --re-color-warning-border: var(--re-rn-light-warning-border);
+  --re-color-warning-text: var(--re-rn-light-warning-text);
+  --re-color-danger-surface: var(--re-rn-light-danger-surface);
+  --re-color-danger-border: var(--re-rn-light-danger-border);
+  --re-color-danger-text: var(--re-rn-light-danger-text);
 
   background-color: var(--re-color-bg);
   color: var(--re-color-text);
@@ -157,12 +364,14 @@
    ============================================================ */
 .re-button[data-variant="phoenix"] {
   background: var(--re-gradient-phoenix);
+  /* Paint the gradient from the border box so the 1px (transparent) border
+     doesn't show a seam where the padding-box gradient is clipped. */
+  background-origin: border-box;
   color: #fff;
   border-color: transparent;
 }
 .re-button[data-variant="phoenix"]:hover {
   filter: brightness(1.12);
-  background: var(--re-gradient-phoenix);
 }
 .re-button[data-variant="phoenix"]:active {
   filter: brightness(0.9);
@@ -178,12 +387,12 @@
 
 .re-button[data-variant="brand"] {
   background: var(--re-gradient-brand);
+  background-origin: border-box;
   color: #fff;
   border-color: transparent;
 }
 .re-button[data-variant="brand"]:hover {
   filter: brightness(1.12);
-  background: var(--re-gradient-brand);
 }
 .re-button[data-variant="brand"]:active {
   filter: brightness(0.9);