@rokkit/themes 1.0.0-next.146 → 1.0.0-next.148

package/dist/grada-ui.css

@@ -65,7 +65,8 @@
 
 [data-style='grada-ui'] [data-button][data-style='default'][data-variant='primary'],
 [data-style='grada-ui'] [data-button]:not([data-style])[data-variant='primary'] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   color: white;
   border-radius: 20px;
   --un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
@@ -73,19 +74,24 @@
 
 [data-style='grada-ui'] [data-button][data-style='default'][data-variant='secondary'],
 [data-style='grada-ui'] [data-button]:not([data-style])[data-variant='secondary'] {
-  background-color: var(--gd-secondary);
+  --un-bg-opacity:1;background-color:rgba(var(--color-secondary-500),var(--un-bg-opacity));--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
   color: white;
   border-radius: 20px;
-  --un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
-}
+}[data-mode="dark"][data-style="grada-ui"] [data-button][data-style="default"][data-variant="secondary"],[data-mode="dark"] [data-style="grada-ui"] [data-button][data-style="default"][data-variant="secondary"],[data-mode="dark"][data-style="grada-ui"] [data-button]:not([data-style])[data-variant="secondary"],[data-mode="dark"] [data-style="grada-ui"] [data-button]:not([data-style])[data-variant="secondary"]{--un-bg-opacity:1;background-color:rgba(var(--color-secondary-500),var(--un-bg-opacity));}
+
+[data-style='grada-ui'] [data-button][data-style='default'][data-variant='accent'],
+[data-style='grada-ui'] [data-button]:not([data-style])[data-variant='accent'] {
+  --un-bg-opacity:1;background-color:rgba(var(--color-accent-500),var(--un-bg-opacity));--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
+  color: white;
+  border-radius: 20px;
+}[data-mode="dark"][data-style="grada-ui"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"] [data-style="grada-ui"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"][data-style="grada-ui"] [data-button]:not([data-style])[data-variant="accent"],[data-mode="dark"] [data-style="grada-ui"] [data-button]:not([data-style])[data-variant="accent"]{--un-bg-opacity:1;background-color:rgba(var(--color-accent-500),var(--un-bg-opacity));}
 
 [data-style='grada-ui'] [data-button][data-style='default'][data-variant='danger'],
 [data-style='grada-ui'] [data-button]:not([data-style])[data-variant='danger'] {
-  background-color: var(--gd-error);
+  --un-bg-opacity:1;background-color:rgba(var(--color-danger-500),var(--un-bg-opacity));--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
   color: white;
   border-radius: 20px;
-  --un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
-}
+}[data-mode="dark"][data-style="grada-ui"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"] [data-style="grada-ui"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"][data-style="grada-ui"] [data-button]:not([data-style])[data-variant="danger"],[data-mode="dark"] [data-style="grada-ui"] [data-button]:not([data-style])[data-variant="danger"]{--un-bg-opacity:1;background-color:rgba(var(--color-danger-500),var(--un-bg-opacity));}
 
 /* =============================================================================
    Outline Style
@@ -98,25 +104,24 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-button][data-style="outline"][data-variant="default"],[data-mode="dark"] [data-style="grada-ui"] [data-button][data-style="outline"][data-variant="default"],[data-mode="dark"][data-style="grada-ui"] [data-button][data-style="outline"]:not([data-variant]),[data-mode="dark"] [data-style="grada-ui"] [data-button][data-style="outline"]:not([data-variant]){--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-button][data-style='outline'][data-variant='primary'] {
-  border: 2px solid var(--gd-primary);
-  color: var(--gd-primary);
-  background: transparent;
+  border-width:2px;--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));background-color:transparent;--un-text-opacity:1;color:rgba(var(--color-primary-500),var(--un-text-opacity));
   border-radius: 20px;
-}
+}[data-mode="dark"][data-style="grada-ui"] [data-button][data-style="outline"][data-variant="primary"],[data-mode="dark"] [data-style="grada-ui"] [data-button][data-style="outline"][data-variant="primary"]{--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-500),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-button][data-style='outline'][data-variant='secondary'] {
-  border: 2px solid var(--gd-secondary);
-  color: var(--gd-secondary);
-  background: transparent;
+  border-width:2px;--un-border-opacity:1;border-color:rgba(var(--color-secondary-500),var(--un-border-opacity));background-color:transparent;--un-text-opacity:1;color:rgba(var(--color-secondary-500),var(--un-text-opacity));
   border-radius: 20px;
-}
+}[data-mode="dark"][data-style="grada-ui"] [data-button][data-style="outline"][data-variant="secondary"],[data-mode="dark"] [data-style="grada-ui"] [data-button][data-style="outline"][data-variant="secondary"]{--un-border-opacity:1;border-color:rgba(var(--color-secondary-500),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-secondary-500),var(--un-text-opacity));}
+
+[data-style='grada-ui'] [data-button][data-style='outline'][data-variant='accent'] {
+  border-width:2px;--un-border-opacity:1;border-color:rgba(var(--color-accent-500),var(--un-border-opacity));background-color:transparent;--un-text-opacity:1;color:rgba(var(--color-accent-500),var(--un-text-opacity));
+  border-radius: 20px;
+}[data-mode="dark"][data-style="grada-ui"] [data-button][data-style="outline"][data-variant="accent"],[data-mode="dark"] [data-style="grada-ui"] [data-button][data-style="outline"][data-variant="accent"]{--un-border-opacity:1;border-color:rgba(var(--color-accent-500),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-accent-500),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-button][data-style='outline'][data-variant='danger'] {
-  border: 2px solid var(--gd-error);
-  color: var(--gd-error);
-  background: transparent;
+  border-width:2px;--un-border-opacity:1;border-color:rgba(var(--color-danger-500),var(--un-border-opacity));background-color:transparent;--un-text-opacity:1;color:rgba(var(--color-danger-500),var(--un-text-opacity));
   border-radius: 20px;
-}
+}[data-mode="dark"][data-style="grada-ui"] [data-button][data-style="outline"][data-variant="danger"],[data-mode="dark"] [data-style="grada-ui"] [data-button][data-style="outline"][data-variant="danger"]{--un-border-opacity:1;border-color:rgba(var(--color-danger-500),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-danger-500),var(--un-text-opacity));}
 
 /* =============================================================================
    Ghost Style
@@ -134,16 +139,20 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-button][data-style="ghost"][data-variant="default"],[data-mode="dark"] [data-style="grada-ui"] [data-button][data-style="ghost"][data-variant="default"],[data-mode="dark"][data-style="grada-ui"] [data-button][data-style="ghost"]:not([data-variant]),[data-mode="dark"] [data-style="grada-ui"] [data-button][data-style="ghost"]:not([data-variant]){--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-button][data-style='ghost'][data-variant='primary'] {
-  color: var(--gd-primary);
-}
+  --un-text-opacity:1;color:rgba(var(--color-primary-500),var(--un-text-opacity));
+}[data-mode="dark"][data-style="grada-ui"] [data-button][data-style="ghost"][data-variant="primary"],[data-mode="dark"] [data-style="grada-ui"] [data-button][data-style="ghost"][data-variant="primary"]{--un-text-opacity:1;color:rgba(var(--color-primary-500),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-button][data-style='ghost'][data-variant='secondary'] {
-  color: var(--gd-secondary);
-}
+  --un-text-opacity:1;color:rgba(var(--color-secondary-500),var(--un-text-opacity));
+}[data-mode="dark"][data-style="grada-ui"] [data-button][data-style="ghost"][data-variant="secondary"],[data-mode="dark"] [data-style="grada-ui"] [data-button][data-style="ghost"][data-variant="secondary"]{--un-text-opacity:1;color:rgba(var(--color-secondary-500),var(--un-text-opacity));}
+
+[data-style='grada-ui'] [data-button][data-style='ghost'][data-variant='accent'] {
+  --un-text-opacity:1;color:rgba(var(--color-accent-500),var(--un-text-opacity));
+}[data-mode="dark"][data-style="grada-ui"] [data-button][data-style="ghost"][data-variant="accent"],[data-mode="dark"] [data-style="grada-ui"] [data-button][data-style="ghost"][data-variant="accent"]{--un-text-opacity:1;color:rgba(var(--color-accent-500),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-button][data-style='ghost'][data-variant='danger'] {
-  color: var(--gd-error);
-}
+  --un-text-opacity:1;color:rgba(var(--color-danger-500),var(--un-text-opacity));
+}[data-mode="dark"][data-style="grada-ui"] [data-button][data-style="ghost"][data-variant="danger"],[data-mode="dark"] [data-style="grada-ui"] [data-button][data-style="ghost"][data-variant="danger"]{--un-text-opacity:1;color:rgba(var(--color-danger-500),var(--un-text-opacity));}
 
 /* =============================================================================
    Gradient Style
@@ -157,19 +166,27 @@
 
 [data-style='grada-ui'] [data-button][data-style='gradient'][data-variant='primary'],
 [data-style='grada-ui'] [data-button][data-style='gradient'][data-variant='secondary'] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   color: white;
   border-radius: 20px;
   --un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
 }
 
-[data-style='grada-ui'] [data-button][data-style='gradient'][data-variant='danger'] {
-  background-color: var(--gd-error);
+[data-style='grada-ui'] [data-button][data-style='gradient'][data-variant='accent'] {
+  background-image: linear-gradient(to right, rgba(var(--color-accent-500), 1), rgba(var(--color-accent-400), 1));
+  background-color: transparent;
   color: white;
   border-radius: 20px;
   --un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
 }
 
+[data-style='grada-ui'] [data-button][data-style='gradient'][data-variant='danger'] {
+  --un-bg-opacity:1;background-color:rgba(var(--color-danger-500),var(--un-bg-opacity));--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
+  color: white;
+  border-radius: 20px;
+}[data-mode="dark"][data-style="grada-ui"] [data-button][data-style="gradient"][data-variant="danger"],[data-mode="dark"] [data-style="grada-ui"] [data-button][data-style="gradient"][data-variant="danger"]{--un-bg-opacity:1;background-color:rgba(var(--color-danger-500),var(--un-bg-opacity));}
+
 /* =============================================================================
    Link Style
    ============================================================================= */
