@bagelink/vue 1.14.13 → 1.14.15

package/src/styles/theme.css

@@ -1,6 +1,36 @@
 @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap');
 
-/* TEHEME */
+/* THEME
+ *
+ * BREAKING CHANGE (June 2026): The following custom properties were renamed
+ * to use the --bgl- prefix for consistency. If your project overrides any of
+ * these in custom CSS, update the property names:
+ *
+ *   --border-color        → --bgl-border-color
+ *   --placeholder-color   → --bgl-placeholder-color
+ *   --label-color         → --bgl-label-color
+ *   --input-bg            → --bgl-input-bg
+ *   --input-color         → --bgl-input-color
+ *   --input-font-size     → --bgl-input-font-size
+ *   --input-height        → --bgl-input-height
+ *   --input-border-radius → --bgl-input-border-radius
+ *   --btn-border-radius   → --bgl-btn-border-radius
+ *   --btn-padding         → --bgl-btn-padding
+ *   --btn-height          → --bgl-btn-height
+ *   --card-border-radius  → --bgl-card-border-radius
+ *   --pill-border-radius  → --bgl-pill-border-radius
+ *   --pill-height         → --bgl-pill-height
+ *   --pill-font-size      → --bgl-pill-font-size
+ *   --pill-btn-color      → --bgl-pill-btn-color
+ *   --pill-btn-bg         → --bgl-pill-btn-bg
+ *   --dropdown-color      → --bgl-dropdown-color
+ *   --popper-border-radius→ --bgl-popper-border-radius
+ *   --label-font-size     → --bgl-label-font-size
+ *   --skeleton-bg         → --bgl-skeleton-bg
+ *   --skeleton-pulse      → --bgl-skeleton-pulse
+ *   --skeleton-radius     → --bgl-skeleton-radius
+ *   --skeleton-margin     → --bgl-skeleton-margin
+ */
 :root {
     --bgl-primary: var(--bgl-blue);
     --bgl-primary-tint: #2e5bff80;
@@ -15,16 +45,16 @@
     --bgl-accent-color: var(--bgl-primary);
     --bgl-bg: #f4f6fa;
     --bgl-shadow: #00000031;
-    --border-color: #00000020;
-    --placeholder-color: #00000040;
-    --label-color: #00000080;
-    --input-bg: #f5f8fa;
-    --input-color: #000000;
-    --dropdown-color: var(--bgl-black);
+    --bgl-border-color: #00000020;
+    --bgl-placeholder-color: #00000040;
+    --bgl-label-color: #00000080;
+    --bgl-input-bg: #f5f8fa;
+    --bgl-input-color: #000000;
+    --bgl-dropdown-color: var(--bgl-black);
     --bgl-box-bg: var(--bgl-white);
     --bgl-popup-bg: var(--bgl-white);
     --bgl-popup-text: var(--bgl-black);
-    --popper-border-radius: var(--card-border-radius);
+    --bgl-popper-border-radius: var(--bgl-card-border-radius);
     --bgl-text-color: var(--bgl-black);
     --bgl-light-text: var(--bgl-white);
     --bgl-richtext-color: var(--bgl-white);
@@ -35,35 +65,35 @@
     --bgl-selection-color: var(--bgl-white);
     --bgl-scrollbar-thumb: var(--bgl-gray);
     --bgl-scrollbar-size: 0.8rem;
-    --pill-btn-color: var(--bgl-white);
-    --pill-btn-bg: var(--placeholder-color);
+    --bgl-pill-btn-color: var(--bgl-white);
+    --bgl-pill-btn-bg: var(--bgl-placeholder-color);
     --bgl-selected: var(--bgl-gray-light);
-    --skeleton-bg: #f0f0f0;
-    --skeleton-pulse: var(--bgl-bg);
+    --bgl-skeleton-bg: #f0f0f0;
+    --bgl-skeleton-pulse: var(--bgl-bg);
     --bgl-range-thumb-color: var(--bgl-white);
 }
 
 /* TYPE */
 :root {
     --bgl-font: 'Lexend', 'Ploni', sans-serif;
-    --input-font-size: 14px;
+    --bgl-input-font-size: 14px;
 }
 
 /* DIMENSIONS */
 :root {
     --bgl-font-size: 16px;
-    --input-height: 40px;
-    --label-font-size: 12px;
-    --pill-font-size: 12px;
-    --input-border-radius: 7px;
-    --card-border-radius: 12px;
-    --btn-border-radius: 6px;
-    --btn-padding: 30px;
-    --btn-height: 40px;
-    --pill-border-radius: 8px;
-    --pill-height: 20px;
-    --skeleton-radius: 0.25rem;
-    --skeleton-margin: 1rem;
+    --bgl-input-height: 40px;
+    --bgl-label-font-size: 12px;
+    --bgl-pill-font-size: 12px;
+    --bgl-input-border-radius: 7px;
+    --bgl-card-border-radius: 12px;
+    --bgl-btn-border-radius: 6px;
+    --bgl-btn-padding: 30px;
+    --bgl-btn-height: 40px;
+    --bgl-pill-border-radius: 8px;
+    --bgl-pill-height: 20px;
+    --bgl-skeleton-radius: 0.25rem;
+    --bgl-skeleton-margin: 1rem;
     --bgl-range-thumb-size: 20px;
     --bgl-range-track-height: 8px;
 }
