aplance-ui 1.0.1

package/registry/styles/app.css

@@ -0,0 +1,240 @@
+/* Load Geist Sans */
+/* geist-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Geist';
+  font-style: normal;
+  font-weight: 400;
+  src: url('./fonts/geist-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+:root {
+  /* Typography */
+  --font-family-1: "Geist", sans-serif;
+  --font-family-2: ui-sans-serif, system-ui, sans-serif;
+
+  /* Font Sizes */
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-md: 1rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+
+  /* Font Weights */
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Letter Spacing */
+  --letter-spacing-tight: -0.025em;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide: 0.025em;
+
+  /* Line Height */
+  --line-height-sm: 1;
+  --line-height-md: 1.25;
+  --line-height-lg: 2;
+
+  /* Spacing Tokens (also used for height/width sizes) */
+  --spacing-0: 0;
+  --spacing-1: 0.125rem;
+  --spacing-2: 0.25rem;
+  --spacing-3: 0.375rem;
+  --spacing-4: 0.5rem;
+  --spacing-5: 0.625rem;
+  --spacing-6: 0.75rem;
+  --spacing-7: 0.875rem;
+  --spacing-8: 1rem;
+  --spacing-9: 1.25rem;
+  --spacing-10: 1.5rem;
+  --spacing-11: 2rem;
+  --spacing-12: 2.5rem;
+  --spacing-14: 3.5rem;
+  --spacing-container-max: 500px;
+
+  /* Border Radius */
+  --radius-none: 0;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-full: 9999px;
+
+  /* Border Width */
+  --border-0: 0px;
+  --border-1: 1px;
+  --border-2: 2px;
+  --border-4: 4px;
+
+  /* Outline Width */
+  --outline-0: 0px;
+  --outline-1: 1px;
+  --outline-2: 2px;
+  --outline-4: 4px;
+
+  /* Transitions */
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Duration */
+  --duration-fast: 150ms;
+  --duration-slow: 300ms;
+
+  /* Easing */
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+
+  /* Surface */
+  --color-background: oklch(1 0 0);
+  --color-foreground: oklch(14% 0.00002 271.152);
+  --color-muted: oklch(95% 0.003 264.79);
+  --color-muted-foreground: oklch(49% 0.003 264.79);
+
+  /* Brand */
+  --color-primary: oklch(15% 0.00003 271.15);
+  --color-primary-muted: oklch(25% 0.00003 271.15);
+  --color-primary-foreground: oklch(98% 0 0);
+  --color-secondary: oklch(97% 0 0);
+  --color-secondary-muted: oklch(92% 0 0);
+  --color-secondary-foreground: oklch(19% 0 0);
+
+  /* Charts */
+  --color-chart-primary: var(--color-primary);
+  --color-chart-secondary: color-mix(in oklch, var(--color-primary) 84%, var(--color-background));
+  --color-chart-tertiary: color-mix(in oklch, var(--color-primary) 68%, var(--color-background));
+  --color-chart-quaternary: color-mix(in oklch, var(--color-primary) 52%, var(--color-background));
+  --color-chart-quinary: color-mix(in oklch, var(--color-primary) 72%, var(--color-primary-muted));
+  --color-chart-muted: color-mix(in oklch, var(--color-muted-foreground) 80%, var(--color-foreground));
+  --color-chart-grid: color-mix(in oklch, var(--color-border) 76%, transparent);
+  --color-chart-cursor: color-mix(in oklch, var(--color-muted) 58%, transparent);
+
+  /* Lines / focus */
+  --color-border: oklch(90% 0.003 285.8);
+  --color-ring: oklch(85% 0.004 285.97);
+
+  /* Status - subtle tint + readable foreground (no bare variant) */
+  --color-success-subtle: oklch(0.92 0.05 145);
+  --color-success-foreground: oklch(0.38 0.15 145);
+  --color-warning-subtle: oklch(0.93 0.06 85);
+  --color-warning-foreground: oklch(0.44 0.14 75);
+  --color-error-subtle: oklch(0.93 0.05 25);
+  --color-error-foreground: oklch(0.45 0.15 25);
+  --color-info-subtle: oklch(0.93 0.04 240);
+  --color-info-foreground: oklch(0.42 0.14 240);
+
+  /* Overlay backdrop + text selection */
+  --color-overlay: rgba(0, 0, 0, 0.45);
+  --color-selection: #a28fff;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg:
+    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-ring: 0 0 0 3px
+    color-mix(in srgb, var(--color-ring) 30%, transparent);
+
+  /* Blur */
+  --blur-sm: 4px;
+  --blur-md: 8px;
+  --blur-lg: 16px;
+
+  /* Z-index */
+  --z-index-popover: 1000;
+  --z-index-modal: 1400;
+
+  /* Aspect Ratio */
+  --aspect-photo: 4 / 3;
+
+  /* Order */
+  --order-header: 1;
+}
+
+/* Dark Theme */
+[data-theme="dark"] {
+  --color-background: oklch(13.979% 0.00002 271.152);
+  --color-foreground: oklch(0.985 0 0);
+  --color-muted: oklch(23% 0.004 286);
+  --color-muted-foreground: oklch(70% 0.00008 271.15);
+
+  --color-primary: oklch(98% 0.0001 271.15);
+  --color-primary-muted: oklch(75% 0.00008 271.15);
+  --color-primary-foreground: oklch(15% 0.00002 271.15);
+  --color-secondary: oklch(25% 0 0);
+  --color-secondary-muted: oklch(32% 0 0);
+  --color-secondary-foreground: oklch(0.99 0 0);
+
+  --color-border: oklch(30% 0.00004 271.15);
+  --color-ring: oklch(36% 0.00004 271.15);
+
+  --color-success-subtle: oklch(0.22 0.07 145);
+  --color-success-foreground: oklch(0.79 0.21 147);
+  --color-warning-subtle: oklch(0.25 0.06 75);
+  --color-warning-foreground: oklch(0.83 0.12 85);
+  --color-error-subtle: oklch(0.22 0.07 25);
+  --color-error-foreground: oklch(0.66 0.21 24.86);
+  --color-info-subtle: oklch(0.22 0.04 250);
+  --color-info-foreground: oklch(0.73 0.14 244.72);
+
+  --color-overlay: rgba(0, 0, 0, 0.65);
+  --color-selection: oklch(0.55 0.15 275);
+
+  --shadow-sm: 0 1px 2px 0 rgba(41, 41, 41, 0.3);
+  --shadow-md:
+    0 4px 6px -1px rgba(32, 32, 32, 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
+  --shadow-lg:
+    0 10px 15px -3px rgba(34, 34, 34, 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
+}
+
+@layer base {
+  *,
+  *::before,
+  *::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  /* Custom text selection colors */
+  ::selection {
+    background-color: var(--color-selection);
+    color: var(--color-primary-foreground);
+  }
+
+  ::-moz-selection {
+    background-color: var(--color-selection);
+    color: var(--color-primary-foreground);
+  }
+
+  /* Global html element styles */
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    font-family: var(--font-family-1);
+    line-height: 1.25;
+  }
+
+  button {
+    outline: none;
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+    line-height: 1;
+  }
+
+  a {
+    text-decoration: none;
+    color: unset;
+    line-height: 1;
+  }
+
+  ul {
+    list-style: none;
+  }
+}

package/registry/styles/components.css

@@ -0,0 +1,78 @@
+@layer components {
+  /* Action menus (popover with button items) */
+  .popover-action-menu {
+    min-width: 10rem;
+    padding: var(--spacing-2);
+    background-color: var(--color-background);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-1);
+  }
+
+  /* Display read-only info field (label + value pair) */
+  .info-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2);
+  }
+
+  .info-field-label {
+    font-size: var(--font-size-xs);
+    font-weight: 500;
+    color: var(--color-muted-foreground);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .info-field-value {
+    font-size: var(--font-size-sm);
+    font-weight: 500;
+    color: var(--color-foreground);
+  }
+
+  /* form */
+  .data-preview {
+    margin-top: 2rem;
+    padding: 1rem;
+    background-color: var(--color-muted);
+    border-radius: 8px;
+
+    > h4 {
+      margin-bottom: var(--spacing-6);
+      color: var(--color-muted-foreground);
+    }
+
+    > pre {
+      margin: 0;
+      font-size: var(--font-size-sm);
+      color: var(--color-info-foreground);
+      background-color: transparent;
+      text-wrap: wrap;
+    }
+  }
+
+  .form-fields {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-11);
+    padding: var(--spacing-10);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+
+    .form-control {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-11);
+    }
+  }
+}
+
+.form-actions {
+  display: flex;
+  gap: var(--spacing-3);
+  justify-content: flex-end;
+  margin-top: var(--spacing-8);
+}