@@ -180,16 +197,20 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-button][data-style="link"][data-variant="default"],[data-mode="dark"] [data-style="grada-ui"] [data-button][data-style="link"][data-variant="default"],[data-mode="dark"][data-style="grada-ui"] [data-button][data-style="link"]:not([data-variant]),[data-mode="dark"] [data-style="grada-ui"] [data-button][data-style="link"]:not([data-variant]){--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-button][data-style='link'][data-variant='primary'] {
-  color: var(--gd-primary);
-}
+  --un-text-opacity:1;color:rgba(var(--color-primary-500),var(--un-text-opacity));
+}[data-mode="dark"][data-style="grada-ui"] [data-button][data-style="link"][data-variant="primary"],[data-mode="dark"] [data-style="grada-ui"] [data-button][data-style="link"][data-variant="primary"]{--un-text-opacity:1;color:rgba(var(--color-primary-500),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-button][data-style='link'][data-variant='secondary'] {
-  color: var(--gd-secondary);
-}
+  --un-text-opacity:1;color:rgba(var(--color-secondary-500),var(--un-text-opacity));
+}[data-mode="dark"][data-style="grada-ui"] [data-button][data-style="link"][data-variant="secondary"],[data-mode="dark"] [data-style="grada-ui"] [data-button][data-style="link"][data-variant="secondary"]{--un-text-opacity:1;color:rgba(var(--color-secondary-500),var(--un-text-opacity));}
+
+[data-style='grada-ui'] [data-button][data-style='link'][data-variant='accent'] {
+  --un-text-opacity:1;color:rgba(var(--color-accent-500),var(--un-text-opacity));
+}[data-mode="dark"][data-style="grada-ui"] [data-button][data-style="link"][data-variant="accent"],[data-mode="dark"] [data-style="grada-ui"] [data-button][data-style="link"][data-variant="accent"]{--un-text-opacity:1;color:rgba(var(--color-accent-500),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-button][data-style='link'][data-variant='danger'] {
-  color: var(--gd-error);
-}
+  --un-text-opacity:1;color:rgba(var(--color-danger-500),var(--un-text-opacity));
+}[data-mode="dark"][data-style="grada-ui"] [data-button][data-style="link"][data-variant="danger"],[data-mode="dark"] [data-style="grada-ui"] [data-button][data-style="link"][data-variant="danger"]{--un-text-opacity:1;color:rgba(var(--color-danger-500),var(--un-text-opacity));}
 
 /* =============================================================================
    Hover States
@@ -225,8 +246,25 @@
    ============================================================================= */
 
 [data-style='grada-ui'] [data-button]:focus-visible {
-  outline: 2px solid var(--gd-primary);
-  outline-offset: 2px;
+  outline-width:2px;--un-outline-color-opacity:1;outline-color:rgba(var(--color-primary-500),var(--un-outline-color-opacity));outline-offset:2px;outline-style:solid;
+}[data-mode="dark"][data-style="grada-ui"] [data-button]:focus-visible,[data-mode="dark"] [data-style="grada-ui"] [data-button]:focus-visible{--un-outline-color-opacity:1;outline-color:rgba(var(--color-primary-500),var(--un-outline-color-opacity));}
+
+/* =============================================================================
+   Button Group — override pill radius for connected appearance
+   ============================================================================= */
+
+[data-style='grada-ui'] [data-button-group] [data-button] {
+  border-radius: 0;
+}
+
+[data-style='grada-ui'] [data-button-group] [data-button]:first-child {
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
+}
+
+[data-style='grada-ui'] [data-button-group] [data-button]:last-child {
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
 }
 
 /**
@@ -251,10 +289,9 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-input-root]:hover,[data-mode="dark"] [data-style="grada-ui"] [data-input-root]:hover{--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));}
 
 [data-style='grada-ui'] [data-input-root]:focus-within {
-  border-color: var(--gd-primary);
+  --un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));
   background-image: none;
-  --un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));
-}
+}[data-mode="dark"][data-style="grada-ui"] [data-input-root]:focus-within,[data-mode="dark"] [data-style="grada-ui"] [data-input-root]:focus-within{--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));}
 
 /* Inputs inside wrapper */
 [data-style='grada-ui']
@@ -265,6 +302,7 @@
   width:100%;border-style:none;background-color:transparent;padding-left:0.75rem;padding-right:0.75rem;padding-top:0.625rem;padding-bottom:0.625rem;--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;
   font-size: 0.875rem;
   line-height: 1.25rem;