@@ -116,210 +146,210 @@
 
 /* 10% tints (lightest) */
 :root {
-    --bgl-blue-10: #f7f9ff;
-    --bgl-green-10: #f7fcf9;
-    --bgl-red-10: #fef8f8;
-    --bgl-yellow-10: #fffbf0;
-    --bgl-purple-10: #faf7fb;
-    --bgl-brown-10: #faf8f6;
-    --bgl-orange-10: #fff8f0;
-    --bgl-turquoise-10: #f0fffe;
-    --bgl-gray-10: #fafafa;
-    --bgl-black-10: #f8f8f8;
-    --bgl-pink-10: #fef7f9;
+    --bgl-blue-10: color-mix(in oklab, white 90%, var(--bgl-blue));
+    --bgl-green-10: color-mix(in oklab, white 90%, var(--bgl-green));
+    --bgl-red-10: color-mix(in oklab, white 90%, var(--bgl-red));
+    --bgl-yellow-10: color-mix(in oklab, white 90%, var(--bgl-yellow));
+    --bgl-purple-10: color-mix(in oklab, white 90%, var(--bgl-purple));
+    --bgl-brown-10: color-mix(in oklab, white 90%, var(--bgl-brown));
+    --bgl-orange-10: color-mix(in oklab, white 90%, var(--bgl-orange));
+    --bgl-turquoise-10: color-mix(in oklab, white 90%, var(--bgl-turquoise));
+    --bgl-gray-10: color-mix(in oklab, white 90%, var(--bgl-gray));
+    --bgl-black-10: color-mix(in oklab, white 90%, var(--bgl-black));
+    --bgl-pink-10: color-mix(in oklab, white 90%, var(--bgl-pink));
     --bgl-primary-10: color-mix(in oklab, white 90%, var(--bgl-primary));
 }
 
 /* 20% tints */
 :root {
-    --bgl-blue-20: #eef6ff;
-    --bgl-green-20: #eef9f2;
-    --bgl-red-20: #fdf1f1;
-    --bgl-yellow-20: #fff7e0;
-    --bgl-purple-20: #f5eff7;
-    --bgl-brown-20: #f5f1ed;
-    --bgl-orange-20: #fff1e0;
-    --bgl-turquoise-20: #e0fffc;
-    --bgl-gray-20: #f5f5f5;
-    --bgl-black-20: #f0f0f0;
-    --bgl-pink-20: #fceff2;
+    --bgl-blue-20: color-mix(in oklab, white 80%, var(--bgl-blue));
+    --bgl-green-20: color-mix(in oklab, white 80%, var(--bgl-green));
+    --bgl-red-20: color-mix(in oklab, white 80%, var(--bgl-red));
+    --bgl-yellow-20: color-mix(in oklab, white 80%, var(--bgl-yellow));
+    --bgl-purple-20: color-mix(in oklab, white 80%, var(--bgl-purple));
+    --bgl-brown-20: color-mix(in oklab, white 80%, var(--bgl-brown));
+    --bgl-orange-20: color-mix(in oklab, white 80%, var(--bgl-orange));
+    --bgl-turquoise-20: color-mix(in oklab, white 80%, var(--bgl-turquoise));
+    --bgl-gray-20: color-mix(in oklab, white 80%, var(--bgl-gray));
+    --bgl-black-20: color-mix(in oklab, white 80%, var(--bgl-black));
+    --bgl-pink-20: color-mix(in oklab, white 80%, var(--bgl-pink));
     --bgl-primary-20: color-mix(in oklab, white 80%, var(--bgl-primary));
 }
 
 /* 30% tints */
 :root {
-    --bgl-blue-30: #e0ebff;
-    --bgl-green-30: #ddf3e5;
-    --bgl-red-30: #fae5e6;
-    --bgl-yellow-30: #fff0cc;
-    --bgl-purple-30: #ede2f0;
-    --bgl-brown-30: #ebe2db;
-    --bgl-orange-30: #ffe6cc;
-    --bgl-turquoise-30: #ccfff9;
-    --bgl-gray-30: #ebebeb;
-    --bgl-black-30: #e5e5e5;
-    --bgl-pink-30: #f9e2e8;
+    --bgl-blue-30: color-mix(in oklab, white 70%, var(--bgl-blue));
+    --bgl-green-30: color-mix(in oklab, white 70%, var(--bgl-green));
+    --bgl-red-30: color-mix(in oklab, white 70%, var(--bgl-red));
+    --bgl-yellow-30: color-mix(in oklab, white 70%, var(--bgl-yellow));
+    --bgl-purple-30: color-mix(in oklab, white 70%, var(--bgl-purple));
+    --bgl-brown-30: color-mix(in oklab, white 70%, var(--bgl-brown));
+    --bgl-orange-30: color-mix(in oklab, white 70%, var(--bgl-orange));
+    --bgl-turquoise-30: color-mix(in oklab, white 70%, var(--bgl-turquoise));
+    --bgl-gray-30: color-mix(in oklab, white 70%, var(--bgl-gray));
+    --bgl-black-30: color-mix(in oklab, white 70%, var(--bgl-black));
+    --bgl-pink-30: color-mix(in oklab, white 70%, var(--bgl-pink));
     --bgl-primary-30: color-mix(in oklab, white 70%, var(--bgl-primary));
 }
 
 /* 40% tints */
 :root {
-    --bgl-blue-40: #c2d7ff;
-    --bgl-green-40: #bfebcf;
-    --bgl-red-40: #f4d1d2;
-    --bgl-yellow-40: #ffe699;
-    --bgl-purple-40: #dccbe1;
-    --bgl-brown-40: #dcc9ba;
-    --bgl-orange-40: #ffcc99;
-    --bgl-turquoise-40: #99fff0;
-    --bgl-gray-40: #d8d8d8;
-    --bgl-black-40: #d2d2d2;
-    --bgl-pink-40: #f4c9d4;
+    --bgl-blue-40: color-mix(in oklab, white 60%, var(--bgl-blue));
+    --bgl-green-40: color-mix(in oklab, white 60%, var(--bgl-green));
+    --bgl-red-40: color-mix(in oklab, white 60%, var(--bgl-red));
+    --bgl-yellow-40: color-mix(in oklab, white 60%, var(--bgl-yellow));
+    --bgl-purple-40: color-mix(in oklab, white 60%, var(--bgl-purple));
+    --bgl-brown-40: color-mix(in oklab, white 60%, var(--bgl-brown));
+    --bgl-orange-40: color-mix(in oklab, white 60%, var(--bgl-orange));
+    --bgl-turquoise-40: color-mix(in oklab, white 60%, var(--bgl-turquoise));
+    --bgl-gray-40: color-mix(in oklab, white 60%, var(--bgl-gray));
+    --bgl-black-40: color-mix(in oklab, white 60%, var(--bgl-black));
+    --bgl-pink-40: color-mix(in oklab, white 60%, var(--bgl-pink));
     --bgl-primary-40: color-mix(in oklab, white 60%, var(--bgl-primary));
 }
 
 /* 50% tints */
 :root {
-    --bgl-blue-50: #94adff;
-    --bgl-green-50: #9ae0b7;
-    --bgl-red-50: #eeb4b6;
-    --bgl-yellow-50: #ffdd66;
-    --bgl-purple-50: #c4a8cd;
-    --bgl-brown-50: #caa68b;
-    --bgl-orange-50: #ffb366;
-    --bgl-turquoise-50: #66ffe0;
-    --bgl-gray-50: #c4c4c4;
-    --bgl-black-50: #b8b8b8;
-    --bgl-pink-50: #eea4b6;
+    --bgl-blue-50: color-mix(in oklab, white 50%, var(--bgl-blue));
+    --bgl-green-50: color-mix(in oklab, white 50%, var(--bgl-green));
+    --bgl-red-50: color-mix(in oklab, white 50%, var(--bgl-red));
+    --bgl-yellow-50: color-mix(in oklab, white 50%, var(--bgl-yellow));
+    --bgl-purple-50: color-mix(in oklab, white 50%, var(--bgl-purple));
+    --bgl-brown-50: color-mix(in oklab, white 50%, var(--bgl-brown));
+    --bgl-orange-50: color-mix(in oklab, white 50%, var(--bgl-orange));
+    --bgl-turquoise-50: color-mix(in oklab, white 50%, var(--bgl-turquoise));
+    --bgl-gray-50: color-mix(in oklab, white 50%, var(--bgl-gray));
+    --bgl-black-50: color-mix(in oklab, white 50%, var(--bgl-black));
+    --bgl-pink-50: color-mix(in oklab, white 50%, var(--bgl-pink));
     --bgl-primary-50: color-mix(in oklab, white 50%, var(--bgl-primary));
 }
 
 /* 60% tints */
 :root {
-    --bgl-blue-60: #6690ff;
-    --bgl-green-60: #87d4a7;
-    --bgl-red-60: #e99799;
-    --bgl-yellow-60: #ffd433;
-    --bgl-purple-60: #b696c0;
-    --bgl-brown-60: #bb9374;
-    --bgl-orange-60: #ff9933;
-    --bgl-turquoise-60: #33ffd0;
-    --bgl-gray-60: #cecece;
-    --bgl-black-60: #9e9e9e;
-    --bgl-pink-60: #e88399;
+    --bgl-blue-60: color-mix(in oklab, white 40%, var(--bgl-blue));
+    --bgl-green-60: color-mix(in oklab, white 40%, var(--bgl-green));
+    --bgl-red-60: color-mix(in oklab, white 40%, var(--bgl-red));
+    --bgl-yellow-60: color-mix(in oklab, white 40%, var(--bgl-yellow));
+    --bgl-purple-60: color-mix(in oklab, white 40%, var(--bgl-purple));
+    --bgl-brown-60: color-mix(in oklab, white 40%, var(--bgl-brown));
+    --bgl-orange-60: color-mix(in oklab, white 40%, var(--bgl-orange));
+    --bgl-turquoise-60: color-mix(in oklab, white 40%, var(--bgl-turquoise));
+    --bgl-gray-60: color-mix(in oklab, white 40%, var(--bgl-gray));
+    --bgl-black-60: color-mix(in oklab, white 40%, var(--bgl-black));
+    --bgl-pink-60: color-mix(in oklab, white 40%, var(--bgl-pink));
     --bgl-primary-60: color-mix(in oklab, white 40%, var(--bgl-primary));
 }
 
 /* 70% tints */
 :root {
-    --bgl-blue-70: #527aff;
-    --bgl-green-70: #7ec99f;
-    --bgl-red-70: #e4898c;
-    --bgl-yellow-70: #ffcc00;
-    --bgl-purple-70: #a884b3;
-    --bgl-brown-70: #ad805d;
-    --bgl-orange-70: #ff8000;
-    --bgl-turquoise-70: #00ffc0;
-    --bgl-gray-70: #c0c0c0;
-    --bgl-black-70: #858585;
-    --bgl-pink-70: #e2627c;
+    --bgl-blue-70: color-mix(in oklab, white 30%, var(--bgl-blue));
+    --bgl-green-70: color-mix(in oklab, white 30%, var(--bgl-green));
+    --bgl-red-70: color-mix(in oklab, white 30%, var(--bgl-red));
+    --bgl-yellow-70: color-mix(in oklab, white 30%, var(--bgl-yellow));
+    --bgl-purple-70: color-mix(in oklab, white 30%, var(--bgl-purple));
+    --bgl-brown-70: color-mix(in oklab, white 30%, var(--bgl-brown));
+    --bgl-orange-70: color-mix(in oklab, white 30%, var(--bgl-orange));
+    --bgl-turquoise-70: color-mix(in oklab, white 30%, var(--bgl-turquoise));
+    --bgl-gray-70: color-mix(in oklab, white 30%, var(--bgl-gray));
+    --bgl-black-70: color-mix(in oklab, white 30%, var(--bgl-black));
+    --bgl-pink-70: color-mix(in oklab, white 30%, var(--bgl-pink));
     --bgl-primary-70: color-mix(in oklab, white 30%, var(--bgl-primary));
 }
 
 /* 80% tints */
 :root {
-    --bgl-blue-80: #3e63ff;
-    --bgl-green-80: #7cbf97;
-    --bgl-red-80: #e07b7f;
-    --bgl-yellow-80: #ffc300;
-    --bgl-purple-80: #9a72a6;
-    --bgl-brown-80: #9f6d46;
-    --bgl-orange-80: #ff6600;
-    --bgl-turquoise-80: #00efb0;
-    --bgl-gray-80: #e8ecef;
-    --bgl-black-80: #6b6b6b;
-    --bgl-pink-80: #dc415f;
+    --bgl-blue-80: color-mix(in oklab, white 20%, var(--bgl-blue));
+    --bgl-green-80: color-mix(in oklab, white 20%, var(--bgl-green));
+    --bgl-red-80: color-mix(in oklab, white 20%, var(--bgl-red));
+    --bgl-yellow-80: color-mix(in oklab, white 20%, var(--bgl-yellow));
+    --bgl-purple-80: color-mix(in oklab, white 20%, var(--bgl-purple));
+    --bgl-brown-80: color-mix(in oklab, white 20%, var(--bgl-brown));
+    --bgl-orange-80: color-mix(in oklab, white 20%, var(--bgl-orange));
+    --bgl-turquoise-80: color-mix(in oklab, white 20%, var(--bgl-turquoise));
+    --bgl-gray-80: color-mix(in oklab, white 20%, var(--bgl-gray));
+    --bgl-black-80: color-mix(in oklab, white 20%, var(--bgl-black));
+    --bgl-pink-80: color-mix(in oklab, white 20%, var(--bgl-pink));
     --bgl-primary-80: color-mix(in oklab, white 20%, var(--bgl-primary));
 }
 
 /* 90% tints */
 :root {
-    --bgl-blue-90: #3456ff;
-    --bgl-green-90: #7ab58f;
-    --bgl-red-90: #dc6d72;
-    --bgl-yellow-90: #ffba00;
-    --bgl-purple-90: #8c6099;
-    --bgl-brown-90: #915a2f;
-    --bgl-orange-90: #ff4d00;
-    --bgl-turquoise-90: #00e5a0;
-    --bgl-gray-90: #a4a4a4;
-    --bgl-black-90: #525252;
-    --bgl-pink-90: #d62042;
+    --bgl-blue-90: color-mix(in oklab, white 10%, var(--bgl-blue));
+    --bgl-green-90: color-mix(in oklab, white 10%, var(--bgl-green));
+    --bgl-red-90: color-mix(in oklab, white 10%, var(--bgl-red));
+    --bgl-yellow-90: color-mix(in oklab, white 10%, var(--bgl-yellow));
+    --bgl-purple-90: color-mix(in oklab, white 10%, var(--bgl-purple));
+    --bgl-brown-90: color-mix(in oklab, white 10%, var(--bgl-brown));
+    --bgl-orange-90: color-mix(in oklab, white 10%, var(--bgl-orange));
+    --bgl-turquoise-90: color-mix(in oklab, white 10%, var(--bgl-turquoise));
+    --bgl-gray-90: color-mix(in oklab, white 10%, var(--bgl-gray));
+    --bgl-black-90: color-mix(in oklab, white 10%, var(--bgl-black));
+    --bgl-pink-90: color-mix(in oklab, white 10%, var(--bgl-pink));
     --bgl-primary-90: color-mix(in oklab, white 10%, var(--bgl-primary));
 }
 
 /* Base Colors */
 :root {
-    --bgl-blue-100: #2e5bff;
-    --bgl-green-100: #75c98f;
-    --bgl-red-100: #ed6c6f;
-    --bgl-yellow-100: #ffbb00;
-    --bgl-purple-100: #8a4baf;
-    --bgl-brown-100: #a67c52;
-    --bgl-orange-100: #ff8c00;
-    --bgl-turquoise-100: #00d8c0;
-    --bgl-gray-100: #b7b7b7;
-    --bgl-black-100: #282929;
-    --bgl-pink-100: #f1416c;
+    --bgl-blue-100: var(--bgl-blue);
+    --bgl-green-100: var(--bgl-green);
+    --bgl-red-100: var(--bgl-red);
+    --bgl-yellow-100: var(--bgl-yellow);
+    --bgl-purple-100: var(--bgl-purple);
+    --bgl-brown-100: var(--bgl-brown);
+    --bgl-orange-100: var(--bgl-orange);
+    --bgl-turquoise-100: var(--bgl-turquoise);
+    --bgl-gray-100: var(--bgl-gray);
+    --bgl-black-100: var(--bgl-black);
+    --bgl-pink-100: var(--bgl-pink);
     --bgl-primary-100: var(--bgl-primary);
 }
 
 /* 110% shades (darker than base) */
 :root {
-    --bgl-blue-110: #1a42cc;
-    --bgl-green-110: #5aa572;
-    --bgl-red-110: #c5565a;
-    --bgl-yellow-110: #cc9600;
-    --bgl-purple-110: #6d3a88;
-    --bgl-brown-110: #7a4f3e;
-    --bgl-orange-110: #cc6f00;
-    --bgl-turquoise-110: #00a699;
-    --bgl-gray-110: #949494;
-    --bgl-black-110: #1f2020;
-    --bgl-pink-110: #bf2f55;
+    --bgl-blue-110: color-mix(in oklab, black 10%, var(--bgl-blue));
+    --bgl-green-110: color-mix(in oklab, black 10%, var(--bgl-green));
+    --bgl-red-110: color-mix(in oklab, black 10%, var(--bgl-red));
+    --bgl-yellow-110: color-mix(in oklab, black 10%, var(--bgl-yellow));
+    --bgl-purple-110: color-mix(in oklab, black 10%, var(--bgl-purple));
+    --bgl-brown-110: color-mix(in oklab, black 10%, var(--bgl-brown));
+    --bgl-orange-110: color-mix(in oklab, black 10%, var(--bgl-orange));
+    --bgl-turquoise-110: color-mix(in oklab, black 10%, var(--bgl-turquoise));
+    --bgl-gray-110: color-mix(in oklab, black 10%, var(--bgl-gray));
+    --bgl-black-110: color-mix(in oklab, black 10%, var(--bgl-black));
+    --bgl-pink-110: color-mix(in oklab, black 10%, var(--bgl-pink));
     --bgl-primary-110: color-mix(in oklab, black 10%, var(--bgl-primary));
 
 }
 
 /* 120% shades */
 :root {
-    --bgl-blue-120: #0f2e99;
-    --bgl-green-120: #459555;
-    --bgl-red-120: #ae3f43;
-    --bgl-yellow-120: #997200;
-    --bgl-purple-120: #4e1f61;
-    --bgl-brown-120: #63442d;
-    --bgl-orange-120: #995200;
-    --bgl-turquoise-120: #007d72;
-    --bgl-gray-120: #808080;
-    --bgl-black-120: #161717;
-    --bgl-pink-120: #a81e3e;
+    --bgl-blue-120: color-mix(in oklab, black 20%, var(--bgl-blue));
+    --bgl-green-120: color-mix(in oklab, black 20%, var(--bgl-green));
+    --bgl-red-120: color-mix(in oklab, black 20%, var(--bgl-red));
+    --bgl-yellow-120: color-mix(in oklab, black 20%, var(--bgl-yellow));
+    --bgl-purple-120: color-mix(in oklab, black 20%, var(--bgl-purple));
+    --bgl-brown-120: color-mix(in oklab, black 20%, var(--bgl-brown));
+    --bgl-orange-120: color-mix(in oklab, black 20%, var(--bgl-orange));
+    --bgl-turquoise-120: color-mix(in oklab, black 20%, var(--bgl-turquoise));
+    --bgl-gray-120: color-mix(in oklab, black 20%, var(--bgl-gray));
+    --bgl-black-120: color-mix(in oklab, black 20%, var(--bgl-black));
+    --bgl-pink-120: color-mix(in oklab, black 20%, var(--bgl-pink));
     --bgl-primary-120: color-mix(in oklab, black 20%, var(--bgl-primary));
 }
 
 /* 130% shades (darkest) */
 :root {
-    --bgl-blue-130: #041a66;
-    --bgl-green-130: #308538;
-    --bgl-red-130: #97282c;
-    --bgl-yellow-130: #664e00;
-    --bgl-purple-130: #2f043a;
-    --bgl-brown-130: #4c391c;
-    --bgl-orange-130: #663500;
-    --bgl-turquoise-130: #00544b;
-    --bgl-gray-130: #6c6c6c;
-    --bgl-black-130: #0d0e0e;
-    --bgl-pink-130: #910d27;
+    --bgl-blue-130: color-mix(in oklab, black 30%, var(--bgl-blue));
+    --bgl-green-130: color-mix(in oklab, black 30%, var(--bgl-green));
+    --bgl-red-130: color-mix(in oklab, black 30%, var(--bgl-red));
+    --bgl-yellow-130: color-mix(in oklab, black 30%, var(--bgl-yellow));
+    --bgl-purple-130: color-mix(in oklab, black 30%, var(--bgl-purple));
+    --bgl-brown-130: color-mix(in oklab, black 30%, var(--bgl-brown));
+    --bgl-orange-130: color-mix(in oklab, black 30%, var(--bgl-orange));
+    --bgl-turquoise-130: color-mix(in oklab, black 30%, var(--bgl-turquoise));
+    --bgl-gray-130: color-mix(in oklab, black 30%, var(--bgl-gray));
+    --bgl-black-130: color-mix(in oklab, black 30%, var(--bgl-black));
+    --bgl-pink-130: color-mix(in oklab, black 30%, var(--bgl-pink));
     --bgl-primary-130: color-mix(in oklab, black 30%, var(--bgl-primary));
 }
 