package/registry/styles/globals.css

@@ -0,0 +1,7 @@
+@layer base, components, utilities-gen, utilities, overrides;
+/* Priority order (low → high) */
+@import "./app.css";
+@import "./components.css";
+@import "./utilities.css";
+
+

package/registry/styles/media.css

@@ -0,0 +1,25 @@
+/* Responsive Breakpoints */
+@custom-media --xsm (width <= 350px);
+@custom-media --sm (width <= 550px);
+@custom-media --md (width <= 900px);
+@custom-media --lg (width <= 1200px);
+@custom-media --xl (width <= 1800px);
+
+/* Theme Preferences */
+@custom-media --dark (prefers-color-scheme: dark);
+@custom-media --light (prefers-color-scheme: light);
+
+/* Motion Preferences */
+@custom-media --motion-safe (prefers-reduced-motion: no-preference);
+@custom-media --motion-reduce (prefers-reduced-motion: reduce);
+
+/* Contrast Preferences */
+@custom-media --contrast-more (prefers-contrast: more);
+@custom-media --contrast-less (prefers-contrast: less);
+
+/* Orientation */
+@custom-media --portrait (orientation: portrait);
+@custom-media --landscape (orientation: landscape);
+
+/* Print Media */
+@custom-media --print (print);

package/registry/styles/utilities.css

