@enderfall/ui 0.1.16 → 0.2.4

package/dist/components/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../src/components/Dropdown.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../src/components/Dropdown.tsx"],"names":[],"mappings":"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"}

package/dist/components/Dropdown.js

@@ -31,7 +31,9 @@ export const Dropdown = (props) => {
         return (_jsx("div", { className: "ef-menu-bar", children: props.menus.map((menu) => (_jsxs("div", { className: "ef-menu-group", "data-open": props.menuOpen === menu.id ? "true" : "false", onMouseEnter: () => {
                     cancelScheduledClose();
                     props.onOpenMenu(menu.id);
-                }, onMouseLeave: scheduleClose, children: [_jsx("button", { className: "ef-menu-button", type: "button", "data-open": props.menuOpen === menu.id ? "true" : "false", children: menu.label }), props.menuOpen === menu.id ? (_jsx("div", { className: "ef-menu-popover", "data-open": "true", onMouseEnter: () => {
+                }, onMouseLeave: scheduleClose, children: [_jsx(Button, { className: ["ef-menu-button", "ef-tab", props.menuOpen === menu.id ? "is-active" : ""]
+                            .filter(Boolean)
+                            .join(" "), type: "button", variant: "tab", subvariant: "default", "data-open": props.menuOpen === menu.id ? "true" : "false", children: menu.label }), props.menuOpen === menu.id ? (_jsx("div", { className: "ef-menu-popover", "data-open": "true", onMouseEnter: () => {
                             cancelScheduledClose();
                             props.onOpenMenu(menu.id);
                         }, onMouseLeave: scheduleClose, children: menu.content })) : null] }, menu.id))) }));

package/dist/components/MainHeader.d.ts

@@ -1,5 +1,5 @@
-import type { ReactNode } from "react";
-import { type HeaderMenuItem } from "./Dropdown";
+import { type ReactNode } from "react";
+import type { HeaderMenuItem } from "./Dropdown";
 type MainHeaderProps = {
     title?: string;
     subtitle?: string;

package/dist/components/MainHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MainHeader.d.ts","sourceRoot":"","sources":["../../src/components/MainHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAY,KAAK,cAAc,EAAE,MAAM,YAAY,CAAC;AAG3D,KAAK,eAAe,GAAG;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,kFASxB,eAAe,4CA0BjB,CAAC"}
+{"version":3,"file":"MainHeader.d.ts","sourceRoot":"","sources":["../../src/components/MainHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAIjD,KAAK,eAAe,GAAG;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,kFASxB,eAAe,4CA2EjB,CAAC"}

package/dist/components/MainHeader.js

@@ -1,6 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Dropdown } from "./Dropdown";
+import { useRef } from "react";
+import { Button } from "./Button";
 import { Panel } from "./Panel";
 export const MainHeader = ({ title = "Enderfall", subtitle = "Galaxy tools for creators", logoSrc, menus, menuOpen, onOpenMenu, onCloseMenu, actions, }) => {
-    return (_jsxs(Panel, { variant: "header", borderWidth: 2, className: "ef-main-header", children: [_jsxs("div", { className: "ef-header-left", children: [_jsxs("div", { className: "ef-brand", children: [logoSrc ? (_jsx("img", { src: logoSrc, alt: title, className: "ef-logo" })) : (_jsx("div", { className: "ef-logo-fallback", children: "E" })), _jsxs("div", { children: [_jsx("div", { className: "ef-brand-name", children: title }), subtitle ? _jsx("div", { className: "ef-tagline", children: subtitle }) : null] })] }), _jsx(Dropdown, { variant: "header", menus: menus, menuOpen: menuOpen, onOpenMenu: onOpenMenu, onCloseMenu: onCloseMenu })] }), _jsx("div", { className: "ef-header-actions", children: actions })] }));
+    const closeTimerRef = useRef(null);
+    const closeDelayMs = 160;
+    const cancelScheduledClose = () => {
+        if (closeTimerRef.current !== null) {
+            window.clearTimeout(closeTimerRef.current);
+            closeTimerRef.current = null;
+        }
+    };
+    const scheduleClose = () => {
+        cancelScheduledClose();
+        closeTimerRef.current = window.setTimeout(() => {
+            onCloseMenu();
+        }, closeDelayMs);
+    };
+    return (_jsxs(Panel, { variant: "header", borderWidth: 2, className: "ef-main-header", children: [_jsxs("div", { className: "ef-header-left", children: [_jsxs("div", { className: "ef-brand", children: [logoSrc ? (_jsx("img", { src: logoSrc, alt: title, className: "ef-logo" })) : (_jsx("div", { className: "ef-logo-fallback", children: "E" })), _jsxs("div", { children: [_jsx("div", { className: "ef-brand-name", children: title }), subtitle ? _jsx("div", { className: "ef-tagline", children: subtitle }) : null] })] }), _jsx("div", { className: "ef-menu-bar", children: menus.map((menu) => (_jsxs("div", { className: "ef-menu-group", "data-open": menuOpen === menu.id ? "true" : "false", onMouseEnter: () => {
+                                cancelScheduledClose();
+                                onOpenMenu(menu.id);
+                            }, onMouseLeave: scheduleClose, children: [_jsx(Button, { className: ["ef-menu-button", "ef-tab", menuOpen === menu.id ? "is-active" : ""]
+                                        .filter(Boolean)
+                                        .join(" "), type: "button", variant: "tab", subvariant: "default", "data-open": menuOpen === menu.id ? "true" : "false", children: menu.label }), menuOpen === menu.id ? (_jsx("div", { className: "ef-menu-popover", "data-open": "true", onMouseEnter: () => {
+                                        cancelScheduledClose();
+                                        onOpenMenu(menu.id);
+                                    }, onMouseLeave: scheduleClose, children: menu.content })) : null] }, menu.id))) })] }), _jsx("div", { className: "ef-header-actions", children: actions })] }));
 };

package/dist/components/Tabs.js

@@ -5,7 +5,7 @@ export const Tabs = ({ tabs, activeTab, onChange, orientation = "horizontal", sh
     const active = tabs.find((tab) => tab.id === activeTab);
     return (_jsxs("div", { className: ["ef-tabs", isVertical ? "ef-tabs--vertical" : "", className].filter(Boolean).join(" "), children: [_jsx("div", { className: ["ef-tabs-list", isVertical ? "ef-tabs-list--vertical" : ""].filter(Boolean).join(" "), children: tabs.map((tab) => {
                     const isActive = tab.id === activeTab;
-                    return (_jsxs(Button, { variant: isActive ? "primary" : "tab", subvariant: isActive ? "glow" : "default", className: ["ef-tab", isVertical ? "ef-tab--vertical" : "", isActive ? "is-active" : ""]
+                    return (_jsxs(Button, { variant: "tab", subvariant: "default", className: ["ef-tab", isVertical ? "ef-tab--vertical" : "", isActive ? "is-active" : ""]
                             .filter(Boolean)
                             .join(" "), onClick: () => onChange(tab.id), children: [tab.icon ? _jsx("span", { className: "ef-tab-icon", children: tab.icon }) : null, _jsx("span", { className: "ef-tab-text", children: tab.label }), isVertical && isActive ? _jsx("span", { className: "ef-tab-active-indicator" }) : null] }, tab.id));
                 }) }), (active?.content || renderTabContent) && (_jsx("div", { className: [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@enderfall/ui",
   "private": false,
-  "version": "0.1.16",
+  "version": "0.2.4",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/components/Dropdown.tsx

@@ -218,7 +218,7 @@ export const Dropdown = (props: DropdownProps) => {
             onMouseLeave={scheduleClose}
           >
             <Button
-              className={["ef-menu-button", props.menuOpen === menu.id ? "is-active" : ""]
+              className={["ef-menu-button", "ef-tab", props.menuOpen === menu.id ? "is-active" : ""]
                 .filter(Boolean)
                 .join(" ")}
               type="button"

package/src/components/HeaderMenu.css

@@ -14,10 +14,45 @@
 }
 
 .ef-menu-button {
+  color: var(--ef-nav-text);
+  text-decoration: none;
   font-size: 1rem;
+  font-weight: 600;
+  transition: color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
   text-transform: uppercase;
-  letter-spacing: 0.08em;
-  padding: 8px 18px;
+  letter-spacing: var(--ef-nav-letter-spacing, 0.08em);
+  padding: var(--ef-nav-padding-y, 8px) var(--ef-nav-padding-x, 18px);
+  border-radius: var(--ef-nav-radius, 8px);
+  border: 2px solid transparent;
+  background: var(--ef-nav-surface);
+  box-shadow: var(--ef-nav-shadow);
+  cursor: pointer;
+  font-family: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.ef-menu-button:hover {
+  color: var(--ef-nav-text-hover);
+  box-shadow: var(--ef-nav-shadow-hover);
+  transform: var(--ef-nav-transform-hover, translateY(-1px));
+}
+
+.ef-menu-button:focus-visible {
+  color: var(--ef-nav-text-hover);
+  box-shadow: var(--ef-nav-shadow-focus);
+  transform: var(--ef-nav-transform-hover, translateY(-1px));
+}
+
+.ef-menu-button.is-active,
+.ef-menu-button[data-open="true"] {
+  background:
+    linear-gradient(var(--ef-button-surface), var(--ef-button-surface)) padding-box,
+    var(--ef-nav-border) border-box;
+  color: var(--ef-nav-text-active);
+  box-shadow: var(--ef-nav-shadow-active);
 }
 
 .ef-menu-popover {

package/src/components/MainHeader.tsx

@@ -1,6 +1,7 @@
-import type { ReactNode } from "react";
-import { Dropdown, type HeaderMenuItem } from "./Dropdown";
-import { Panel } from "./Panel";
+import { useRef, type ReactNode } from "react";
+import type { HeaderMenuItem } from "./Dropdown";
+import { Button } from "./Button";
+import { Panel } from "./Panel";
 
 type MainHeaderProps = {
   title?: string;
@@ -13,19 +14,36 @@ type MainHeaderProps = {
   actions?: ReactNode;
 };
 
-export const MainHeader = ({
+export const MainHeader = ({
   title = "Enderfall",
   subtitle = "Galaxy tools for creators",
   logoSrc,
   menus,
   menuOpen,
   onOpenMenu,
-  onCloseMenu,
-  actions,
-}: MainHeaderProps) => {
-  return (
+  onCloseMenu,
+  actions,
+}: MainHeaderProps) => {
+  const closeTimerRef = useRef<number | null>(null);
+  const closeDelayMs = 160;
+
+  const cancelScheduledClose = () => {
+    if (closeTimerRef.current !== null) {
+      window.clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+  };
+
+  const scheduleClose = () => {
+    cancelScheduledClose();
+    closeTimerRef.current = window.setTimeout(() => {
+      onCloseMenu();
+    }, closeDelayMs);
+  };
+
+  return (
     <Panel variant="header" borderWidth={2} className="ef-main-header">
-      <div className="ef-header-left">
+      <div className="ef-header-left">
         <div className="ef-brand">
           {logoSrc ? (
             <img src={logoSrc} alt={title} className="ef-logo" />
@@ -34,18 +52,50 @@ export const MainHeader = ({
           )}
           <div>
             <div className="ef-brand-name">{title}</div>
-            {subtitle ? <div className="ef-tagline">{subtitle}</div> : null}
-          </div>
-        </div>
-        <Dropdown
-          variant="header"
-          menus={menus}
-          menuOpen={menuOpen}
-          onOpenMenu={onOpenMenu}
-          onCloseMenu={onCloseMenu}
-        />
-      </div>
-      <div className="ef-header-actions">{actions}</div>
-    </Panel>
-  );
-};
+            {subtitle ? <div className="ef-tagline">{subtitle}</div> : null}
+          </div>
+        </div>
+        <div className="ef-menu-bar">
+          {menus.map((menu) => (
+            <div
+              key={menu.id}
+              className="ef-menu-group"
+              data-open={menuOpen === menu.id ? "true" : "false"}
+              onMouseEnter={() => {
+                cancelScheduledClose();
+                onOpenMenu(menu.id);
+              }}
+              onMouseLeave={scheduleClose}
+            >
+              <Button
+                className={["ef-menu-button", "ef-tab", menuOpen === menu.id ? "is-active" : ""]
+                  .filter(Boolean)
+                  .join(" ")}
+                type="button"
+                variant="tab"
+                subvariant="default"
+                data-open={menuOpen === menu.id ? "true" : "false"}
+              >
+                {menu.label}
+              </Button>
+              {menuOpen === menu.id ? (
+                <div
+                  className="ef-menu-popover"
+                  data-open="true"
+                  onMouseEnter={() => {
+                    cancelScheduledClose();
+                    onOpenMenu(menu.id);
+                  }}
+                  onMouseLeave={scheduleClose}
+                >
+                  {menu.content}
+                </div>
+              ) : null}
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="ef-header-actions">{actions}</div>
+    </Panel>
+  );
+};

package/src/components/Toggle.css

@@ -5,10 +5,13 @@
   cursor: pointer;
   color: var(--text-strong);
   font-weight: 600;
+  position: relative;
 }
 
 .ef-toggle-input {
   position: absolute;
+  top: 0;
+  left: 0;
   opacity: 0;
   width: 1px;
   height: 1px;

package/src/theme.css

@@ -1,443 +1,13 @@
-:root {
-  color-scheme: dark;
-  --ef-surface: #0b0c1a;
-  --ef-surface-soft: rgba(10, 13, 22, 0.78);
-  --ef-control-radius: 12px;
-  --ef-border-gradient: linear-gradient(135deg, #00e5ff, #7c4dff, #ff4dd2, #ffb74d);
-  --ef-border-gradient-reverse: linear-gradient(315deg, #00e5ff, #7c4dff, #ff4dd2, #ffb74d);
-  --ef-border-gradient-soft: linear-gradient(
-    135deg,
-    rgba(0, 229, 255, 0.6),
-    rgba(124, 77, 255, 0.6),
-    rgba(255, 77, 210, 0.6),
-    rgba(255, 183, 77, 0.6)
-  );
-  --ef-button-surface: var(--ef-surface);
-  --ef-button-border: var(--ef-border-gradient);
-  --ef-button-border-soft: var(--ef-border-gradient-soft);
-  --ef-button-text: var(--text-strong);
-  --ef-button-glow-shadow: 0 0 24px rgba(124, 77, 255, 0.45);
-  --ef-button-locked-bg: rgba(15, 18, 28, 0.7);
-  --ef-button-locked-border: rgba(255, 255, 255, 0.15);
-  --ef-button-locked-text: rgba(255, 255, 255, 0.7);
-  --ef-button-danger-border: linear-gradient(135deg, rgba(255, 92, 92, 0.8), rgba(255, 170, 170, 0.7));
-  --ef-button-danger-text: #ffd6d6;
-  --ef-button-warning-border: linear-gradient(135deg, rgba(255, 183, 77, 0.85), rgba(255, 221, 128, 0.7));
-  --ef-button-warning-text: #2b1a00;
-  --ef-button-info-border: linear-gradient(135deg, rgba(0, 229, 255, 0.7), rgba(124, 220, 255, 0.7));
-  --ef-button-info-text: #021823;
-  --ef-button-success-border: linear-gradient(135deg, rgba(76, 255, 200, 0.7), rgba(140, 255, 220, 0.7));
-  --ef-button-success-text: #041a10;
-  --ef-nav-text: rgba(238, 241, 246, 0.75);
-  --ef-nav-text-hover: #eef1f6;
-  --ef-nav-text-active: #f6f5ff;
-  --ef-nav-surface: rgba(15, 18, 28, 0.7);
-  --ef-nav-border: linear-gradient(135deg, #00e5ff, #7c4dff, #ff4dd2, #ffb74d);
-  --ef-nav-shadow: none;
-  --ef-nav-shadow-hover: 0 0 18px rgba(124, 77, 255, 0.35);
-  --ef-nav-shadow-focus: 0 0 20px rgba(124, 77, 255, 0.45);
-  --ef-nav-shadow-active: 0 0 24px rgba(124, 77, 255, 0.6);
-  --ef-nav-radius: 8px;
-  --ef-nav-padding-y: 8px;
-  --ef-nav-padding-x: 18px;
-  --ef-nav-letter-spacing: 0.08em;
-  --ef-nav-transform-hover: translateY(-1px);
-  --ef-menu-item-shadow: 0 0 16px rgba(124, 77, 255, 0.25);
-  --ef-menu-item-shadow-hover: 0 0 18px rgba(124, 77, 255, 0.35);
-  --ef-tabs-surface: #0b0c1a;
-  --ef-tabs-border: linear-gradient(135deg, rgba(0, 229, 255, 0.5), rgba(124, 77, 255, 0.5), rgba(255, 77, 210, 0.5));
-  --ef-tabs-content-surface: #0b0c1a;
-  --ef-tabs-content-border: linear-gradient(135deg, rgba(0, 229, 255, 0.35), rgba(124, 77, 255, 0.35), rgba(255, 77, 210, 0.35));
-  --ef-tabs-indicator: linear-gradient(180deg, #00e5ff, #7c4dff, #ff4dd2);
-  --ef-slider-surface: var(--ef-surface);
-  --ef-slider-border-color: var(--line-strong);
-  --ef-slider-track-radius: 6px;
-  --ef-slider-thumb-radius: 6px;
-  --ef-slider-thumb-clip: inset(0);
-  --ef-slider-thumb-mask: none;
-  --ef-toggle-track-radius: 6px;
-  --ef-toggle-thumb-radius: 6px;
-  --ef-toggle-box-radius: 6px;
-  --ef-toggle-check-radius: 2px;
-  --ef-toggle-check-bg: var(--ef-slider-border-color);
-  --ef-field-label: rgba(255, 255, 255, 0.7);
-  --ef-field-required: rgba(255, 183, 77, 0.95);
-  --ef-field-helper: rgba(255, 255, 255, 0.6);
-  --ef-field-error: #ff8a8a;
-  --ef-input-surface: #0b0c1a;
-  --ef-input-border: var(--ef-border-gradient);
-  --ef-input-text: #eef1f6;
-  --ef-input-placeholder: rgba(246, 245, 255, 0.45);
-  --ef-input-focus: rgba(124, 77, 255, 0.55);
-  --ef-input-shadow: 0 0 0 2px rgba(124, 77, 255, 0.2);
-  --ef-stacked-card-bg: rgba(10, 12, 22, 0.92);
-  --ef-stacked-card-shadow: 0 14px 35px rgba(10, 12, 24, 0.6);
-  --ef-stacked-card-shadow-hover: 0 20px 45px rgba(10, 12, 24, 0.7);
-  --ef-stacked-frame-shadow: 0 18px 40px rgba(10, 12, 24, 0.55);
-  --ef-stacked-tag-bg: rgba(15, 18, 28, 0.7);
-  --ef-stacked-tag-text: rgba(238, 241, 246, 0.75);
-  --ef-stacked-body-muted: rgba(255, 255, 255, 0.7);
-  --ef-stacked-action-shadow: 0 0 24px rgba(124, 77, 255, 0.45);
-  --ef-stacked-image-gradient: linear-gradient(
-    135deg,
-    rgba(0, 229, 255, 0.35),
-    rgba(124, 77, 255, 0.35),
-    rgba(255, 77, 210, 0.25)
-  );
-  --text-strong: #f6f5ff;
-  --text-soft: rgba(238, 241, 246, 0.75);
-  --text-muted: rgba(247, 248, 251, 0.6);
-  --card: rgba(10, 13, 22, 0.78);
-  --card-border: rgba(124, 77, 255, 0.4);
-  --accent: #7c4dff;
-  --accent-bright: #00e5ff;
-  --accent-warm: #ff4dd2;
-  --accent-gold: #ffb74d;
-  --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
-  --font-main: "Inter", "Segoe UI", Arial, sans-serif;
-  --text: var(--text-strong);
-  --muted: var(--text-muted);
-  --line: var(--card-border);
-  --bg: #0b0f15;
-  --bg-soft: #141b26;
-  --accent-dark: #5e35ff;
-  --accent-alt: var(--accent-gold);
-  --accent-soft: rgba(255, 183, 77, 0.18);
-  --danger: #e06c6c;
-  --radius: 18px;
-  --row-odd: rgba(10, 13, 22, 0.9);
-  --scrollbar-track: rgba(255, 255, 255, 0.12);
-  --bg-glow: rgba(124, 77, 255, 0.18);
-  --panel: var(--card);
-  --panel-2: rgba(12, 16, 26, 0.9);
-  --ink: var(--text-strong);
-  --line-strong: var(--accent);
-  --accent-2: var(--accent-gold);
-  --frame-bg: linear-gradient(180deg, #0b0c1a 0%, #0a0d16 100%);
-  --bio-bg: linear-gradient(180deg, #0e101c, #0b0f15 85%);
-  --section-bg: linear-gradient(180deg, rgba(15, 18, 28, 0.92), rgba(12, 16, 24, 0.95));
-  --note-bg: rgba(10, 13, 22, 0.6);
-  --portrait-bg: #0c1322;
-  --chip-bg: rgba(12, 16, 26, 0.8);
-  --placeholder-bg:
-    linear-gradient(135deg, rgba(28, 38, 64, 0.9), rgba(12, 18, 32, 0.95)),
-    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 8px);
-  --placeholder-ink: #dde6f2;
-  --menu-card: var(--card);
-  --menu-line: var(--card-border);
-  --menu-shadow: var(--shadow);
-  --menu-bg-soft: rgba(124, 77, 255, 0.12);
-  --menu-radius: 18px;
-  --menu-muted: var(--text-muted);
-}
-
-:root[data-theme="light"],
-:root[data-theme="plain-light"] {
-  color-scheme: light;
-  --ef-control-radius: 12px;
-  --ef-surface: #ffffff;
-  --ef-surface-soft: rgba(255, 255, 255, 0.92);
-  --ef-border-gradient: linear-gradient(135deg, #00e5ff, #7c4dff, #ff4dd2, #ffb74d);
-  --ef-border-gradient-reverse: linear-gradient(315deg, #00e5ff, #7c4dff, #ff4dd2, #ffb74d);
-  --ef-border-gradient-soft: linear-gradient(
-    135deg,
-    rgba(0, 229, 255, 0.6),
-    rgba(124, 77, 255, 0.6),
-    rgba(255, 77, 210, 0.6),
-    rgba(255, 183, 77, 0.6)
-  );
-  --ef-button-text: #1d232a;
-  --ef-button-glow-shadow: 0 0 20px rgba(124, 77, 255, 0.32);
-  --ef-button-locked-bg: rgba(255, 255, 255, 0.8);
-  --ef-button-locked-border: rgba(24, 32, 40, 0.18);
-  --ef-button-locked-text: rgba(24, 32, 40, 0.6);
-  --ef-button-danger-border: linear-gradient(135deg, rgba(200, 76, 76, 0.7), rgba(255, 138, 138, 0.65));
-  --ef-button-danger-text: #5a0f0f;
-  --ef-button-warning-border: linear-gradient(135deg, rgba(242, 159, 69, 0.75), rgba(255, 210, 128, 0.7));
-  --ef-button-warning-text: #4a2c00;
-  --ef-button-info-border: linear-gradient(135deg, rgba(0, 180, 210, 0.6), rgba(124, 180, 255, 0.6));
-  --ef-button-info-text: #0b2a3a;
-  --ef-button-success-border: linear-gradient(135deg, rgba(46, 170, 130, 0.65), rgba(130, 220, 180, 0.65));
-  --ef-button-success-text: #0b2b1d;
-  --ef-nav-text: rgba(29, 35, 42, 0.8);
-  --ef-nav-text-hover: #1d232a;
-  --ef-nav-text-active: #1d232a;
-  --ef-nav-surface: rgba(255, 255, 255, 0.72);
-  --ef-nav-border: var(--ef-border-gradient);
-  --ef-nav-shadow: none;
-  --ef-nav-shadow-hover: 0 0 16px rgba(31, 122, 140, 0.2);
-  --ef-nav-shadow-focus: 0 0 20px rgba(31, 122, 140, 0.24);
-  --ef-nav-shadow-active: 0 0 20px rgba(31, 122, 140, 0.26);
-  --ef-menu-item-shadow: 0 0 10px rgba(31, 122, 140, 0.12);
-  --ef-menu-item-shadow-hover: 0 0 14px rgba(31, 122, 140, 0.18);
-  --ef-tabs-surface: #ffffff;
-  --ef-tabs-border: linear-gradient(135deg, rgba(0, 229, 255, 0.35), rgba(124, 77, 255, 0.35), rgba(255, 77, 210, 0.35));
-  --ef-tabs-content-surface: #ffffff;
-  --ef-tabs-content-border: linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(124, 77, 255, 0.2), rgba(255, 77, 210, 0.2));
-  --ef-tabs-indicator: linear-gradient(180deg, #1f7a8c, #7c4dff, #f29f45);
-  --ef-slider-surface: var(--ef-surface);
-  --ef-slider-border-color: var(--line-strong);
-  --ef-slider-track-radius: 6px;
-  --ef-slider-thumb-radius: 6px;
-  --ef-slider-thumb-clip: inset(0);
-  --ef-slider-thumb-mask: none;
-  --ef-toggle-track-radius: 6px;
-  --ef-toggle-thumb-radius: 6px;
-  --ef-toggle-box-radius: 6px;
-  --ef-toggle-check-radius: 2px;
-  --ef-toggle-check-bg: var(--ef-slider-border-color);
-  --ef-field-label: rgba(29, 35, 42, 0.7);
-  --ef-field-required: rgba(242, 159, 69, 0.9);
-  --ef-field-helper: rgba(29, 35, 42, 0.6);
-  --ef-field-error: #b83a3a;
-  --ef-input-surface: #ffffff;
-  --ef-input-border: var(--ef-border-gradient);
-  --ef-input-text: #1d232a;
-  --ef-input-placeholder: rgba(29, 35, 42, 0.45);
-  --ef-input-focus: rgba(31, 122, 140, 0.3);
-  --ef-input-shadow: 0 0 0 2px rgba(31, 122, 140, 0.14);
-  --ef-field-label: rgba(29, 35, 42, 0.7);
-  --ef-field-helper: rgba(29, 35, 42, 0.55);
-  --ef-field-error: #b34a4a;
-  --ef-stacked-card-bg: rgba(10, 12, 22, 0.92);
-  --ef-stacked-card-shadow: 0 14px 35px rgba(10, 12, 24, 0.6);
-  --ef-stacked-card-shadow-hover: 0 20px 45px rgba(10, 12, 24, 0.7);
-  --ef-stacked-frame-shadow: 0 18px 40px rgba(10, 12, 24, 0.55);
-  --ef-stacked-tag-bg: rgba(15, 18, 28, 0.7);
-  --ef-stacked-tag-text: rgba(238, 241, 246, 0.75);
-  --ef-stacked-body-muted: rgba(255, 255, 255, 0.7);
-  --ef-stacked-action-shadow: 0 0 24px rgba(124, 77, 255, 0.45);
-  --ef-stacked-image-gradient: linear-gradient(
-    135deg,
-    rgba(0, 229, 255, 0.35),
-    rgba(124, 77, 255, 0.35),
-    rgba(255, 77, 210, 0.25)
-  );
-  --text-strong: #1d232a;
-  --text-soft: rgba(29, 35, 42, 0.75);
-  --text-muted: rgba(29, 35, 42, 0.6);
-  --card: rgba(255, 255, 255, 0.9);
-  --card-border: rgba(24, 32, 40, 0.12);
-  --shadow: 0 20px 50px rgba(24, 32, 40, 0.12);
-  --text: var(--text-strong);
-  --muted: var(--text-muted);
-  --line: rgba(24, 32, 40, 0.18);
-  --bg: #f4f1ea;
-  --bg-soft: #fbf7f0;
-  --accent-dark: #1f7a8c;
-  --accent-alt: #f29f45;
-  --accent-soft: rgba(242, 159, 69, 0.18);
-  --danger: #c84c4c;
-  --row-odd: rgba(255, 255, 255, 0.95);
-  --scrollbar-track: rgba(24, 32, 40, 0.08);
-  --bg-glow: rgba(31, 122, 140, 0.16);
-  --panel: var(--card);
-  --panel-2: rgba(255, 255, 255, 0.94);
-  --ink: var(--text-strong);
-  --line-strong: var(--accent);
-  --accent-2: var(--accent-alt);
-  --frame-bg: linear-gradient(180deg, #ffffff 0%, #f6ede1 100%);
-  --bio-bg: linear-gradient(180deg, #ffffff, #f9f6f0 85%);
-  --section-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 246, 240, 0.96));
-  --note-bg: rgba(255, 255, 255, 0.8);
-  --portrait-bg: #e7ecf2;
-  --chip-bg: rgba(255, 255, 255, 0.9);
-  --placeholder-bg:
-    linear-gradient(135deg, rgba(210, 225, 245, 0.9), rgba(240, 244, 248, 0.95)),
-    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0px, rgba(0, 0, 0, 0.04) 1px, transparent 1px, transparent 8px);
-  --placeholder-ink: #2b3440;
-  --menu-card: rgba(255, 255, 255, 0.88);
-  --menu-line: rgba(24, 32, 40, 0.12);
-  --menu-shadow: 0 16px 40px rgba(23, 28, 33, 0.12);
-  --menu-bg-soft: #f9f6f0;
-  --menu-radius: 18px;
-  --menu-muted: var(--text-muted);
-}
+/*
+  Theme runtime layer.
+  All design tokens and theme variables live in `variables.css`.
+  Keep this file lightweight for future runtime/theme-state utilities.
+*/
 
-:root[data-theme="plain-light"] {
-  --ef-border-gradient: linear-gradient(135deg, var(--line), var(--line));
-  --ef-border-gradient-reverse: linear-gradient(315deg, var(--line), var(--line));
-  --ef-border-gradient-soft: linear-gradient(
-    135deg,
-    rgba(24, 32, 40, 0.18),
-    rgba(24, 32, 40, 0.18)
-  );
-  --ef-button-border: var(--ef-border-gradient);
-  --ef-button-border-soft: var(--ef-border-gradient-soft);
-  --ef-input-border: var(--ef-border-gradient);
-  --ef-stacked-image-gradient: linear-gradient(135deg, rgba(24, 32, 40, 0.08), rgba(24, 32, 40, 0.15));
-  --ef-nav-border: var(--ef-border-gradient);
-  --ef-nav-shadow-hover: 0 0 0 1px rgba(24, 32, 40, 0.2);
-  --ef-nav-shadow-focus: 0 0 0 2px rgba(24, 32, 40, 0.22);
-  --ef-nav-shadow-active: 0 0 0 1px rgba(24, 32, 40, 0.3);
-  --ef-menu-item-shadow: none;
-  --ef-menu-item-shadow-hover: 0 0 0 1px rgba(24, 32, 40, 0.2);
-}
+@import "./variables.css";
 
-:root[data-theme="plain-dark"] {
-  color-scheme: dark;
-  --card-border: rgba(255, 255, 255, 0.16);
-  --line: rgba(255, 255, 255, 0.2);
-  --line-strong: rgba(255, 255, 255, 0.35);
-  --ef-border-gradient: linear-gradient(135deg, var(--line-strong), var(--line-strong));
-  --ef-border-gradient-reverse: linear-gradient(315deg, var(--line-strong), var(--line-strong));
-  --ef-border-gradient-soft: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.18),
-    rgba(255, 255, 255, 0.18)
-  );
-  --ef-button-border: var(--ef-border-gradient);
-  --ef-button-border-soft: var(--ef-border-gradient-soft);
-  --ef-input-border: var(--ef-border-gradient);
-  --menu-line: var(--line);
-  --menu-bg-soft: rgba(255, 255, 255, 0.06);
-  --ef-stacked-image-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.12));
-  --ef-nav-text: rgba(246, 245, 255, 0.8);
-  --ef-nav-text-hover: #f6f5ff;
-  --ef-nav-text-active: #f6f5ff;
-  --ef-nav-surface: rgba(15, 18, 28, 0.7);
-  --ef-nav-border: var(--ef-border-gradient);
-  --ef-nav-shadow-hover: 0 0 0 1px rgba(255, 255, 255, 0.2);
-  --ef-nav-shadow-focus: 0 0 0 2px rgba(255, 255, 255, 0.24);
-  --ef-nav-shadow-active: 0 0 0 1px rgba(255, 255, 255, 0.3);
-  --ef-menu-item-shadow: none;
-  --ef-menu-item-shadow-hover: 0 0 0 1px rgba(255, 255, 255, 0.2);
+/* Theme opt-in hook for app-level custom styling. */
+[data-theme] {
+  color: var(--text-strong);
 }
 
-
-
-:root[data-theme="atelier"] {
-  color-scheme: dark;
-  --ef-control-radius: 0px;
-  --ef-surface: #1b0b18;
-  --ef-surface-soft: rgba(27, 11, 24, 0.92);
-  --ef-border-gradient: linear-gradient(135deg, #ff86c8, #e255a1, #7dd6f6);
-  --ef-border-gradient-reverse: linear-gradient(315deg, #ff86c8, #e255a1, #7dd6f6);
-  --ef-border-gradient-soft: linear-gradient(
-    135deg,
-    rgba(255, 134, 200, 0.5),
-    rgba(226, 85, 161, 0.5),
-    rgba(125, 214, 246, 0.5)
-  );
-  --ef-slider-surface: var(--ef-surface);
-  --ef-slider-border-color: var(--line-strong);
-  --ef-slider-track-radius: 0px;
-  --ef-slider-thumb-radius: 0px;
-  --ef-slider-thumb-clip: inset(0);
-  --ef-slider-thumb-mask: none;
-  --ef-toggle-track-radius: 0px;
-  --ef-toggle-thumb-radius: 0px;
-  --ef-toggle-box-radius: 0px;
-  --ef-toggle-check-radius: 0px;
-  --ef-toggle-check-bg: var(--ef-slider-border-color);
-  --ef-button-surface: var(--ef-surface);
-  --ef-button-border: var(--ef-border-gradient);
-  --ef-button-border-soft: var(--ef-border-gradient-soft);
-  --ef-button-text: #f6eaf2;
-  --ef-button-glow-shadow: 0 0 24px rgba(226, 85, 161, 0.42);
-  --ef-nav-text: rgba(246, 234, 242, 0.78);
-  --ef-nav-text-hover: #f6eaf2;
-  --ef-nav-text-active: #f6eaf2;
-  --ef-nav-surface: rgba(27, 11, 24, 0.74);
-  --ef-nav-border: var(--ef-border-gradient);
-  --ef-nav-shadow: none;
-  --ef-nav-shadow-hover: 0 0 16px rgba(226, 85, 161, 0.28);
-  --ef-nav-shadow-focus: 0 0 20px rgba(226, 85, 161, 0.34);
-  --ef-nav-shadow-active: 0 0 22px rgba(226, 85, 161, 0.42);
-  --ef-menu-item-shadow: 0 0 14px rgba(226, 85, 161, 0.2);
-  --ef-menu-item-shadow-hover: 0 0 18px rgba(226, 85, 161, 0.3);
-  --ef-tabs-surface: #1b0b18;
-  --ef-tabs-border: linear-gradient(135deg, rgba(255, 134, 200, 0.45), rgba(226, 85, 161, 0.45), rgba(125, 214, 246, 0.45));
-  --ef-tabs-content-surface: #1b0b18;
-  --ef-tabs-content-border: linear-gradient(135deg, rgba(255, 134, 200, 0.3), rgba(226, 85, 161, 0.3), rgba(125, 214, 246, 0.3));
-  --ef-tabs-indicator: linear-gradient(180deg, #ff86c8, #e255a1, #7dd6f6);
-  --ef-input-surface: #1b0b18;
-  --ef-input-border: var(--ef-border-gradient);
-  --ef-input-text: #f6eaf2;
-  --ef-input-placeholder: rgba(246, 234, 242, 0.6);
-  --ef-input-focus: rgba(226, 85, 161, 0.45);
-  --ef-input-shadow: 0 0 0 2px rgba(226, 85, 161, 0.2);
-  --text-strong: #f6eaf2;
-  --text-soft: rgba(246, 234, 242, 0.8);
-  --text-muted: #dbc7d7;
-  --card: #1b0b18;
-  --card-border: rgba(192, 59, 132, 0.6);
-  --accent: #ff86c8;
-  --accent-bright: #7dd6f6;
-  --accent-warm: #e255a1;
-  --accent-gold: #ff86c8;
-  --shadow: rgba(0, 0, 0, 0.6);
-  --text: #f6eaf2;
-  --muted: #dbc7d7;
-  --line: #c03b84;
-  --bg: #130810;
-  --bg-soft: #241028;
-  --accent-dark: #c03b84;
-  --accent-alt: #7dd6f6;
-  --accent-soft: rgba(255, 134, 200, 0.18);
-  --danger: #e06c6c;
-  --radius: 18px;
-  --row-odd: rgba(27, 11, 24, 0.85);
-  --scrollbar-track: rgba(255, 255, 255, 0.08);
-  --bg-glow: #2a0f21;
-  --panel: #1b0b18;
-  --panel-2: #241028;
-  --ink: #f6eaf2;
-  --line-strong: #e255a1;
-  --accent-2: #7dd6f6;
-  --frame-bg: linear-gradient(180deg, #220b1a 0%, #12070f 100%);
-  --bio-bg: linear-gradient(180deg, #1a0b1b, #12070f 85%);
-  --section-bg: linear-gradient(180deg, rgba(35, 14, 32, 0.94), rgba(20, 9, 18, 0.95));
-  --note-bg: rgba(16, 7, 14, 0.6);
-  --portrait-bg: #131a2c;
-  --chip-bg: rgba(17, 9, 20, 0.8);
-  --placeholder-bg:
-    linear-gradient(135deg, rgba(60, 78, 108, 0.9), rgba(20, 30, 50, 0.95)),
-    repeating-linear-gradient(
-      0deg,
-      rgba(255, 255, 255, 0.06) 0px,
-      rgba(255, 255, 255, 0.06) 1px,
-      transparent 1px,
-      transparent 8px
-    );
-  --placeholder-ink: #dde6f2;
-  --menu-card: #1b0b18;
-  --menu-line: rgba(192, 59, 132, 0.5);
-  --menu-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
-  --menu-bg-soft: rgba(255, 134, 200, 0.12);
-  --menu-radius: 18px;
-  --menu-muted: #dbc7d7;
-}
-
-:root[data-theme="galaxy"] {
-  --ef-slider-track-radius: 6px;
-  --ef-slider-thumb-radius: 6px;
-  --ef-slider-thumb-clip: inset(0);
-  --ef-slider-thumb-mask: none;
-  --ef-toggle-track-radius: 6px;
-  --ef-toggle-thumb-radius: 6px;
-  --ef-toggle-box-radius: 6px;
-  --ef-toggle-check-radius: 2px;
-}
-
-:root[data-theme="system"] {
-  color-scheme: light dark;
-}
-
-@media (prefers-color-scheme: light) {
-  :root[data-theme="system"] {
-    --ef-nav-text: rgba(29, 35, 42, 0.8);
-    --ef-nav-text-hover: #1d232a;
-    --ef-nav-text-active: #1d232a;
-    --ef-nav-surface: rgba(255, 255, 255, 0.72);
-    --ef-nav-shadow: none;
-    --ef-nav-shadow-hover: 0 0 16px rgba(31, 122, 140, 0.2);
-    --ef-nav-shadow-focus: 0 0 20px rgba(31, 122, 140, 0.24);
-    --ef-nav-shadow-active: 0 0 20px rgba(31, 122, 140, 0.26);
-    --ef-menu-item-shadow: 0 0 10px rgba(31, 122, 140, 0.12);
-    --ef-menu-item-shadow-hover: 0 0 14px rgba(31, 122, 140, 0.18);
-    --ef-tabs-surface: #ffffff;
-    --ef-tabs-content-surface: #ffffff;
-  }
-}
-

package/src/variables.css

@@ -0,0 +1,479 @@
+:root {
+  color-scheme: dark;
+  --ef-surface: #0b0c1a;
+  --ef-surface-soft: rgba(10, 13, 22, 0.78);
+  --ef-control-radius: 12px;
+  --ef-border-gradient: linear-gradient(135deg, #00e5ff, #7c4dff, #ff4dd2, #ffb74d);
+  --ef-border-gradient-reverse: linear-gradient(315deg, #00e5ff, #7c4dff, #ff4dd2, #ffb74d);
+  --ef-border-gradient-soft: linear-gradient(
+    135deg,
+    rgba(0, 229, 255, 0.6),
+    rgba(124, 77, 255, 0.6),
+    rgba(255, 77, 210, 0.6),
+    rgba(255, 183, 77, 0.6)
+  );
+  --ef-button-surface: var(--ef-surface);
+  --ef-button-border: var(--ef-border-gradient);
+  --ef-button-border-soft: var(--ef-border-gradient-soft);
+  --ef-button-text: var(--text-strong);
+  --ef-button-glow-shadow: 0 0 24px rgba(124, 77, 255, 0.45);
+  --ef-button-locked-bg: rgba(15, 18, 28, 0.7);
+  --ef-button-locked-border: rgba(255, 255, 255, 0.15);
+  --ef-button-locked-text: rgba(255, 255, 255, 0.7);
+  --ef-button-danger-border: linear-gradient(135deg, rgba(255, 92, 92, 0.8), rgba(255, 170, 170, 0.7));
+  --ef-button-danger-text: #ffd6d6;
+  --ef-button-warning-border: linear-gradient(135deg, rgba(255, 183, 77, 0.85), rgba(255, 221, 128, 0.7));
+  --ef-button-warning-text: #2b1a00;
+  --ef-button-info-border: linear-gradient(135deg, rgba(0, 229, 255, 0.7), rgba(124, 220, 255, 0.7));
+  --ef-button-info-text: #021823;
+  --ef-button-success-border: linear-gradient(135deg, rgba(76, 255, 200, 0.7), rgba(140, 255, 220, 0.7));
+  --ef-button-success-text: #041a10;
+  --ef-nav-text: rgba(238, 241, 246, 0.75);
+  --ef-nav-text-hover: #eef1f6;
+  --ef-nav-text-active: #f6f5ff;
+  --ef-nav-surface: rgba(15, 18, 28, 0.7);
+  --ef-nav-border: linear-gradient(135deg, #00e5ff, #7c4dff, #ff4dd2, #ffb74d);
+  --ef-nav-shadow: none;
+  --ef-nav-shadow-hover: 0 0 18px rgba(124, 77, 255, 0.35);
+  --ef-nav-shadow-focus: 0 0 20px rgba(124, 77, 255, 0.45);
+  --ef-nav-shadow-active: 0 0 24px rgba(124, 77, 255, 0.6);
+  --ef-nav-radius: 8px;
+  --ef-nav-padding-y: 8px;
+  --ef-nav-padding-x: 18px;
+  --ef-nav-letter-spacing: 0.08em;
+  --ef-nav-transform-hover: translateY(-1px);
+  --ef-menu-item-shadow: 0 0 16px rgba(124, 77, 255, 0.25);
+  --ef-menu-item-shadow-hover: 0 0 18px rgba(124, 77, 255, 0.35);
+  --ef-tabs-surface: #0b0c1a;
+  --ef-tabs-border: linear-gradient(135deg, rgba(0, 229, 255, 0.5), rgba(124, 77, 255, 0.5), rgba(255, 77, 210, 0.5));
+  --ef-tabs-content-surface: #0b0c1a;
+  --ef-tabs-content-border: linear-gradient(135deg, rgba(0, 229, 255, 0.35), rgba(124, 77, 255, 0.35), rgba(255, 77, 210, 0.35));
+  --ef-tabs-indicator: linear-gradient(180deg, #00e5ff, #7c4dff, #ff4dd2);
+  --ef-slider-surface: var(--ef-surface);
+  --ef-slider-border-color: var(--line-strong);
+  --ef-slider-track-radius: 6px;
+  --ef-slider-thumb-radius: 6px;
+  --ef-slider-thumb-clip: inset(0);
+  --ef-slider-thumb-mask: none;
+  --ef-toggle-track-radius: 6px;
+  --ef-toggle-thumb-radius: 6px;
+  --ef-toggle-box-radius: 6px;
+  --ef-toggle-check-radius: 2px;
+  --ef-toggle-check-bg: var(--ef-slider-border-color);
+  --ef-field-label: rgba(255, 255, 255, 0.7);
+  --ef-field-required: rgba(255, 183, 77, 0.95);
+  --ef-field-helper: rgba(255, 255, 255, 0.6);
+  --ef-field-error: #ff8a8a;
+  --ef-input-surface: #0b0c1a;
+  --ef-input-border: var(--ef-border-gradient);
+  --ef-input-text: #eef1f6;
+  --ef-input-placeholder: rgba(246, 245, 255, 0.45);
+  --ef-input-focus: rgba(124, 77, 255, 0.55);
+  --ef-input-shadow: 0 0 0 2px rgba(124, 77, 255, 0.2);
+  --ef-stacked-card-bg: rgba(10, 12, 22, 0.92);
+  --ef-stacked-card-shadow: 0 14px 35px rgba(10, 12, 24, 0.6);
+  --ef-stacked-card-shadow-hover: 0 20px 45px rgba(10, 12, 24, 0.7);
+  --ef-stacked-frame-shadow: 0 18px 40px rgba(10, 12, 24, 0.55);
+  --ef-stacked-tag-bg: rgba(15, 18, 28, 0.7);
+  --ef-stacked-tag-text: rgba(238, 241, 246, 0.75);
+  --ef-stacked-body-muted: rgba(255, 255, 255, 0.7);
+  --ef-stacked-action-shadow: 0 0 24px rgba(124, 77, 255, 0.45);
+  --ef-stacked-image-gradient: linear-gradient(
+    135deg,
+    rgba(0, 229, 255, 0.35),
+    rgba(124, 77, 255, 0.35),
+    rgba(255, 77, 210, 0.25)
+  );
+  --text-strong: #f6f5ff;
+  --text-soft: rgba(238, 241, 246, 0.75);
+  --text-muted: rgba(247, 248, 251, 0.6);
+  --card: rgba(10, 13, 22, 0.78);
+  --card-border: rgba(124, 77, 255, 0.4);
+  --accent: #7c4dff;
+  --accent-bright: #00e5ff;
+  --accent-warm: #ff4dd2;
+  --accent-gold: #ffb74d;
+  --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
+  --font-main: "Inter", "Segoe UI", Arial, sans-serif;
+  --text: var(--text-strong);
+  --muted: var(--text-muted);
+  --line: var(--card-border);
+  --bg: #0b0f15;
+  --bg-soft: #141b26;
+  --accent-dark: #5e35ff;
+  --accent-alt: var(--accent-gold);
+  --accent-soft: rgba(255, 183, 77, 0.18);
+  --danger: #e06c6c;
+  --radius: 18px;
+  --row-odd: rgba(10, 13, 22, 0.9);
+  --scrollbar-track: rgba(255, 255, 255, 0.12);
+  --bg-glow: rgba(124, 77, 255, 0.18);
+  --panel: var(--card);
+  --panel-2: rgba(12, 16, 26, 0.9);
+  --ink: var(--text-strong);
+  --line-strong: var(--accent);
+  --accent-2: var(--accent-gold);
+  --frame-bg: linear-gradient(180deg, #0b0c1a 0%, #0a0d16 100%);
+  --bio-bg: linear-gradient(180deg, #0e101c, #0b0f15 85%);
+  --section-bg: linear-gradient(180deg, rgba(15, 18, 28, 0.92), rgba(12, 16, 24, 0.95));
+  --note-bg: rgba(10, 13, 22, 0.6);
+  --portrait-bg: #0c1322;
+  --chip-bg: rgba(12, 16, 26, 0.8);
+  --placeholder-bg:
+    linear-gradient(135deg, rgba(28, 38, 64, 0.9), rgba(12, 18, 32, 0.95)),
+    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 8px);
+  --placeholder-ink: #dde6f2;
+  --menu-card: var(--card);
+  --menu-line: var(--card-border);
+  --menu-shadow: var(--shadow);
+  --menu-bg-soft: rgba(124, 77, 255, 0.12);
+  --menu-radius: 18px;
+  --menu-muted: var(--text-muted);
+}
+
+:root[data-theme="light"],
+:root[data-theme="plain-light"] {
+  color-scheme: light;
+  --ef-control-radius: 12px;
+  --ef-surface: #ffffff;
+  --ef-surface-soft: rgba(255, 255, 255, 0.92);
+  --ef-border-gradient: linear-gradient(135deg, #00e5ff, #7c4dff, #ff4dd2, #ffb74d);
+  --ef-border-gradient-reverse: linear-gradient(315deg, #00e5ff, #7c4dff, #ff4dd2, #ffb74d);
+  --ef-border-gradient-soft: linear-gradient(
+    135deg,
+    rgba(0, 229, 255, 0.6),
+    rgba(124, 77, 255, 0.6),
+    rgba(255, 77, 210, 0.6),
+    rgba(255, 183, 77, 0.6)
+  );
+  --ef-button-text: #1d232a;
+  --ef-button-glow-shadow: 0 0 20px rgba(124, 77, 255, 0.32);
+  --ef-button-locked-bg: rgba(255, 255, 255, 0.8);
+  --ef-button-locked-border: rgba(24, 32, 40, 0.18);
+  --ef-button-locked-text: rgba(24, 32, 40, 0.6);
+  --ef-button-danger-border: linear-gradient(135deg, rgba(200, 76, 76, 0.7), rgba(255, 138, 138, 0.65));
+  --ef-button-danger-text: #5a0f0f;
+  --ef-button-warning-border: linear-gradient(135deg, rgba(242, 159, 69, 0.75), rgba(255, 210, 128, 0.7));
+  --ef-button-warning-text: #4a2c00;
+  --ef-button-info-border: linear-gradient(135deg, rgba(0, 180, 210, 0.6), rgba(124, 180, 255, 0.6));
+  --ef-button-info-text: #0b2a3a;
+  --ef-button-success-border: linear-gradient(135deg, rgba(46, 170, 130, 0.65), rgba(130, 220, 180, 0.65));
+  --ef-button-success-text: #0b2b1d;
+  --ef-nav-text: rgba(29, 35, 42, 0.8);
+  --ef-nav-text-hover: #1d232a;
+  --ef-nav-text-active: #1d232a;
+  --ef-nav-surface: rgba(255, 255, 255, 0.72);
+  --ef-nav-border: var(--ef-border-gradient);
+  --ef-nav-shadow: none;
+  --ef-nav-shadow-hover: 0 0 16px rgba(31, 122, 140, 0.2);
+  --ef-nav-shadow-focus: 0 0 20px rgba(31, 122, 140, 0.24);
+  --ef-nav-shadow-active: 0 0 20px rgba(31, 122, 140, 0.26);
+  --ef-menu-item-shadow: 0 0 10px rgba(31, 122, 140, 0.12);
+  --ef-menu-item-shadow-hover: 0 0 14px rgba(31, 122, 140, 0.18);
+  --ef-tabs-surface: #ffffff;
+  --ef-tabs-border: linear-gradient(135deg, rgba(0, 229, 255, 0.35), rgba(124, 77, 255, 0.35), rgba(255, 77, 210, 0.35));
+  --ef-tabs-content-surface: #ffffff;
+  --ef-tabs-content-border: linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(124, 77, 255, 0.2), rgba(255, 77, 210, 0.2));
+  --ef-tabs-indicator: linear-gradient(180deg, #1f7a8c, #7c4dff, #f29f45);
+  --ef-slider-surface: var(--ef-surface);
+  --ef-slider-border-color: var(--line-strong);
+  --ef-slider-track-radius: 6px;
+  --ef-slider-thumb-radius: 6px;
+  --ef-slider-thumb-clip: inset(0);
+  --ef-slider-thumb-mask: none;
+  --ef-toggle-track-radius: 6px;
+  --ef-toggle-thumb-radius: 6px;
+  --ef-toggle-box-radius: 6px;
+  --ef-toggle-check-radius: 2px;
+  --ef-toggle-check-bg: var(--ef-slider-border-color);
+  --ef-field-label: rgba(29, 35, 42, 0.7);
+  --ef-field-required: rgba(242, 159, 69, 0.9);
+  --ef-field-helper: rgba(29, 35, 42, 0.6);
+  --ef-field-error: #b83a3a;
+  --ef-input-surface: #ffffff;
+  --ef-input-border: var(--ef-border-gradient);
+  --ef-input-text: #1d232a;
+  --ef-input-placeholder: rgba(29, 35, 42, 0.45);
+  --ef-input-focus: rgba(31, 122, 140, 0.3);
+  --ef-input-shadow: 0 0 0 2px rgba(31, 122, 140, 0.14);
+  --ef-field-label: rgba(29, 35, 42, 0.7);
+  --ef-field-helper: rgba(29, 35, 42, 0.55);
+  --ef-field-error: #b34a4a;
+  --ef-stacked-card-bg: rgba(10, 12, 22, 0.92);
+  --ef-stacked-card-shadow: 0 14px 35px rgba(10, 12, 24, 0.6);
+  --ef-stacked-card-shadow-hover: 0 20px 45px rgba(10, 12, 24, 0.7);
+  --ef-stacked-frame-shadow: 0 18px 40px rgba(10, 12, 24, 0.55);
+  --ef-stacked-tag-bg: rgba(15, 18, 28, 0.7);
+  --ef-stacked-tag-text: rgba(238, 241, 246, 0.75);
+  --ef-stacked-body-muted: rgba(255, 255, 255, 0.7);
+  --ef-stacked-action-shadow: 0 0 24px rgba(124, 77, 255, 0.45);
+  --ef-stacked-image-gradient: linear-gradient(
+    135deg,
+    rgba(0, 229, 255, 0.35),
+    rgba(124, 77, 255, 0.35),
+    rgba(255, 77, 210, 0.25)
+  );
+  --text-strong: #1d232a;
+  --text-soft: rgba(29, 35, 42, 0.75);
+  --text-muted: rgba(29, 35, 42, 0.6);
+  --card: rgba(255, 255, 255, 0.9);
+  --card-border: rgba(24, 32, 40, 0.12);
+  --shadow: 0 20px 50px rgba(24, 32, 40, 0.12);
+  --text: var(--text-strong);
+  --muted: var(--text-muted);
+  --line: rgba(24, 32, 40, 0.18);
+  --bg: #f4f1ea;
+  --bg-soft: #fbf7f0;
+  --accent-dark: #1f7a8c;
+  --accent-alt: #f29f45;
+  --accent-soft: rgba(242, 159, 69, 0.18);
+  --danger: #c84c4c;
+  --row-odd: rgba(255, 255, 255, 0.95);
+  --scrollbar-track: rgba(24, 32, 40, 0.08);
+  --bg-glow: rgba(31, 122, 140, 0.16);
+  --panel: var(--card);
+  --panel-2: rgba(255, 255, 255, 0.94);
+  --ink: var(--text-strong);
+  --line-strong: var(--accent);
+  --accent-2: var(--accent-alt);
+  --frame-bg: linear-gradient(180deg, #ffffff 0%, #f6ede1 100%);
+  --bio-bg: linear-gradient(180deg, #ffffff, #f9f6f0 85%);
+  --section-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 246, 240, 0.96));
+  --note-bg: rgba(255, 255, 255, 0.8);
+  --portrait-bg: #e7ecf2;
+  --chip-bg: rgba(255, 255, 255, 0.9);
+  --placeholder-bg:
+    linear-gradient(135deg, rgba(210, 225, 245, 0.9), rgba(240, 244, 248, 0.95)),
+    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0px, rgba(0, 0, 0, 0.04) 1px, transparent 1px, transparent 8px);
+  --placeholder-ink: #2b3440;
+  --menu-card: rgba(255, 255, 255, 0.88);
+  --menu-line: rgba(24, 32, 40, 0.12);
+  --menu-shadow: 0 16px 40px rgba(23, 28, 33, 0.12);
+  --menu-bg-soft: #f9f6f0;
+  --menu-radius: 18px;
+  --menu-muted: var(--text-muted);
+}
+
+:root[data-theme="plain-light"] {
+  --ef-border-gradient: linear-gradient(135deg, var(--line), var(--line));
+  --ef-border-gradient-reverse: linear-gradient(315deg, var(--line), var(--line));
+  --ef-border-gradient-soft: linear-gradient(
+    135deg,
+    rgba(24, 32, 40, 0.18),
+    rgba(24, 32, 40, 0.18)
+  );
+  --ef-button-border: var(--ef-border-gradient);
+  --ef-button-border-soft: var(--ef-border-gradient-soft);
+  --ef-input-border: var(--ef-border-gradient);
+  --ef-stacked-image-gradient: linear-gradient(135deg, rgba(24, 32, 40, 0.08), rgba(24, 32, 40, 0.15));
+  --ef-nav-border: var(--ef-border-gradient);
+  --ef-nav-shadow-hover: 0 0 0 1px rgba(24, 32, 40, 0.2);
+  --ef-nav-shadow-focus: 0 0 0 2px rgba(24, 32, 40, 0.22);
+  --ef-nav-shadow-active: 0 0 0 1px rgba(24, 32, 40, 0.3);
+  --ef-menu-item-shadow: none;
+  --ef-menu-item-shadow-hover: 0 0 0 1px rgba(24, 32, 40, 0.2);
+  --ef-tabs-surface: #ffffff;
+  --ef-tabs-border: linear-gradient(135deg, rgba(24, 32, 40, 0.18), rgba(24, 32, 40, 0.18));
+  --ef-tabs-content-surface: #ffffff;
+  --ef-tabs-content-border: linear-gradient(135deg, rgba(24, 32, 40, 0.14), rgba(24, 32, 40, 0.14));
+  --ef-tabs-indicator: linear-gradient(180deg, rgba(24, 32, 40, 0.82), rgba(24, 32, 40, 0.82));
+}
+
+:root[data-theme="plain-dark"] {
+  color-scheme: dark;
+  --card-border: rgba(255, 255, 255, 0.16);
+  --line: rgba(255, 255, 255, 0.2);
+  --line-strong: rgba(255, 255, 255, 0.35);
+  --ef-border-gradient: linear-gradient(135deg, var(--line-strong), var(--line-strong));
+  --ef-border-gradient-reverse: linear-gradient(315deg, var(--line-strong), var(--line-strong));
+  --ef-border-gradient-soft: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.18),
+    rgba(255, 255, 255, 0.18)
+  );
+  --ef-button-border: var(--ef-border-gradient);
+  --ef-button-border-soft: var(--ef-border-gradient-soft);
+  --ef-input-border: var(--ef-border-gradient);
+  --menu-line: var(--line);
+  --menu-bg-soft: rgba(255, 255, 255, 0.06);
+  --ef-stacked-image-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.12));
+  --ef-nav-text: rgba(246, 245, 255, 0.8);
+  --ef-nav-text-hover: #f6f5ff;
+  --ef-nav-text-active: #f6f5ff;
+  --ef-nav-surface: rgba(15, 18, 28, 0.7);
+  --ef-nav-border: var(--ef-border-gradient);
+  --ef-nav-shadow-hover: 0 0 0 1px rgba(255, 255, 255, 0.2);
+  --ef-nav-shadow-focus: 0 0 0 2px rgba(255, 255, 255, 0.24);
+  --ef-nav-shadow-active: 0 0 0 1px rgba(255, 255, 255, 0.3);
+  --ef-menu-item-shadow: none;
+  --ef-menu-item-shadow-hover: 0 0 0 1px rgba(255, 255, 255, 0.2);
+  --ef-tabs-surface: #0b0c1a;
+  --ef-tabs-border: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.24));
+  --ef-tabs-content-surface: #0b0c1a;
+  --ef-tabs-content-border: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
+  --ef-tabs-indicator: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92));
+}
+
+
+
+:root[data-theme="atelier"] {
+  color-scheme: dark;
+  --ef-control-radius: 0px;
+  --ef-surface: #1b0b18;
+  --ef-surface-soft: rgba(27, 11, 24, 0.92);
+  --ef-border-gradient: linear-gradient(135deg, #ff86c8, #e255a1, #7dd6f6);
+  --ef-border-gradient-reverse: linear-gradient(315deg, #ff86c8, #e255a1, #7dd6f6);
+  --ef-border-gradient-soft: linear-gradient(
+    135deg,
+    rgba(255, 134, 200, 0.5),
+    rgba(226, 85, 161, 0.5),
+    rgba(125, 214, 246, 0.5)
+  );
+  --ef-slider-surface: var(--ef-surface);
+  --ef-slider-border-color: var(--line-strong);
+  --ef-slider-track-radius: 0px;
+  --ef-slider-thumb-radius: 0px;
+  --ef-slider-thumb-clip: inset(0);
+  --ef-slider-thumb-mask: none;
+  --ef-toggle-track-radius: 0px;
+  --ef-toggle-thumb-radius: 0px;
+  --ef-toggle-box-radius: 0px;
+  --ef-toggle-check-radius: 0px;
+  --ef-toggle-check-bg: var(--ef-slider-border-color);
+  --ef-button-surface: var(--ef-surface);
+  --ef-button-border: var(--ef-border-gradient);
+  --ef-button-border-soft: var(--ef-border-gradient-soft);
+  --ef-button-text: #f6eaf2;
+  --ef-button-glow-shadow: 0 0 24px rgba(226, 85, 161, 0.42);
+  --ef-nav-text: rgba(246, 234, 242, 0.78);
+  --ef-nav-text-hover: #f6eaf2;
+  --ef-nav-text-active: #f6eaf2;
+  --ef-nav-surface: rgba(27, 11, 24, 0.74);
+  --ef-nav-border: var(--ef-border-gradient);
+  --ef-nav-shadow: none;
+  --ef-nav-shadow-hover: 0 0 16px rgba(226, 85, 161, 0.28);
+  --ef-nav-shadow-focus: 0 0 20px rgba(226, 85, 161, 0.34);
+  --ef-nav-shadow-active: 0 0 22px rgba(226, 85, 161, 0.42);
+  --ef-menu-item-shadow: 0 0 14px rgba(226, 85, 161, 0.2);
+  --ef-menu-item-shadow-hover: 0 0 18px rgba(226, 85, 161, 0.3);
+  --ef-tabs-surface: #1b0b18;
+  --ef-tabs-border: linear-gradient(135deg, rgba(255, 134, 200, 0.45), rgba(226, 85, 161, 0.45), rgba(125, 214, 246, 0.45));
+  --ef-tabs-content-surface: #1b0b18;
+  --ef-tabs-content-border: linear-gradient(135deg, rgba(255, 134, 200, 0.3), rgba(226, 85, 161, 0.3), rgba(125, 214, 246, 0.3));
+  --ef-tabs-indicator: linear-gradient(180deg, #ff86c8, #e255a1, #7dd6f6);
+  --ef-input-surface: #1b0b18;
+  --ef-input-border: var(--ef-border-gradient);
+  --ef-input-text: #f6eaf2;
+  --ef-input-placeholder: rgba(246, 234, 242, 0.6);
+  --ef-input-focus: rgba(226, 85, 161, 0.45);
+  --ef-input-shadow: 0 0 0 2px rgba(226, 85, 161, 0.2);
+  --text-strong: #f6eaf2;
+  --text-soft: rgba(246, 234, 242, 0.8);
+  --text-muted: #dbc7d7;
+  --card: #1b0b18;
+  --card-border: rgba(192, 59, 132, 0.6);
+  --accent: #ff86c8;
+  --accent-bright: #7dd6f6;
+  --accent-warm: #e255a1;
+  --accent-gold: #ff86c8;
+  --shadow: rgba(0, 0, 0, 0.6);
+  --text: #f6eaf2;
+  --muted: #dbc7d7;
+  --line: #c03b84;
+  --bg: #130810;
+  --bg-soft: #241028;
+  --accent-dark: #c03b84;
+  --accent-alt: #7dd6f6;
+  --accent-soft: rgba(255, 134, 200, 0.18);
+  --danger: #e06c6c;
+  --radius: 18px;
+  --row-odd: rgba(27, 11, 24, 0.85);
+  --scrollbar-track: rgba(255, 255, 255, 0.08);
+  --bg-glow: #2a0f21;
+  --panel: #1b0b18;
+  --panel-2: #241028;
+  --ink: #f6eaf2;
+  --line-strong: #e255a1;
+  --accent-2: #7dd6f6;
+  --frame-bg: linear-gradient(180deg, #220b1a 0%, #12070f 100%);
+  --bio-bg: linear-gradient(180deg, #1a0b1b, #12070f 85%);
+  --section-bg: linear-gradient(180deg, rgba(35, 14, 32, 0.94), rgba(20, 9, 18, 0.95));
+  --note-bg: rgba(16, 7, 14, 0.6);
+  --portrait-bg: #131a2c;
+  --chip-bg: rgba(17, 9, 20, 0.8);
+  --placeholder-bg:
+    linear-gradient(135deg, rgba(60, 78, 108, 0.9), rgba(20, 30, 50, 0.95)),
+    repeating-linear-gradient(
+      0deg,
+      rgba(255, 255, 255, 0.06) 0px,
+      rgba(255, 255, 255, 0.06) 1px,
+      transparent 1px,
+      transparent 8px
+    );
+  --placeholder-ink: #dde6f2;
+  --menu-card: #1b0b18;
+  --menu-line: rgba(192, 59, 132, 0.5);
+  --menu-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
+  --menu-bg-soft: rgba(255, 134, 200, 0.12);
+  --menu-radius: 18px;
+  --menu-muted: #dbc7d7;
+}
+
+:root[data-theme="galaxy"] {
+  --ef-slider-track-radius: 6px;
+  --ef-slider-thumb-radius: 6px;
+  --ef-slider-thumb-clip: inset(0);
+  --ef-slider-thumb-mask: none;
+  --ef-toggle-track-radius: 6px;
+  --ef-toggle-thumb-radius: 6px;
+  --ef-toggle-box-radius: 6px;
+  --ef-toggle-check-radius: 2px;
+}
+
+/*
+  Optional "galaxy-light" surface mode (when host app toggles body class).
+  Keeps light readability while preserving galaxy accent treatment for nav/tabs.
+*/
+body.ef-galaxy-light {
+  --ef-nav-text: rgba(29, 35, 42, 0.82);
+  --ef-nav-text-hover: #1d232a;
+  --ef-nav-text-active: #1d232a;
+  --ef-nav-surface: rgba(255, 255, 255, 0.86);
+  --ef-nav-border: linear-gradient(135deg, rgba(0, 229, 255, 0.72), rgba(124, 77, 255, 0.72), rgba(255, 77, 210, 0.72), rgba(255, 183, 77, 0.72));
+  --ef-nav-shadow: none;
+  --ef-nav-shadow-hover: 0 0 16px rgba(124, 77, 255, 0.24);
+  --ef-nav-shadow-focus: 0 0 20px rgba(124, 77, 255, 0.28);
+  --ef-nav-shadow-active: 0 0 20px rgba(124, 77, 255, 0.3);
+  --ef-menu-item-shadow: 0 0 10px rgba(124, 77, 255, 0.15);
+  --ef-menu-item-shadow-hover: 0 0 14px rgba(124, 77, 255, 0.2);
+  --ef-tabs-surface: rgba(255, 255, 255, 0.92);
+  --ef-tabs-border: linear-gradient(135deg, rgba(0, 229, 255, 0.52), rgba(124, 77, 255, 0.52), rgba(255, 77, 210, 0.52));
+  --ef-tabs-content-surface: rgba(255, 255, 255, 0.94);
+  --ef-tabs-content-border: linear-gradient(135deg, rgba(0, 229, 255, 0.36), rgba(124, 77, 255, 0.36), rgba(255, 77, 210, 0.36));
+  --ef-tabs-indicator: linear-gradient(180deg, #00a0bc, #7c4dff, #c24aa2);
+}
+
+:root[data-theme="system"] {
+  color-scheme: light dark;
+}
+
+@media (prefers-color-scheme: light) {
+  :root[data-theme="system"] {
+    --ef-nav-text: rgba(29, 35, 42, 0.8);
+    --ef-nav-text-hover: #1d232a;
+    --ef-nav-text-active: #1d232a;
+    --ef-nav-surface: rgba(255, 255, 255, 0.72);
+    --ef-nav-shadow: none;
+    --ef-nav-shadow-hover: 0 0 16px rgba(31, 122, 140, 0.2);
+    --ef-nav-shadow-focus: 0 0 20px rgba(31, 122, 140, 0.24);
+    --ef-nav-shadow-active: 0 0 20px rgba(31, 122, 140, 0.26);
+    --ef-menu-item-shadow: 0 0 10px rgba(31, 122, 140, 0.12);
+    --ef-menu-item-shadow-hover: 0 0 14px rgba(31, 122, 140, 0.18);
+    --ef-tabs-surface: #ffffff;
+    --ef-tabs-border: linear-gradient(135deg, rgba(0, 229, 255, 0.35), rgba(124, 77, 255, 0.35), rgba(255, 77, 210, 0.35));
+    --ef-tabs-content-surface: #ffffff;
+    --ef-tabs-content-border: linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(124, 77, 255, 0.2), rgba(255, 77, 210, 0.2));
+    --ef-tabs-indicator: linear-gradient(180deg, #1f7a8c, #7c4dff, #f29f45);
+  }
+}
+

package/styles.css

@@ -1,6 +1,7 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
-@import "./src/base.css";
-@import "./src/theme.css";
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
+@import "./src/base.css";
+@import "./src/variables.css";
+@import "./src/theme.css";
 @import "./src/components/BookmarkDropdown.css";
 @import "./src/components/AccessGate.css";
 @import "./src/components/Button.css";