+  border-radius: 2px;
 }[data-mode="dark"][data-style="grada-ui"] [data-input-root] input:not([type="checkbox"],[type="radio"],[type="color"]),[data-mode="dark"] [data-style="grada-ui"] [data-input-root] input:not([type="checkbox"],[type="radio"],[type="color"]),[data-mode="dark"][data-style="grada-ui"] [data-input-root] textarea,[data-mode="dark"] [data-style="grada-ui"] [data-input-root] textarea,[data-mode="dark"][data-style="grada-ui"] [data-input-root] select,[data-mode="dark"] [data-style="grada-ui"] [data-input-root] select{--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-input-root] textarea {
@@ -310,20 +348,20 @@
    ============================================================================= */
 
 [data-style='grada-ui'] [data-field-state='pass'] [data-input-root] {
-  border-left: 4px solid var(--gd-success);
-}
+  border-left-width:4px;--un-border-opacity:1;border-color:rgba(var(--color-success-500),var(--un-border-opacity));
+}[data-mode="dark"][data-style="grada-ui"] [data-field-state="pass"] [data-input-root],[data-mode="dark"] [data-style="grada-ui"] [data-field-state="pass"] [data-input-root]{--un-border-opacity:1;border-color:rgba(var(--color-success-500),var(--un-border-opacity));}
 
 /* =============================================================================
    Invalid / Error State — 4px left border error pink
    ============================================================================= */
 
 [data-style='grada-ui'] [data-field-state='fail'] [data-input-root] {
-  border-left: 4px solid var(--gd-error-border);
-}
+  border-left-width:4px;--un-border-opacity:1;border-color:rgba(var(--color-danger-400),var(--un-border-opacity));
+}[data-mode="dark"][data-style="grada-ui"] [data-field-state="fail"] [data-input-root],[data-mode="dark"] [data-style="grada-ui"] [data-field-state="fail"] [data-input-root]{--un-border-opacity:1;border-color:rgba(var(--color-danger-600),var(--un-border-opacity));}
 
 [data-style='grada-ui'] [data-field-state='fail'] label {
-  color: var(--gd-error-text);
-}
+  --un-text-opacity:1;color:rgba(var(--color-danger-500),var(--un-text-opacity));
+}[data-mode="dark"][data-style="grada-ui"] [data-field-state="fail"] label,[data-mode="dark"] [data-style="grada-ui"] [data-field-state="fail"] label{--un-text-opacity:1;color:rgba(var(--color-danger-500),var(--un-text-opacity));}
 
 /* =============================================================================
    Disabled State
@@ -338,8 +376,8 @@
    ============================================================================= */
 
 [data-style='grada-ui'] [data-field-info] {
-  color: var(--gd-primary);
-}
+  --un-text-opacity:1;color:rgba(var(--color-primary-500),var(--un-text-opacity));
+}[data-mode="dark"][data-style="grada-ui"] [data-field-info],[data-mode="dark"] [data-style="grada-ui"] [data-field-info]{--un-text-opacity:1;color:rgba(var(--color-primary-500),var(--un-text-opacity));}
 
 /* =============================================================================
    Separator
@@ -358,9 +396,8 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-description],[data-mode="dark"] [data-style="grada-ui"] [data-description]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-message] {
-  margin-top:0.25rem;padding-left:0.25rem;padding-right:0.25rem;font-size:0.75rem;line-height:1rem;
-  color: var(--gd-error-text);
-}
+  margin-top:0.25rem;padding-left:0.25rem;padding-right:0.25rem;font-size:0.75rem;line-height:1rem;--un-text-opacity:1;color:rgba(var(--color-danger-500),var(--un-text-opacity));
+}[data-mode="dark"][data-style="grada-ui"] [data-message],[data-mode="dark"] [data-style="grada-ui"] [data-message]{--un-text-opacity:1;color:rgba(var(--color-danger-500),var(--un-text-opacity));}
 
 /* =============================================================================
    Placeholder
@@ -368,8 +405,8 @@
 
 [data-style='grada-ui'] [data-input-root] input::placeholder,
 [data-style='grada-ui'] [data-input-root] textarea::placeholder {
-  color: var(--gd-grey-c);
-}
+  --un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));
+}[data-mode="dark"][data-style="grada-ui"] [data-input-root] input::placeholder,[data-mode="dark"] [data-style="grada-ui"] [data-input-root] input::placeholder,[data-mode="dark"][data-style="grada-ui"] [data-input-root] textarea::placeholder,[data-mode="dark"] [data-style="grada-ui"] [data-input-root] textarea::placeholder{--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));}
 
 /* =============================================================================
    Checkbox
@@ -382,8 +419,8 @@
 [data-style='grada-ui']
   [data-checkbox-root][data-variant='custom']:has(input:checked)
   [data-checkbox-icon] {
-  color: var(--gd-primary);
-}
+  --un-text-opacity:1;color:rgba(var(--color-primary-500),var(--un-text-opacity));
+}[data-mode="dark"][data-style="grada-ui"] [data-checkbox-root][data-variant="custom"]:has(input:checked) [data-checkbox-icon],[data-mode="dark"] [data-style="grada-ui"] [data-checkbox-root][data-variant="custom"]:has(input:checked) [data-checkbox-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-500),var(--un-text-opacity));}
 
 /**
  * Toolbar - Grada UI Theme Styles
@@ -391,28 +428,28 @@
 
 [data-style='grada-ui'] [data-toolbar] {
   --un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
-  border-bottom: 1px solid var(--gd-grey-a);
+  border-bottom: 1px solid rgba(var(--color-surface-z300), 1);
 }
 
 [data-style='grada-ui'] [data-toolbar][data-toolbar-position='top'],
 [data-style='grada-ui'] [data-toolbar]:not([data-toolbar-position]) {
-  border-bottom: 1px solid var(--gd-grey-a);
+  border-bottom: 1px solid rgba(var(--color-surface-z300), 1);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 }
 
 [data-style='grada-ui'] [data-toolbar][data-toolbar-position='bottom'] {
-  border-top: 1px solid var(--gd-grey-a);
+  border-top: 1px solid rgba(var(--color-surface-z300), 1);
   border-bottom: none;
   box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
 }
 
 [data-style='grada-ui'] [data-toolbar][data-toolbar-position='left'] {
-  border-right: 1px solid var(--gd-grey-a);
+  border-right: 1px solid rgba(var(--color-surface-z300), 1);
   border-bottom: none;
 }
 
 [data-style='grada-ui'] [data-toolbar][data-toolbar-position='right'] {
-  border-left: 1px solid var(--gd-grey-a);
+  border-left: 1px solid rgba(var(--color-surface-z300), 1);
   border-bottom: none;
 }
 
@@ -429,18 +466,20 @@
 [data-style='grada-ui']
   [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled='true']) {
   --un-bg-opacity:1;background-color:rgba(var(--color-surface-100),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));
-  outline: 2px solid var(--gd-primary);
+  outline: 2px solid rgba(var(--color-primary-500), 1);
   outline-offset: -2px;
 }[data-mode="dark"][data-style="grada-ui"] [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled="true"]),[data-mode="dark"] [data-style="grada-ui"] [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled="true"]){--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
 
 /* Active */
 [data-style='grada-ui'] [data-toolbar-item][data-active='true'] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   color: white;
 }
 
 [data-style='grada-ui'] [data-toolbar-item][data-active='true']:hover:not(:disabled) {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   filter: brightness(1.08);
   color: white;
 }