@@ -0,0 +1,90 @@
+@layer utilities-gen {
+  /* Generated utility classes will be auto injected here */
+}
+
+@layer utilities {
+  /* truncate text should be in separate wrapper or parent element like span or p */
+  .truncate-text {
+    max-width: 8rem;
+    flex: 1;
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: inline-block;
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  /* ── Page layout helpers ── */
+
+  /* Full-page scrollable content area (use on pages inside .main) */
+  .page-layout {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  /* Consistent page top row: title on left, action on right */
+  .page-header-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--spacing-9);
+    gap: var(--spacing-5);
+  }
+
+  /* Bold page title */
+  .page-title {
+    font-size: var(--font-size-xl);
+    font-weight: 700;
+    letter-spacing: -0.01em;
+  }
+
+  /* Section heading within a page */
+  .section-title {
+    font-size: var(--font-size-base);
+    font-weight: 600;
+    margin-bottom: var(--spacing-7);
+  }
+
+  /* Horizontal rule / divider for sections */
+  .section-divider {
+    height: 1px;
+    background: var(--color-border);
+    margin: var(--spacing-9) 0;
+    border: none;
+  }
+
+  .divider {
+    width: 100%;
+    height: 1px;
+    background-color: var(--color-border);
+    border: none;
+  }
+
+  /* Inbox 3-column grid */
+  .inbox-grid {
+    display: grid;
+    grid-template-columns: minmax(260px, 1fr) minmax(320px, 2fr) minmax(240px, 1fr);
+
+    & > :first-child {
+      border-right: var(--border-1) solid var(--color-border);
+    }
+
+    & > :last-child {
+      border-left: var(--border-1) solid var(--color-border);
+    }
+  }
+}

package/registry/themes/colors/blue.css

@@ -0,0 +1,37 @@
+/* Color theme: blue - blue primary over neutral surfaces. */
+
+:root {
+  --color-background: oklch(99% 0.002 240);
+  --color-foreground: oklch(20% 0.02 260);
+  --color-muted: oklch(96% 0.005 250);
+  --color-muted-foreground: oklch(52% 0.015 250);
+
+  --color-primary: oklch(55% 0.2 260);
+  --color-primary-muted: oklch(65% 0.17 260);
+  --color-primary-foreground: oklch(98% 0.005 240);
+  --color-secondary: oklch(96% 0.005 250);
+  --color-secondary-muted: oklch(90% 0.01 250);
+  --color-secondary-foreground: oklch(20% 0.02 260);
+
+  --color-border: oklch(90% 0.008 250);
+  --color-ring: oklch(55% 0.2 260);
+  --color-selection: oklch(78% 0.12 260);
+}
+
+[data-theme="dark"] {
+  --color-background: oklch(17% 0.015 260);
+  --color-foreground: oklch(97% 0.005 240);
+  --color-muted: oklch(26% 0.015 260);
+  --color-muted-foreground: oklch(72% 0.015 250);
+
+  --color-primary: oklch(62% 0.2 260);
+  --color-primary-muted: oklch(50% 0.18 260);
+  --color-primary-foreground: oklch(98% 0.005 240);
+  --color-secondary: oklch(28% 0.015 260);
+  --color-secondary-muted: oklch(34% 0.02 260);
+  --color-secondary-foreground: oklch(97% 0.005 240);
+
+  --color-border: oklch(30% 0.015 260);
+  --color-ring: oklch(62% 0.2 260);
+  --color-selection: oklch(45% 0.18 260);
+}