@@ -327,275 +357,9 @@
     outline: 1px dotted red;
 }
 
-::-moz-selection {
-    color: var(--bgl-selection-color);
-    background: var(--bgl-selection-bg);
-}
-
 ::selection {
     color: var(--bgl-selection-color);
     background: var(--bgl-selection-bg);
 }
 
-.popup {
-    border-radius: 15px;
-    background: var(--bgl-popup-bg);
-    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
-    padding: 2rem;
-    min-width: 300px;
-    text-align: center;
-}
-
-.tabs {
-    -moz-column-gap: 1rem;
-    column-gap: 1rem;
-    margin-top: 20px;
-    margin-bottom: -2rem;
-    border-top: 1px solid var(--border-color);
-    width: calc(100% + 4rem);
-    -webkit-margin-start: -2rem;
-    margin-inline-start: -2rem;
-    -webkit-padding-start: 2rem;
-    padding-inline-start: 2rem;
-    overflow: auto;
-    display: flex;
-}
-
-.tab {
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 2.5;
-    cursor: pointer;
-    transition: var(--bgl-transition);
-    border-bottom: 2px solid transparent;
-    padding: 0 5px;
-    white-space: nowrap;
-    text-decoration: none;
-    color: inherit;
-}
-
-.tab.active {
-    color: var(--bgl-primary);
-    border-bottom: 2px solid var(--bgl-primary);
-}
-
-.tab:hover {
-    color: var(--bgl-primary);
-}
-
-.tab:active {
-    -webkit-filter: brightness(70%);
-    filter: brightness(70%);
-}
-
-.router-tab {
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 2.5;
-    cursor: pointer;
-    transition: var(--bgl-transition);
-    border-bottom: 2px solid transparent;
-    padding: 0 5px;
-    white-space: nowrap;
-    text-decoration: none;
-    color: inherit;
-}
-
-.router-tab.router-link-active {
-    color: var(--bgl-primary);
-    border-bottom: 2px solid var(--bgl-primary);
-}
-
-.router-tab:hover {
-    color: var(--bgl-primary);
-}
-
-.router-tab:active {
-    -webkit-filter: brightness(70%);
-    filter: brightness(70%);
-}
-
-.entity-container {
-    display: grid;
-    height: 100%;
-    grid-template-columns: minmax(300px, 1fr) 3fr;
-    grid-gap: 1rem;
-    -moz-column-gap: 1rem;
-    column-gap: 1rem;
-    grid-template-rows: 1fr;
-    grid-template-areas: 'list-view detail-view';
-    transition: grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
-    transition:
-        grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99),
-        -ms-grid-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
-    transition: all 0.5s cubic-bezier(0.79, 0.01, 0.34, 0.99);
-}
-
-.detail-main {
-    overflow-y: auto;
-}
-
-.content-row p {
-    margin: 0 0 10px 0;
-}
-
-.id {
-    color: var(--bgl-gray);
-    font-size: 9px;
-}
-
-.field {
-    --field-count: 1;
-    --width: calc(100% / var(--field-count));
-    grid-auto-columns: minmax(var(--width), var(--width));
-    font-size: 10px;
-    text-align: z;
-}
-
-.detail-view-inner {
-    display: grid;
-    height: 100%;
-    overflow: hidden;
-    grid-template-rows: -webkit-max-content 1fr;
-    grid-template-rows: max-content 1fr;
-    gap: 1rem;
-}
-
-.detail-view-inner-wrap {
-    height: 100%;
-    overflow: hidden;
-    transition: var(--bgl-transition);
-}
-
-.table-list-wrap {
-    overflow: auto;
-}
-
-.copy-url {
-    background-color: var(--bgl-gray-light);
-    border-radius: var(--btn-border-radius);
-    padding: 0.5rem 1rem;
-    align-items: center;
-    justify-content: flex-start;
-    margin-bottom: 1rem;
-    display: flex;
-    justify-content: space-between;
-}
-
-.copy-url a {
-    margin: 0;
-    font-size: 12px;
-    opacity: 0.8;
-    color: var(--bgl-text-color);
-    word-break: break-all;
-}
-
-.list-view {
-    grid-area: list-view;
-    grid-template-areas: 'list-header''list-content';
-    grid-template-columns: 1fr;
-    overflow-y: auto;
-    grid-template-rows: -webkit-max-content 1fr;
-    grid-template-rows: max-content 1fr;
-    transition: var(--transition);
-}
-
-.shekel {
-    line-height: 0;
-}
-
-.view-wrapper {
-    height: 100%;
-    position: relative;
-    overflow: hidden;
-}
-
-.extraOptions {
-    max-height: 30px;
-    overflow: hidden;
-    transition: all 0.2s 30s ease;
-}
-
-.extraOptions:hover {
-    max-height: 200vh;
-    transition: 0.2s all 0.2s ease;
-}
-
-@media screen and (max-width: 1000px) {
-    .entity-container {
-        grid-template-columns: minmax(22vw, 1fr) 2fr;
-    }
-}
-
-@media screen and (max-width: 910px) {
-    .tab {
-        font-size: 12px;
-    }
-
-    .entity-container {
-        grid-template-columns: 1fr;
-        gap: 0;
-    }
-
-    .detail-view-inner {
-        border-radius: var(--card-border-radius);
-        background: var(--bgl-box-bg);
-    }
-
-    .detail-view-inner-wrap {
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        background: var(--bgl-bg);
-    }
-
-    .detail-view-inner-wrap.bgl_card {
-        background: var(--bgl-box-bg);
-    }
-
-    .bgl_card {
-        padding: 1rem 1rem;
-    }
-
-    .tabs {
-        -moz-column-gap: 10px;
-        column-gap: 10px;
-        margin-top: 10px;
-        margin-bottom: -15px;
-        box-sizing: border-box;
-        -webkit-margin-start: -1rem;
-        margin-inline-start: -1rem;
-        -webkit-padding-start: 1rem;
-        padding-inline-start: 1rem;
-        max-width: calc(100vw - 2rem);
-    }
-
-    .popup {
-        border-radius: 15px;
-        background: var(--bgl-popup-bg);
-        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
-        padding: 2rem;
-        min-width: 0;
-        max-width: 90%;
-        max-height: 90vh;
-        overflow-x: auto;
-        text-align: center;
-    }
-
-    .detail-main {
-        overflow-y: unset;
-    }
-
-    .detail-section {
-        height: -webkit-fit-content;
-        height: -moz-fit-content;
-        height: fit-content;
-    }
-
-    .field {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.5rem;
-        align-items: center;
-    }
-}
+/* App-level layout rules moved to app-layout.css (June 2026) */