@@ -474,7 +513,7 @@
  */
 
 [data-style='grada-ui'] [data-tabs-list] {
-  gap:0.25rem;--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));
+  gap:0.25rem;border-width:0px;--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));
   border-radius: 20px;
   padding: 3px;
 }[data-mode="dark"][data-style="grada-ui"] [data-tabs-list],[data-mode="dark"] [data-style="grada-ui"] [data-tabs-list]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));}
@@ -484,6 +523,7 @@
 }
 
 [data-style='grada-ui'] [data-tabs-trigger] {
+  background-color: transparent;
   --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
   border-radius: 20px;
   font-family: 'Montserrat', sans-serif;
@@ -497,18 +537,15 @@
   --un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
 }[data-mode="dark"][data-style="grada-ui"] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]),[data-mode="dark"] [data-style="grada-ui"] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]){--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
 
-/* Selected — gradient */
-[data-style='grada-ui'] [data-tabs-trigger][data-selected] {
-  background: var(--gd-gradient);
+/* Selected — primary→secondary gradient */
+[data-style='grada-ui'] [data-tabs-trigger][data-selected],
+[data-style='grada-ui'] [data-tabs-list]:focus-within [data-tabs-trigger][data-selected] {
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   color: white;
   --un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
 }
 
-/* Reset rokkit gradients bleeding in */
-[data-style='grada-ui'] [data-tabs-list]:focus-within [data-tabs-trigger][data-selected] {
-  background: var(--gd-gradient);
-}
-
 [data-style='grada-ui'] [data-tabs-trigger] [data-tabs-icon] {
   --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
 }[data-mode="dark"][data-style="grada-ui"] [data-tabs-trigger] [data-tabs-icon],[data-mode="dark"] [data-style="grada-ui"] [data-tabs-trigger] [data-tabs-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
@@ -549,7 +586,8 @@
 
 /* Selected state — gradient */
 [data-style='grada-ui'] [data-toggle-option][data-selected='true'] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   color: white;
   border-radius: 20px;
   --un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
@@ -578,18 +616,18 @@
   --un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));background-image:none;
 }[data-mode="dark"][data-style="grada-ui"] [data-switch-track],[data-mode="dark"] [data-style="grada-ui"] [data-switch-track]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));}
 
-[data-style='grada-ui'] [data-switch-thumb] {
+[data-style='grada-ui'] [data-switch] [data-switch-thumb] {
   --un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
 }
 
 [data-style='grada-ui'] [data-switch]:focus-visible [data-switch-track] {
-  outline: 2px solid var(--gd-primary);
-  outline-offset: 2px;
-}
+  outline-width:2px;--un-outline-color-opacity:1;outline-color:rgba(var(--color-primary-500),var(--un-outline-color-opacity));outline-offset:2px;outline-style:solid;
+}[data-mode="dark"][data-style="grada-ui"] [data-switch]:focus-visible [data-switch-track],[data-mode="dark"] [data-style="grada-ui"] [data-switch]:focus-visible [data-switch-track]{--un-outline-color-opacity:1;outline-color:rgba(var(--color-primary-500),var(--un-outline-color-opacity));}
 
 /* On state — gradient track */
 [data-style='grada-ui'] [data-switch][aria-checked='true'] [data-switch-track] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
 }
 
 [data-style='grada-ui'] [data-switch][aria-checked='true'] [data-switch-thumb] {
@@ -630,14 +668,14 @@
 /* Active state — muted when list not focused */
 [data-style='grada-ui'] [data-list] [data-list-item][data-active='true'] {
   --un-bg-opacity:1;background-color:rgba(var(--color-surface-100),var(--un-bg-opacity));
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }[data-mode="dark"][data-style="grada-ui"] [data-list] [data-list-item][data-active="true"],[data-mode="dark"] [data-style="grada-ui"] [data-list] [data-list-item][data-active="true"]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));}
 
 /* Active state — gradient left border when list has focus */
 [data-style='grada-ui'] [data-list]:focus-within [data-list-item][data-active='true'] {
   --un-bg-opacity:1;background-color:rgba(var(--color-surface-100),var(--un-bg-opacity));
-  border-left: 3px solid var(--gd-primary);
-  color: var(--gd-primary);
+  border-left: 3px solid rgba(var(--color-primary-500), 1);
+  color: rgba(var(--color-primary-500), 1);
 }[data-mode="dark"][data-style="grada-ui"] [data-list]:focus-within [data-list-item][data-active="true"],[data-mode="dark"] [data-style="grada-ui"] [data-list]:focus-within [data-list-item][data-active="true"]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));}
 
 [data-style='grada-ui'] [data-list] [data-list-item][data-active='true']:hover:not(:disabled),
@@ -656,7 +694,7 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],[data-mode="dark"] [data-style="grada-ui"] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],[data-mode="dark"][data-style="grada-ui"] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon],[data-mode="dark"] [data-style="grada-ui"] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-list] [data-list-item][data-active='true'] [data-item-icon] {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-list] [data-list-item] [data-item-description] {
@@ -669,7 +707,8 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-list] [data-list-item] [data-item-badge],[data-mode="dark"] [data-style="grada-ui"] [data-list] [data-list-item] [data-item-badge]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   color: white;
 }
 
@@ -694,12 +733,14 @@
 
 /* Multi-Selection */
 [data-style='grada-ui'] [data-list] [data-list-item][data-selected='true'] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   color: white;
 }
 
 [data-style='grada-ui'] [data-list]:focus-within [data-list-item][data-selected='true'] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
 }
 
 [data-style='grada-ui'] [data-list] [data-list-item][data-selected='true']:hover:not(:disabled) {
@@ -737,15 +778,15 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-tree-item-content]:hover:not(:disabled),[data-mode="dark"] [data-style="grada-ui"] [data-tree-item-content]:hover:not(:disabled),[data-mode="dark"][data-style="grada-ui"] [data-tree-item-content]:focus:not(:disabled),[data-mode="dark"] [data-style="grada-ui"] [data-tree-item-content]:focus:not(:disabled){--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-tree-item-content]:focus-visible {
-  outline: 2px solid var(--gd-primary);
+  outline: 2px solid rgba(var(--color-primary-500), 1);
   outline-offset: -2px;
 }
 
 /* Active/selected state */
 [data-style='grada-ui'] [data-tree-item-content][data-active='true'] {
   --un-bg-opacity:1;background-color:rgba(var(--color-surface-100),var(--un-bg-opacity));
-  border-left: 3px solid var(--gd-primary);
-  color: var(--gd-primary);
+  border-left: 3px solid rgba(var(--color-primary-500), 1);
+  color: rgba(var(--color-primary-500), 1);
 }[data-mode="dark"][data-style="grada-ui"] [data-tree-item-content][data-active="true"],[data-mode="dark"] [data-style="grada-ui"] [data-tree-item-content][data-active="true"]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));}
 
 [data-style='grada-ui'] [data-tree-item-content][data-active='true']:hover:not(:disabled) {
@@ -753,11 +794,11 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-tree-item-content][data-active="true"]:hover:not(:disabled),[data-mode="dark"] [data-style="grada-ui"] [data-tree-item-content][data-active="true"]:hover:not(:disabled){--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));}
 
 [data-style='grada-ui'] [data-tree]:focus-within [data-tree-item-content][data-active='true'] {
-  border-left: 3px solid var(--gd-primary);
+  border-left: 3px solid rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-tree]:not(:focus-within) [data-tree-item-content][data-active='true'] {
-  border-left: 3px solid var(--gd-primary);
+  border-left: 3px solid rgba(var(--color-primary-500), 1);
   opacity: 0.8;
 }
 