package/registry/themes/colors/green.css

@@ -0,0 +1,37 @@
+/* Color theme: green - green primary over neutral surfaces. */
+
+:root {
+  --color-background: oklch(99% 0.003 150);
+  --color-foreground: oklch(20% 0.015 150);
+  --color-muted: oklch(96% 0.008 150);
+  --color-muted-foreground: oklch(52% 0.015 150);
+
+  --color-primary: oklch(56% 0.17 150);
+  --color-primary-muted: oklch(66% 0.14 150);
+  --color-primary-foreground: oklch(98% 0.005 150);
+  --color-secondary: oklch(96% 0.008 150);
+  --color-secondary-muted: oklch(90% 0.012 150);
+  --color-secondary-foreground: oklch(20% 0.015 150);
+
+  --color-border: oklch(90% 0.01 150);
+  --color-ring: oklch(56% 0.17 150);
+  --color-selection: oklch(80% 0.1 150);
+}
+
+[data-theme="dark"] {
+  --color-background: oklch(17% 0.012 150);
+  --color-foreground: oklch(97% 0.005 150);
+  --color-muted: oklch(26% 0.015 150);
+  --color-muted-foreground: oklch(72% 0.015 150);
+
+  --color-primary: oklch(64% 0.17 150);
+  --color-primary-muted: oklch(52% 0.15 150);
+  --color-primary-foreground: oklch(98% 0.005 150);
+  --color-secondary: oklch(28% 0.015 150);
+  --color-secondary-muted: oklch(34% 0.02 150);
+  --color-secondary-foreground: oklch(97% 0.005 150);
+
+  --color-border: oklch(30% 0.015 150);
+  --color-ring: oklch(64% 0.17 150);
+  --color-selection: oklch(45% 0.15 150);
+}

package/registry/themes/colors/rose.css

@@ -0,0 +1,37 @@
+/* Color theme: rose - warm pink-leaning primary over neutral surfaces. */
+
+:root {
+  --color-background: oklch(99% 0.003 20);
+  --color-foreground: oklch(20% 0.015 20);
+  --color-muted: oklch(96% 0.005 20);
+  --color-muted-foreground: oklch(52% 0.015 20);
+
+  --color-primary: oklch(64% 0.22 15);
+  --color-primary-muted: oklch(72% 0.18 15);
+  --color-primary-foreground: oklch(98% 0.005 20);
+  --color-secondary: oklch(96% 0.005 20);
+  --color-secondary-muted: oklch(90% 0.01 20);
+  --color-secondary-foreground: oklch(20% 0.015 20);
+
+  --color-border: oklch(90% 0.008 20);
+  --color-ring: oklch(64% 0.22 15);
+  --color-selection: oklch(80% 0.12 15);
+}
+
+[data-theme="dark"] {
+  --color-background: oklch(17% 0.012 20);
+  --color-foreground: oklch(97% 0.005 20);
+  --color-muted: oklch(26% 0.015 20);
+  --color-muted-foreground: oklch(72% 0.015 20);
+
+  --color-primary: oklch(68% 0.2 15);
+  --color-primary-muted: oklch(58% 0.18 15);
+  --color-primary-foreground: oklch(98% 0.005 20);
+  --color-secondary: oklch(28% 0.015 20);
+  --color-secondary-muted: oklch(34% 0.018 20);
+  --color-secondary-foreground: oklch(97% 0.005 20);
+
+  --color-border: oklch(30% 0.015 20);
+  --color-ring: oklch(68% 0.2 15);
+  --color-selection: oklch(50% 0.18 15);
+}

package/registry/themes/colors/slate.css