@@ -771,7 +812,7 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-tree-item-content]:hover:not(:disabled) [data-item-icon],[data-mode="dark"] [data-style="grada-ui"] [data-tree-item-content]:hover:not(:disabled) [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-tree-item-content][data-active='true'] [data-item-icon] {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-tree-item-content] [data-item-description] {
@@ -784,24 +825,25 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-tree-item-content] [data-item-badge],[data-mode="dark"] [data-style="grada-ui"] [data-tree-item-content] [data-item-badge]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-tree-item-content][data-active='true'] [data-item-badge] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   color: white;
 }
 
 /* Multi-Selection */
 [data-style='grada-ui'] [data-tree-node][data-selected='true'] [data-tree-node-row] {
-  background: color-mix(in srgb, var(--gd-primary) 15%, transparent);
+  background: rgba(var(--color-primary-500), 0.15);
 }
 
 [data-style='grada-ui'] [data-tree-node][data-selected='true'] [data-tree-item-content] {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui']
   [data-tree-node][data-selected='true']
   [data-tree-item-content]
   [data-item-icon] {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 /**
@@ -821,17 +863,17 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-select-trigger]:hover:not(:disabled),[data-mode="dark"] [data-style="grada-ui"] [data-select-trigger]:hover:not(:disabled){--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));}
 
 [data-style='grada-ui'] [data-select-trigger]:focus-visible {
-  outline: 2px solid var(--gd-primary);
+  outline: 2px solid rgba(var(--color-primary-500), 1);
   outline-offset: -2px;
 }
 
 [data-style='grada-ui'] [data-select][data-open='true'] [data-select-trigger] {
-  border-color: var(--gd-primary);
+  border-color: rgba(var(--color-primary-500), 1);
 }
 
 /* Placeholder */
 [data-style='grada-ui'] [data-select-placeholder] {
-  color: var(--gd-grey-c);
+  color: rgba(var(--color-surface-z500), 1);
 }
 
 /* Arrow */
@@ -840,12 +882,13 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-select-arrow],[data-mode="dark"] [data-style="grada-ui"] [data-select-arrow]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 /* Tags (MultiSelect) */
 [data-style='grada-ui'] [data-select-tag] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   color: white;
   border-radius: 20px;
 }
@@ -877,25 +920,28 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-select-option]:hover:not(:disabled),[data-mode="dark"] [data-style="grada-ui"] [data-select-option]:hover:not(:disabled),[data-mode="dark"][data-style="grada-ui"] [data-select-option]:focus:not(:disabled),[data-mode="dark"] [data-style="grada-ui"] [data-select-option]:focus:not(:disabled){--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-select-option]:focus-visible {
-  outline: 2px solid var(--gd-primary);
+  outline: 2px solid rgba(var(--color-primary-500), 1);
   outline-offset: -2px;
 }
 
 /* Selected option — gradient background */
 [data-style='grada-ui'] [data-select-option][data-selected='true'] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   color: white;
 }
 
 [data-style='grada-ui'] [data-select-option][data-selected='true']:hover:not(:disabled),
 [data-style='grada-ui'] [data-select-option][data-selected='true']:focus:not(:disabled) {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   filter: brightness(1.1);
   color: white;
 }
 
 [data-style='grada-ui'] [data-select-dropdown]:focus-within [data-select-option][data-selected='true'] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
 }
 
 /* Check mark */
@@ -910,8 +956,8 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-select-checkbox],[data-mode="dark"] [data-style="grada-ui"] [data-select-checkbox]{--un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));}
 
 [data-style='grada-ui'] [data-select-checkbox][data-checked='true'] {
-  background: var(--gd-primary);
-  border-color: var(--gd-primary);
+  background: rgba(var(--color-primary-500), 1);
+  border-color: rgba(var(--color-primary-500), 1);
   color: white;
 }
 
@@ -961,12 +1007,12 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-select-filter-input],[data-mode="dark"] [data-style="grada-ui"] [data-select-filter-input]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-select-filter-input]:focus {
-  border-color: var(--gd-primary);
+  border-color: rgba(var(--color-primary-500), 1);
   outline: none;
 }
 
 [data-style='grada-ui'] [data-select-filter-input]::placeholder {
-  color: var(--gd-grey-c);
+  color: rgba(var(--color-surface-z500), 1);
 }
 
 [data-style='grada-ui'] [data-select-empty] {
@@ -984,16 +1030,16 @@
 
 [data-style='grada-ui'] [data-menu-trigger]:hover:not(:disabled) {
   --un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));
-  border-color: var(--gd-primary);
+  border-color: rgba(var(--color-primary-500), 1);
 }[data-mode="dark"][data-style="grada-ui"] [data-menu-trigger]:hover:not(:disabled),[data-mode="dark"] [data-style="grada-ui"] [data-menu-trigger]:hover:not(:disabled){--un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-menu-trigger]:focus-visible {
-  outline: 2px solid var(--gd-primary);
+  outline: 2px solid rgba(var(--color-primary-500), 1);
   outline-offset: -2px;
 }
 
 [data-style='grada-ui'] [data-menu][data-open='true'] [data-menu-trigger] {
-  border-color: var(--gd-primary);
+  border-color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-menu-trigger] [data-menu-icon] {
@@ -1001,7 +1047,7 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-menu-trigger] [data-menu-icon],[data-mode="dark"] [data-style="grada-ui"] [data-menu-trigger] [data-menu-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-menu-trigger] [data-menu-arrow] {
@@ -1025,7 +1071,7 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-menu-item]:hover:not(:disabled),[data-mode="dark"] [data-style="grada-ui"] [data-menu-item]:hover:not(:disabled),[data-mode="dark"][data-style="grada-ui"] [data-menu-item]:focus:not(:disabled),[data-mode="dark"] [data-style="grada-ui"] [data-menu-item]:focus:not(:disabled){--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-menu-item]:focus-visible {
-  outline: 2px solid var(--gd-primary);
+  outline: 2px solid rgba(var(--color-primary-500), 1);
   outline-offset: -2px;
 }
 
@@ -1034,7 +1080,7 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-menu-item] [data-item-icon],[data-mode="dark"] [data-style="grada-ui"] [data-menu-item] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-menu-item]:hover:not(:disabled) [data-item-icon] {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-menu-item] [data-item-description] {
@@ -1066,16 +1112,16 @@
 
 [data-style='grada-ui'] [data-dropdown-trigger]:hover:not(:disabled) {
   --un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));
-  border-color: var(--gd-primary);
+  border-color: rgba(var(--color-primary-500), 1);
 }[data-mode="dark"][data-style="grada-ui"] [data-dropdown-trigger]:hover:not(:disabled),[data-mode="dark"] [data-style="grada-ui"] [data-dropdown-trigger]:hover:not(:disabled){--un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-dropdown-trigger]:focus-visible {
-  outline: 2px solid var(--gd-primary);
+  outline: 2px solid rgba(var(--color-primary-500), 1);
   outline-offset: -2px;
 }
 
 [data-style='grada-ui'] [data-dropdown][data-open='true'] [data-dropdown-trigger] {
-  border-color: var(--gd-primary);
+  border-color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-dropdown-trigger] [data-dropdown-icon] {
@@ -1101,7 +1147,8 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-dropdown-option]:hover:not(:disabled),[data-mode="dark"] [data-style="grada-ui"] [data-dropdown-option]:hover:not(:disabled),[data-mode="dark"][data-style="grada-ui"] [data-dropdown-option]:focus:not(:disabled),[data-mode="dark"] [data-style="grada-ui"] [data-dropdown-option]:focus:not(:disabled){--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-dropdown-option][data-active='true'] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   color: white;
 }
 