@@ -0,0 +1,37 @@
+/* Color theme: slate - cool neutral with blue undertones. */
+
+:root {
+  --color-background: oklch(99% 0.005 240);
+  --color-foreground: oklch(20% 0.02 260);
+  --color-muted: oklch(95% 0.01 250);
+  --color-muted-foreground: oklch(48% 0.02 255);
+
+  --color-primary: oklch(28% 0.05 260);
+  --color-primary-muted: oklch(40% 0.06 260);
+  --color-primary-foreground: oklch(98% 0.005 240);
+  --color-secondary: oklch(96% 0.01 250);
+  --color-secondary-muted: oklch(90% 0.015 250);
+  --color-secondary-foreground: oklch(22% 0.04 260);
+
+  --color-border: oklch(88% 0.015 250);
+  --color-ring: oklch(65% 0.08 260);
+  --color-selection: oklch(70% 0.1 250);
+}
+
+[data-theme="dark"] {
+  --color-background: oklch(18% 0.02 260);
+  --color-foreground: oklch(96% 0.005 240);
+  --color-muted: oklch(26% 0.025 260);
+  --color-muted-foreground: oklch(70% 0.02 255);
+
+  --color-primary: oklch(92% 0.02 250);
+  --color-primary-muted: oklch(72% 0.03 255);
+  --color-primary-foreground: oklch(20% 0.02 260);
+  --color-secondary: oklch(28% 0.025 260);
+  --color-secondary-muted: oklch(34% 0.03 260);
+  --color-secondary-foreground: oklch(96% 0.01 240);
+
+  --color-border: oklch(32% 0.025 260);
+  --color-ring: oklch(55% 0.08 260);
+  --color-selection: oklch(55% 0.12 255);
+}

package/registry/themes/colors/stone.css

@@ -0,0 +1,37 @@
+/* Color theme: stone - warm neutral with subtle earthy undertones. */
+
+:root {
+  --color-background: oklch(99% 0.003 55);
+  --color-foreground: oklch(18% 0.01 55);
+  --color-muted: oklch(96% 0.005 60);
+  --color-muted-foreground: oklch(52% 0.01 60);
+
+  --color-primary: oklch(22% 0.015 55);
+  --color-primary-muted: oklch(38% 0.015 55);
+  --color-primary-foreground: oklch(98% 0.003 55);
+  --color-secondary: oklch(96% 0.005 60);
+  --color-secondary-muted: oklch(90% 0.008 60);
+  --color-secondary-foreground: oklch(22% 0.015 55);
+
+  --color-border: oklch(90% 0.006 60);
+  --color-ring: oklch(68% 0.02 55);
+  --color-selection: oklch(72% 0.03 55);
+}
+
+[data-theme="dark"] {
+  --color-background: oklch(16% 0.008 55);
+  --color-foreground: oklch(97% 0.004 55);
+  --color-muted: oklch(26% 0.01 55);
+  --color-muted-foreground: oklch(70% 0.01 55);
+
+  --color-primary: oklch(95% 0.008 55);
+  --color-primary-muted: oklch(76% 0.01 55);
+  --color-primary-foreground: oklch(22% 0.015 55);
+  --color-secondary: oklch(28% 0.01 55);
+  --color-secondary-muted: oklch(34% 0.012 55);
+  --color-secondary-foreground: oklch(97% 0.004 55);
+
+  --color-border: oklch(30% 0.01 55);
+  --color-ring: oklch(55% 0.02 55);
+  --color-selection: oklch(45% 0.03 55);
+}

package/registry/themes/colors/violet.css

@@ -0,0 +1,37 @@
+/* Color theme: violet - rich purple primary over neutral surfaces. */
+
+:root {
+  --color-background: oklch(99% 0.003 290);
+  --color-foreground: oklch(20% 0.02 290);
+  --color-muted: oklch(96% 0.008 290);
+  --color-muted-foreground: oklch(52% 0.015 290);
+
+  --color-primary: oklch(56% 0.22 295);
+  --color-primary-muted: oklch(66% 0.18 295);
+  --color-primary-foreground: oklch(98% 0.005 290);
+  --color-secondary: oklch(96% 0.008 290);
+  --color-secondary-muted: oklch(90% 0.012 290);
+  --color-secondary-foreground: oklch(20% 0.02 290);
+
+  --color-border: oklch(90% 0.01 290);
+  --color-ring: oklch(56% 0.22 295);
+  --color-selection: oklch(80% 0.12 295);
+}
+
+[data-theme="dark"] {
+  --color-background: oklch(17% 0.015 290);
+  --color-foreground: oklch(97% 0.005 290);
+  --color-muted: oklch(26% 0.018 290);
+  --color-muted-foreground: oklch(72% 0.015 290);
+
+  --color-primary: oklch(66% 0.22 295);
+  --color-primary-muted: oklch(54% 0.2 295);
+  --color-primary-foreground: oklch(98% 0.005 290);
+  --color-secondary: oklch(28% 0.018 290);
+  --color-secondary-muted: oklch(34% 0.022 290);
+  --color-secondary-foreground: oklch(97% 0.005 290);
+
+  --color-border: oklch(30% 0.018 290);
+  --color-ring: oklch(66% 0.22 295);
+  --color-selection: oklch(45% 0.2 295);
+}