@@ -1116,7 +1163,8 @@
  */
 
 [data-style='grada-ui'] [data-fab-trigger] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   color: white;
   --un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
   border-radius: 50%;
@@ -1130,7 +1178,7 @@
 }
 
 [data-style='grada-ui'] [data-fab-trigger]:focus-visible {
-  outline: 2px solid var(--gd-primary);
+  outline: 2px solid rgba(var(--color-primary-500), 1);
   outline-offset: 2px;
 }
 
@@ -1151,16 +1199,16 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-fab-item]:hover:not(:disabled),[data-mode="dark"] [data-style="grada-ui"] [data-fab-item]:hover:not(:disabled){--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-fab-item]:focus-visible {
-  outline: 2px solid var(--gd-primary);
+  outline: 2px solid rgba(var(--color-primary-500), 1);
   outline-offset: -2px;
 }
 
 [data-style='grada-ui'] [data-fab-item] [data-fab-item-icon] {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-fab-item]:hover:not(:disabled) [data-fab-item-icon] {
-  color: var(--gd-secondary);
+  color: rgba(var(--color-secondary-500), 1);
 }
 
 /* Backdrop */
@@ -1173,23 +1221,21 @@
  */
 
 [data-style='grada-ui'] [data-table-header] th {
-  border-bottom-width:1px;--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));font-weight:500;
+  border-bottom-width:1px;--un-bg-opacity:1;background-color:rgba(var(--color-surface-100),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));font-weight:500;
   font-family: 'Montserrat', sans-serif;
   font-size: 0.625rem;
   text-transform: uppercase;
   letter-spacing: 0.06em;
-  background-color: var(--gd-surface-a);
-  border-color: var(--gd-grey-a);
-}[data-mode="dark"][data-style="grada-ui"] [data-table-header] th,[data-mode="dark"] [data-style="grada-ui"] [data-table-header] th{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
+  border-color: rgba(var(--color-surface-z300), 1);
+}[data-mode="dark"][data-style="grada-ui"] [data-table-header] th,[data-mode="dark"] [data-style="grada-ui"] [data-table-header] th{--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-table-header-cell][data-sortable='true']:hover {
-  --un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));
-  background-color: var(--gd-surface-b);
-}[data-mode="dark"][data-style="grada-ui"] [data-table-header-cell][data-sortable="true"]:hover,[data-mode="dark"] [data-style="grada-ui"] [data-table-header-cell][data-sortable="true"]:hover{--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
+  --un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));
+}[data-mode="dark"][data-style="grada-ui"] [data-table-header-cell][data-sortable="true"]:hover,[data-mode="dark"] [data-style="grada-ui"] [data-table-header-cell][data-sortable="true"]:hover{--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-table-header-cell][data-sort-order='ascending'],
 [data-style='grada-ui'] [data-table-header-cell][data-sort-order='descending'] {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-table-sort-icon] {
@@ -1202,7 +1248,7 @@
 [data-style='grada-ui']
   [data-table-header-cell][data-sort-order='descending']
   [data-table-sort-icon] {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 /* Caption */
@@ -1213,7 +1259,7 @@
 /* Rows */
 [data-style='grada-ui'] [data-table-row] {
   border-bottom-width:1px;--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
-  border-color: var(--gd-grey-a);
+  border-color: rgba(var(--color-surface-z300), 1);
 }[data-mode="dark"][data-style="grada-ui"] [data-table-row],[data-mode="dark"] [data-style="grada-ui"] [data-table-row]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-table-row]:hover {
@@ -1222,13 +1268,13 @@
 
 [data-style='grada-ui'] [data-table-row]:focus {
   --un-bg-opacity:1;background-color:rgba(var(--color-surface-100),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
-  outline: 2px solid var(--gd-primary);
+  outline: 2px solid rgba(var(--color-primary-500), 1);
   outline-offset: -2px;
 }[data-mode="dark"][data-style="grada-ui"] [data-table-row]:focus,[data-mode="dark"] [data-style="grada-ui"] [data-table-row]:focus{--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-table-row][data-selected='true'] {
-  background: color-mix(in srgb, var(--gd-primary) 10%, transparent);
-  color: var(--gd-primary);
+  background: rgba(var(--color-primary-500), 0.1);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 /* Striped */
@@ -1247,7 +1293,7 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-table-cell] [data-cell-icon],[data-mode="dark"] [data-style="grada-ui"] [data-table-cell] [data-cell-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-table-row][data-selected='true'] [data-cell-icon] {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 /**
@@ -1260,12 +1306,12 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-search-input],[data-mode="dark"] [data-style="grada-ui"] [data-search-input]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-search-input]:focus {
-  border-color: var(--gd-primary);
+  border-color: rgba(var(--color-primary-500), 1);
   outline: none;
 }
 
 [data-style='grada-ui'] [data-search-input]::placeholder {
-  color: var(--gd-grey-c);
+  color: rgba(var(--color-surface-z500), 1);
 }
 
 [data-style='grada-ui'] [data-search-clear] {
@@ -1278,7 +1324,8 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-search-clear]:hover,[data-mode="dark"] [data-style="grada-ui"] [data-search-clear]:hover{--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-search-tag] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   color: white;
   border-radius: 20px;
 }
@@ -1305,24 +1352,25 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-range-bar],[data-mode="dark"] [data-style="grada-ui"] [data-range-bar]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));}
 
 [data-style='grada-ui'] [data-range-selected] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
 }
 
 /* Thumb — white square */
 [data-style='grada-ui'] [data-range-thumb] {
   background-color: white;
-  border: 2px solid var(--gd-primary);
+  border: 2px solid rgba(var(--color-primary-500), 1);
   border-radius: 2px;
   --un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
 }
 
 [data-style='grada-ui'] [data-range-thumb][data-sliding] {
   --un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gd-primary) 25%, transparent);
+  box-shadow: 0 0 0 4px rgba(var(--color-primary-500), 0.25);
 }
 
 [data-style='grada-ui'] [data-range-thumb]:focus-visible {
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gd-primary) 25%, transparent);
+  box-shadow: 0 0 0 4px rgba(var(--color-primary-500), 0.25);
 }
 
 /* Ticks */
@@ -1357,16 +1405,17 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-timeline-circle],[data-mode="dark"] [data-style="grada-ui"] [data-timeline-circle]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-timeline-item][data-completed] [data-timeline-circle] {
-  background: var(--gd-gradient);
-  border-color: var(--gd-primary);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
+  border-color: rgba(var(--color-primary-500), 1);
   color: white;
   --un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
 }
 
 [data-style='grada-ui'] [data-timeline-item][data-active] [data-timeline-circle] {
-  border-color: var(--gd-primary);
-  color: var(--gd-primary);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gd-primary) 25%, transparent);
+  border-color: rgba(var(--color-primary-500), 1);
+  color: rgba(var(--color-primary-500), 1);
+  box-shadow: 0 0 0 3px rgba(var(--color-primary-500), 0.25);
 }
 
 [data-style='grada-ui'] [data-timeline-connector] {
@@ -1374,7 +1423,8 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-timeline-connector],[data-mode="dark"] [data-style="grada-ui"] [data-timeline-connector]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));}
 
 [data-style='grada-ui'] [data-timeline-item][data-completed] [data-timeline-connector] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
 }
 
 [data-style='grada-ui'] [data-timeline-title] {
@@ -1391,7 +1441,7 @@
 
 [data-style='grada-ui'] [data-floating-nav] {
   --un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));--un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
-  border-right: 1px solid var(--gd-grey-a);
+  border-right: 1px solid rgba(var(--color-surface-z300), 1);
 }
 
 [data-style='grada-ui'] [data-floating-nav-title] {
@@ -1408,11 +1458,11 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-floating-nav-pin],[data-mode="dark"] [data-style="grada-ui"] [data-floating-nav-pin]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-floating-nav-pin]:hover {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-floating-nav-pin][aria-pressed='true'] {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-floating-nav-item] {
@@ -1425,12 +1475,12 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-floating-nav-item]:hover,[data-mode="dark"] [data-style="grada-ui"] [data-floating-nav-item]:hover{--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-floating-nav-item][data-active] {
-  color: var(--gd-primary);
-  background: color-mix(in srgb, var(--gd-primary) 10%, transparent);
+  color: rgba(var(--color-primary-500), 1);
+  background: rgba(var(--color-primary-500), 0.1);
 }
 
 [data-style='grada-ui'] [data-floating-nav-item]:focus-visible {
-  outline: 2px solid var(--gd-primary);
+  outline: 2px solid rgba(var(--color-primary-500), 1);
   outline-offset: -2px;
 }
 
@@ -1439,15 +1489,16 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-floating-nav-icon],[data-mode="dark"] [data-style="grada-ui"] [data-floating-nav-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-floating-nav-item]:hover [data-floating-nav-icon] {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-floating-nav-item][data-active] [data-floating-nav-icon] {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-floating-nav-indicator] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
 }
 
 /* TableOfContents — Grada UI theme */
@@ -1471,8 +1522,8 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-toc] [data-toc-item]:hover,[data-mode="dark"] [data-style="grada-ui"] [data-toc] [data-toc-item]:hover,[data-mode="dark"][data-style="grada-ui"] [data-toc] [data-toc-item][data-toc-focused],[data-mode="dark"] [data-style="grada-ui"] [data-toc] [data-toc-item][data-toc-focused]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-toc] [data-toc-item][data-toc-active] {
-  color: var(--gd-primary);
-  border-left-color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
+  border-left-color: rgba(var(--color-primary-500), 1);
 }
 
 /**
@@ -1482,11 +1533,10 @@
  */
 
 [data-style='grada-ui'] [data-card] {
-  border-width:1px;background-image:none;--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));
-  background-color: var(--gd-surface-a);
-  border-color: var(--gd-grey-a);
+  border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));
+  background-image: none;
   border-radius: 3px;
-}[data-mode="dark"][data-style="grada-ui"] [data-card],[data-mode="dark"] [data-style="grada-ui"] [data-card]{--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
+}[data-mode="dark"][data-style="grada-ui"] [data-card],[data-mode="dark"] [data-style="grada-ui"] [data-card]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-card][data-card-interactive] {
   cursor: pointer;
@@ -1494,9 +1544,8 @@
 }
 
 [data-style='grada-ui'] [data-card][data-card-interactive]:hover {
-  --un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
-  border-color: var(--gd-primary);
-}
+  --un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
+}[data-mode="dark"][data-style="grada-ui"] [data-card][data-card-interactive]:hover,[data-mode="dark"] [data-style="grada-ui"] [data-card][data-card-interactive]:hover{--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));}
 
 [data-style='grada-ui'] [data-card][data-card-interactive]:active {
   --un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
@@ -1507,26 +1556,26 @@
    ============================================================================= */
 
 [data-style='grada-ui'] [data-card-header] {
-  border-bottom: 1px solid var(--gd-grey-a);
-}
+  --un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));
+  border-bottom-width: 1px;
+}[data-mode="dark"][data-style="grada-ui"] [data-card-header],[data-mode="dark"] [data-style="grada-ui"] [data-card-header]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));}
 
 [data-style='grada-ui'] [data-card-body] {
   --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
 }[data-mode="dark"][data-style="grada-ui"] [data-card-body],[data-mode="dark"] [data-style="grada-ui"] [data-card-body]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-card-footer] {
-  --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
-  border-top: 1px solid var(--gd-grey-a);
-}[data-mode="dark"][data-style="grada-ui"] [data-card-footer],[data-mode="dark"] [data-style="grada-ui"] [data-card-footer]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
+  --un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
+  border-top-width: 1px;
+}[data-mode="dark"][data-style="grada-ui"] [data-card-footer],[data-mode="dark"] [data-style="grada-ui"] [data-card-footer]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
 
 /* =============================================================================
    Focus States
    ============================================================================= */
 
 [data-style='grada-ui'] [data-card][data-card-interactive]:focus-visible {
-  outline: 2px solid var(--gd-primary);
-  outline-offset: 2px;
-}
+  outline-width:2px;--un-outline-color-opacity:1;outline-color:rgba(var(--color-primary-500),var(--un-outline-color-opacity));outline-offset:2px;outline-style:solid;
+}[data-mode="dark"][data-style="grada-ui"] [data-card][data-card-interactive]:focus-visible,[data-mode="dark"] [data-style="grada-ui"] [data-card][data-card-interactive]:focus-visible{--un-outline-color-opacity:1;outline-color:rgba(var(--color-primary-500),var(--un-outline-color-opacity));}
 
 /* =============================================================================
    Disabled
@@ -1542,10 +1591,11 @@
    ============================================================================= */
 
 [data-style='grada-ui'] [data-card][data-variant='primary'] {
-  background: var(--gd-gradient);
-  color: white;
-  border: none;
-}
+  border-width:0px;--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
+  border-radius: 3px;
+}[data-mode="dark"][data-style="grada-ui"] [data-card][data-variant="primary"],[data-mode="dark"] [data-style="grada-ui"] [data-card][data-variant="primary"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-card][data-variant='primary'] [data-card-header],
 [data-style='grada-ui'] [data-card][data-variant='primary'] [data-card-footer] {
@@ -1557,11 +1607,10 @@
 }
 
 [data-style='grada-ui'] [data-card][data-variant='secondary'] {
-  background-color: var(--gd-secondary);
-  color: white;
-  border: none;
+  border-width:0px;--un-bg-opacity:1;background-color:rgba(var(--color-secondary-500),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));
+  background-image: none;
   border-radius: 3px;
-}
+}[data-mode="dark"][data-style="grada-ui"] [data-card][data-variant="secondary"],[data-mode="dark"] [data-style="grada-ui"] [data-card][data-variant="secondary"]{--un-bg-opacity:1;background-color:rgba(var(--color-secondary-500),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-card][data-variant='tertiary'] {
   border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-300),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-100),var(--un-bg-opacity));background-image:none;--un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));--un-shadow:0 0 var(--un-shadow-color, rgb(0 0 0 / 0));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
@@ -1581,12 +1630,12 @@
 
 [data-style='grada-ui'] [data-message-root][data-type='error'] {
   background-color: #fff5f7;
-  border-color: var(--gd-error-border);
-  color: var(--gd-error-text);
+  border-color: rgba(var(--color-danger-400), 1);
+  color: rgba(var(--color-danger-600), 1);
 }
 [data-style='grada-ui'] [data-message-root][data-type='error'] [data-message-icon],
 [data-style='grada-ui'] [data-message-root][data-type='error'] [data-message-dismiss] {
-  color: var(--gd-error-border);
+  color: rgba(var(--color-danger-400), 1);
 }
 
 [data-style='grada-ui'] [data-message-root][data-type='warning'] {
@@ -1599,22 +1648,22 @@
 
 [data-style='grada-ui'] [data-message-root][data-type='info'] {
   background-color: #f0f4ff;
-  border-color: var(--gd-secondary);
+  border-color: rgba(var(--color-secondary-500), 1);
   color: #4a3d7a;
 }
 [data-style='grada-ui'] [data-message-root][data-type='info'] [data-message-icon],
 [data-style='grada-ui'] [data-message-root][data-type='info'] [data-message-dismiss] {
-  color: var(--gd-secondary);
+  color: rgba(var(--color-secondary-500), 1);
 }
 
 [data-style='grada-ui'] [data-message-root][data-type='success'] {
   background-color: #f0faf4;
-  border-color: var(--gd-success);
+  border-color: rgba(var(--color-success-500), 1);
   color: #1a5c35;
 }
 [data-style='grada-ui'] [data-message-root][data-type='success'] [data-message-icon],
 [data-style='grada-ui'] [data-message-root][data-type='success'] [data-message-dismiss] {
-  color: var(--gd-success);
+  color: rgba(var(--color-success-500), 1);
 }
 
 /**
@@ -1622,10 +1671,10 @@
  */
 
 [data-style='grada-ui'] [data-status-item][data-status='pass'] span {
-  color: var(--gd-success);
+  color: rgba(var(--color-success-500), 1);
 }
 [data-style='grada-ui'] [data-status-item][data-status='fail'] span {
-  color: var(--gd-error-border);
+  color: rgba(var(--color-danger-400), 1);
 }
 [data-style='grada-ui'] [data-status-item][data-status='warn'] span {
   --un-text-opacity:1;color:rgba(var(--color-warning-600),var(--un-text-opacity));
@@ -1638,7 +1687,7 @@
   --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
 }[data-mode="dark"][data-style="grada-ui"] [data-status-item][data-status="pass"],[data-mode="dark"] [data-style="grada-ui"] [data-status-item][data-status="pass"]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
 [data-style='grada-ui'] [data-status-item][data-status='fail'] {
-  color: var(--gd-error-text);
+  color: rgba(var(--color-danger-600), 1);
 }
 [data-style='grada-ui'] [data-status-item][data-status='warn'] {
   --un-text-opacity:1;color:rgba(var(--color-warning-800),var(--un-text-opacity));
@@ -1648,20 +1697,20 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-status-item][data-status="unknown"],[data-mode="dark"] [data-style="grada-ui"] [data-status-item][data-status="unknown"]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-status-group][data-severity='error'] [data-status-header] {
-  color: var(--gd-error-border);
+  color: rgba(var(--color-danger-400), 1);
 }
 [data-style='grada-ui'] [data-status-group][data-severity='warning'] [data-status-header] {
   --un-text-opacity:1;color:rgba(var(--color-warning-600),var(--un-text-opacity));
 }[data-mode="dark"][data-style="grada-ui"] [data-status-group][data-severity="warning"] [data-status-header],[data-mode="dark"] [data-style="grada-ui"] [data-status-group][data-severity="warning"] [data-status-header]{--un-text-opacity:1;color:rgba(var(--color-warning-400),var(--un-text-opacity));}
 [data-style='grada-ui'] [data-status-group][data-severity='info'] [data-status-header] {
-  color: var(--gd-secondary);
+  color: rgba(var(--color-secondary-500), 1);
 }
 [data-style='grada-ui'] [data-status-group][data-severity='success'] [data-status-header] {
-  color: var(--gd-success);
+  color: rgba(var(--color-success-500), 1);
 }
 
 [data-style='grada-ui'] [data-status-item][data-status='error'] {
-  color: var(--gd-error-text);
+  color: rgba(var(--color-danger-600), 1);
 }
 [data-style='grada-ui'] [data-status-item][data-status='warning'] {
   --un-text-opacity:1;color:rgba(var(--color-warning-800),var(--un-text-opacity));
@@ -1674,8 +1723,44 @@
 }[data-mode="dark"][data-style="grada-ui"] [data-status-item][data-status="success"],[data-mode="dark"] [data-style="grada-ui"] [data-status-item][data-status="success"]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
 
 [data-style='grada-ui'] [data-status-count] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   color: white;
   font-weight: 600;
 }
 
+/**
+ * Chart - Grada UI Theme Styles
+ */
+
+[data-style='grada-ui'] [data-chart-axis-line],
+[data-style='grada-ui'] [data-chart-tick] line {
+  --un-stroke-opacity:1;stroke:rgba(var(--color-surface-300),var(--un-stroke-opacity));
+}[data-mode="dark"][data-style="grada-ui"] [data-chart-axis-line],[data-mode="dark"] [data-style="grada-ui"] [data-chart-axis-line],[data-mode="dark"][data-style="grada-ui"] [data-chart-tick] line,[data-mode="dark"] [data-style="grada-ui"] [data-chart-tick] line{--un-stroke-opacity:1;stroke:rgba(var(--color-surface-700),var(--un-stroke-opacity));}
+
+[data-style='grada-ui'] [data-chart-tick-label] {
+  --un-fill-opacity:1;fill:rgba(var(--color-surface-500),var(--un-fill-opacity));
+}[data-mode="dark"][data-style="grada-ui"] [data-chart-tick-label],[data-mode="dark"] [data-style="grada-ui"] [data-chart-tick-label]{--un-fill-opacity:1;fill:rgba(var(--color-surface-500),var(--un-fill-opacity));}
+
+[data-style='grada-ui'] [data-chart-grid-line] {
+  --un-stroke-opacity:1;stroke:rgba(var(--color-surface-300),var(--un-stroke-opacity));
+  stroke-opacity: 0.5;
+  stroke-dasharray: 2 4;
+}[data-mode="dark"][data-style="grada-ui"] [data-chart-grid-line],[data-mode="dark"] [data-style="grada-ui"] [data-chart-grid-line]{--un-stroke-opacity:1;stroke:rgba(var(--color-surface-700),var(--un-stroke-opacity));}
+
+[data-style='grada-ui'] [data-chart-legend-label] {
+  --un-fill-opacity:1;fill:rgba(var(--color-surface-500),var(--un-fill-opacity));
+}[data-mode="dark"][data-style="grada-ui"] [data-chart-legend-label],[data-mode="dark"] [data-style="grada-ui"] [data-chart-legend-label]{--un-fill-opacity:1;fill:rgba(var(--color-surface-500),var(--un-fill-opacity));}
+
+[data-style='grada-ui'] [data-chart-legend-item]:hover {
+  --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
+}[data-mode="dark"][data-style="grada-ui"] [data-chart-legend-item]:hover,[data-mode="dark"] [data-style="grada-ui"] [data-chart-legend-item]:hover{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
+
+[data-style='grada-ui'] [data-plot-element="bar"][data-dimmed],
+[data-style='grada-ui'] [data-plot-element="point"][data-dimmed],
+[data-style='grada-ui'] [data-plot-element="arc"][data-dimmed],
+[data-style='grada-ui'] [data-plot-element="line"][data-dimmed],
+[data-style='grada-ui'] [data-plot-element="area"][data-dimmed] {
+  opacity: 0.15;
+}
+