@cognite/aura 0.1.1 → 0.1.3

package/dist/styles.source.css

@@ -0,0 +1,1055 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Space+Grotesk:wght@300..700&family=Source+Code+Pro:wght@200..900&display=swap');
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+/* Dark mode configuration */
+@variant dark (@media (prefers-color-scheme: dark));
+@variant dark (.dark &);
+
+@theme inline {
+  /* Container query breakpoint overrides for layout system */
+  --container-2xl: 40rem; /* 640px - Override Tailwind's default 672px */
+  --container-8xl: 96rem; /* 1536px - Custom breakpoint for widest layouts */
+
+  /* Typography scale overrides - font sizes */
+  --text-2xs: 0.625rem;
+  /* 10px */
+  --text-2xl: 1.5rem;
+  /* 24px (TW default is 24px) */
+  --text-3xl: 1.75rem;
+  /* 28px (TW default is 30px) */
+  --text-4xl: 2rem;
+  /* 32px (TW default is 36px) */
+  --text-5xl: 2.25rem;
+  /* 36px (TW default is 48px) */
+
+  /* Typography scale overrides - line heights */
+  --text-2xs--line-height: 0.75rem;
+  /* 12px */
+  --text-xs--line-height: 0.875rem;
+  /* 14px (TW default is 16px) */
+  --text-sm--line-height: 1.125rem;
+  /* 18px (TW default is 20px) */
+  --text-base--line-height: 1.25rem;
+  /* 20px (TW default is 24px) */
+  --text-lg--line-height: 1.5rem;
+  /* 24px (TW default is 28px) */
+  --text-xl--line-height: 1.5rem;
+  /* 24px (TW default is 28px) */
+  --text-2xl--line-height: 1.75rem;
+  /* 28px (TW default is 32px) */
+  --text-3xl--line-height: 2rem;
+  /* 32px (TW default is 36px) */
+  --text-4xl--line-height: 2.5rem;
+  /* 40px (TW default is 40px) */
+  --text-5xl--line-height: 2.75rem;
+  /* 44px (TW default is 1) */
+
+  --font-sans: var(--font-inter);
+  --font-marketing: var(--font-space-grotesk);
+  --font-mono: var(--font-source-code-pro);
+  --tracking-tight: -0.04px;
+  --tracking-tighter: -0.08px;
+  --tracking-tightest: -0.1px;
+  --shadow-sm: 0 1px 2px 0 var(--effect-shadow-sm);
+  /* tooltips; small containers */
+  --shadow-default:
+    0 1px 3px 0 var(--effect-shadow-md), 0 1px 2px 0 var(--effect-shadow-sm);
+  /* menus; popovers; hover cards */
+  --shadow-md:
+    0 4px 6px -1px var(--effect-shadow-md),
+    0 2px 4px -1px var(--effect-shadow-sm);
+  /* sonner; temporary elements */
+  --shadow-lg:
+    0 10px 15px -3px var(--effect-shadow-lg),
+    0 4px 6px -2px var(--effect-shadow-sm);
+  /* modals; dialogs without backdrop overlay */
+  --shadow-xl:
+    0 20px 25px -5px var(--effect-shadow-xl),
+    0 10px 10px -5px var(--effect-shadow-lg);
+  /* modals; dialogs with backdrop overlay */
+  --shadow-focus-ring: 0 0 0 2px var(--ring), 0 0 0 4px var(--ring-shadow);
+  /* default focus ring: inner border (2px dark) + outer glow (4px light, 2px visible beyond inner) */
+  --shadow-focus-ring-destructive:
+    0 0 0 2px var(--ring-destructive), 0 0 0 4px var(--ring-destructive-shadow);
+  /* destructive focus ring: inner border (2px dark) + outer glow (4px light, 2px visible beyond inner) */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-ring-shadow: var(--ring-shadow);
+  --color-ring-destructive: var(--ring-destructive);
+  --color-ring-destructive-shadow: var(--ring-destructive-shadow);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-destructive-hover: var(--destructive-hover);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-mountain-foreground: var(--mountain-foreground);
+  --color-mountain: var(--mountain);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-primary-hover: var(--primary-hover);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary-hover: var(--secondary-hover);
+  --color-tertiary: var(--tertiary);
+  --color-tertiary-hover: var(--tertiary-hover);
+  --color-tertiary-foreground: var(--tertiary-foreground);
+  --color-toggled: var(--toggled);
+  --color-toggled-hover: var(--toggled-hover);
+  --color-toggled-foreground: var(--toggled-foreground);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground-link: var(--foreground-link);
+  --color-backdrop: var(--backdrop);
+  --color-warning: var(--warning);
+  --color-warning-hover: var(--warning-hover);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-success: var(--success);
+  --color-success-hover: var(--success-hover);
+  --color-success-foreground: var(--success-foreground);
+  --color-neutral: var(--neutral);
+  --color-neutral-hover: var(--neutral-hover);
+  --color-neutral-foreground: var(--neutral-foreground);
+  --color-undefined: var(--undefined);
+  --color-undefined-hover: var(--undefined-hover);
+  --color-undefined-foreground: var(--undefined-foreground);
+  --color-disabled: var(--disabled);
+  --color-disabled-foreground: var(--disabled-foreground);
+  --color-hover: var(--hover);
+
+  /* Status color -alternate variants */
+  --color-destructive-foreground-alternate: var(
+    --destructive-foreground-alternate
+  );
+  --color-warning-foreground-alternate: var(--warning-foreground-alternate);
+  --color-success-foreground-alternate: var(--success-foreground-alternate);
+  --color-neutral-foreground-alternate: var(--neutral-foreground-alternate);
+  --color-undefined-foreground-alternate: var(--undefined-foreground-alternate);
+
+  /* Chart tokens */
+  --color-chart-fjord-solid: var(--chart-fjord-solid);
+  --color-chart-fjord-opacity-1: var(--chart-fjord-opacity-1);
+  --color-chart-fjord-opacity-2: var(--chart-fjord-opacity-2);
+  --color-chart-fjord-opacity-3: var(--chart-fjord-opacity-3);
+  --color-chart-fjord-opacity-4: var(--chart-fjord-opacity-4);
+  --color-chart-fjord-opacity-5: var(--chart-fjord-opacity-5);
+  --color-chart-aurora-solid: var(--chart-aurora-solid);
+  --color-chart-aurora-opacity-1: var(--chart-aurora-opacity-1);
+  --color-chart-aurora-opacity-2: var(--chart-aurora-opacity-2);
+  --color-chart-aurora-opacity-3: var(--chart-aurora-opacity-3);
+  --color-chart-aurora-opacity-4: var(--chart-aurora-opacity-4);
+  --color-chart-aurora-opacity-5: var(--chart-aurora-opacity-5);
+  --color-chart-nordic-solid: var(--chart-nordic-solid);
+  --color-chart-nordic-opacity-1: var(--chart-nordic-opacity-1);
+  --color-chart-nordic-opacity-2: var(--chart-nordic-opacity-2);
+  --color-chart-nordic-opacity-3: var(--chart-nordic-opacity-3);
+  --color-chart-nordic-opacity-4: var(--chart-nordic-opacity-4);
+  --color-chart-nordic-opacity-5: var(--chart-nordic-opacity-5);
+  --color-chart-dusk-solid: var(--chart-dusk-solid);
+  --color-chart-dusk-opacity-1: var(--chart-dusk-opacity-1);
+  --color-chart-dusk-opacity-2: var(--chart-dusk-opacity-2);
+  --color-chart-dusk-opacity-3: var(--chart-dusk-opacity-3);
+  --color-chart-dusk-opacity-4: var(--chart-dusk-opacity-4);
+  --color-chart-dusk-opacity-5: var(--chart-dusk-opacity-5);
+  --color-chart-orange-solid: var(--chart-orange-solid);
+  --color-chart-orange-opacity-1: var(--chart-orange-opacity-1);
+  --color-chart-orange-opacity-2: var(--chart-orange-opacity-2);
+  --color-chart-orange-opacity-3: var(--chart-orange-opacity-3);
+  --color-chart-orange-opacity-4: var(--chart-orange-opacity-4);
+  --color-chart-orange-opacity-5: var(--chart-orange-opacity-5);
+  --color-chart-gridlines: var(--chart-gridlines);
+
+  /* Opacity overlays */
+  --color-opacity-10: var(--opacity-10);
+  --color-opacity-20: var(--opacity-20);
+  --color-opacity-40: var(--opacity-40);
+  --color-opacity-60: var(--opacity-60);
+  --color-opacity-80: var(--opacity-80);
+
+  /* Effect tokens for shadows */
+  --color-effect-shadow-sm: var(--effect-shadow-sm);
+  --color-effect-shadow-md: var(--effect-shadow-md);
+  --color-effect-shadow-lg: var(--effect-shadow-lg);
+  --color-effect-shadow-xl: var(--effect-shadow-xl);
+
+  /* Color ramps - base colors */
+  --color-fjord: var(--fjord-50);
+  --color-nordic: var(--nordic-50);
+  --color-aurora: var(--aurora-50);
+  --color-sky: var(--sky-50);
+
+  /* Color ramps - individual shades */
+  --color-fjord-50: var(--fjord-50);
+  --color-fjord-100: var(--fjord-100);
+  --color-fjord-200: var(--fjord-200);
+  --color-fjord-300: var(--fjord-300);
+  --color-fjord-400: var(--fjord-400);
+  --color-fjord-450: var(--fjord-450);
+  --color-fjord-500: var(--fjord-500);
+  --color-fjord-550: var(--fjord-550);
+  --color-fjord-600: var(--fjord-600);
+  --color-fjord-650: var(--fjord-650);
+  --color-fjord-700: var(--fjord-700);
+  --color-fjord-800: var(--fjord-800);
+  --color-fjord-900: var(--fjord-900);
+  --color-fjord-950: var(--fjord-950);
+
+  --color-nordic-50: var(--nordic-50);
+  --color-nordic-100: var(--nordic-100);
+  --color-nordic-200: var(--nordic-200);
+  --color-nordic-300: var(--nordic-300);
+  --color-nordic-400: var(--nordic-400);
+  --color-nordic-450: var(--nordic-450);
+  --color-nordic-500: var(--nordic-500);
+  --color-nordic-550: var(--nordic-550);
+  --color-nordic-600: var(--nordic-600);
+  --color-nordic-650: var(--nordic-650);
+  --color-nordic-700: var(--nordic-700);
+  --color-nordic-800: var(--nordic-800);
+  --color-nordic-900: var(--nordic-900);
+  --color-nordic-950: var(--nordic-950);
+
+  --color-aurora-50: var(--aurora-50);
+  --color-aurora-100: var(--aurora-100);
+  --color-aurora-200: var(--aurora-200);
+  --color-aurora-300: var(--aurora-300);
+  --color-aurora-400: var(--aurora-400);
+  --color-aurora-450: var(--aurora-450);
+  --color-aurora-500: var(--aurora-500);
+  --color-aurora-550: var(--aurora-550);
+  --color-aurora-600: var(--aurora-600);
+  --color-aurora-650: var(--aurora-650);
+  --color-aurora-700: var(--aurora-700);
+  --color-aurora-800: var(--aurora-800);
+  --color-aurora-900: var(--aurora-900);
+  --color-aurora-950: var(--aurora-950);
+
+  --color-sky-50: var(--sky-50);
+  --color-sky-100: var(--sky-100);
+  --color-sky-200: var(--sky-200);
+  --color-sky-300: var(--sky-300);
+  --color-sky-400: var(--sky-400);
+  --color-sky-450: var(--sky-450);
+  --color-sky-500: var(--sky-500);
+  --color-sky-550: var(--sky-550);
+  --color-sky-600: var(--sky-600);
+  --color-sky-650: var(--sky-650);
+  --color-sky-700: var(--sky-700);
+  --color-sky-800: var(--sky-800);
+  --color-sky-900: var(--sky-900);
+  --color-sky-950: var(--sky-950);
+
+  --color-dusk-50: var(--dusk-50);
+  --color-dusk-100: var(--dusk-100);
+  --color-dusk-200: var(--dusk-200);
+  --color-dusk-300: var(--dusk-300);
+  --color-dusk-400: var(--dusk-400);
+  --color-dusk-450: var(--dusk-450);
+  --color-dusk-500: var(--dusk-500);
+  --color-dusk-550: var(--dusk-550);
+  --color-dusk-600: var(--dusk-600);
+  --color-dusk-650: var(--dusk-650);
+  --color-dusk-700: var(--dusk-700);
+  --color-dusk-800: var(--dusk-800);
+  --color-dusk-900: var(--dusk-900);
+  --color-dusk-950: var(--dusk-950);
+
+  --color-mountain-50: var(--mountain-50);
+  --color-mountain-100: var(--mountain-100);
+  --color-mountain-200: var(--mountain-200);
+  --color-mountain-300: var(--mountain-300);
+  --color-mountain-400: var(--mountain-400);
+  --color-mountain-450: var(--mountain-450);
+  --color-mountain-500: var(--mountain-500);
+  --color-mountain-550: var(--mountain-550);
+  --color-mountain-600: var(--mountain-600);
+  --color-mountain-650: var(--mountain-650);
+  --color-mountain-700: var(--mountain-700);
+  --color-mountain-800: var(--mountain-800);
+  --color-mountain-900: var(--mountain-900);
+  --color-mountain-950: var(--mountain-950);
+
+  /* Decorative background tokens */
+  --color-decorative-background-mountain: var(--decorative-background-mountain);
+  --color-decorative-background-fjord: var(--decorative-background-fjord);
+  --color-decorative-background-nordic: var(--decorative-background-nordic);
+  --color-decorative-background-aurora: var(--decorative-background-aurora);
+  --color-decorative-background-dusk: var(--decorative-background-dusk);
+  --color-decorative-background-orange: var(--decorative-background-orange);
+  --color-decorative-background-sky: var(--decorative-background-sky);
+  --color-decorative-background-gray: var(--decorative-background-gray);
+
+  /* Decorative background hover tokens */
+  --color-decorative-background-hover-mountain: var(
+    --decorative-background-hover-mountain
+  );
+  --color-decorative-background-hover-fjord: var(
+    --decorative-background-hover-fjord
+  );
+  --color-decorative-background-hover-nordic: var(
+    --decorative-background-hover-nordic
+  );
+  --color-decorative-background-hover-aurora: var(
+    --decorative-background-hover-aurora
+  );
+  --color-decorative-background-hover-dusk: var(
+    --decorative-background-hover-dusk
+  );
+  --color-decorative-background-hover-orange: var(
+    --decorative-background-hover-orange
+  );
+  --color-decorative-background-hover-sky: var(
+    --decorative-background-hover-sky
+  );
+  --color-decorative-background-hover-gray: var(
+    --decorative-background-hover-gray
+  );
+
+  /* Decorative foreground tokens */
+  --color-decorative-foreground-mountain: var(--decorative-foreground-mountain);
+  --color-decorative-foreground-fjord: var(--decorative-foreground-fjord);
+  --color-decorative-foreground-nordic: var(--decorative-foreground-nordic);
+  --color-decorative-foreground-aurora: var(--decorative-foreground-aurora);
+  --color-decorative-foreground-dusk: var(--decorative-foreground-dusk);
+  --color-decorative-foreground-orange: var(--decorative-foreground-orange);
+  --color-decorative-foreground-sky: var(--decorative-foreground-sky);
+  --color-decorative-foreground-gray: var(--decorative-foreground-gray);
+
+  /* Gradient tokens */
+  --color-gradient-nordic: var(--gradient-nordic);
+  --color-gradient-aurora: var(--gradient-aurora);
+  --color-gradient-dusk: var(--gradient-dusk);
+  --color-gradient-equinox: var(--gradient-equinox);
+  --color-gradient-summer: var(--gradient-summer);
+  --color-gradient-spring: var(--gradient-spring);
+  --color-gradient-fall: var(--gradient-fall);
+
+  --radius-none: 0px;
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 24px;
+  --radius-4xl: 32px;
+  --radius-full: 9999px;
+  --ring-width-md: 3px;
+  --avatar-icon-default: 1.09375rem;
+  --avatar-icon-xs: 0.875rem;
+  --avatar-icon-xxs: 0.65625rem;
+  --avatar-image-backdrop: rgba(2, 6, 23, 0.2);
+}
+
+:root {
+  --radius: 0.375rem;
+  /* 6px - default radius, maps to radius-md */
+  --font-inter: 'Inter', sans-serif;
+  --font-space-grotesk: 'Space Grotesk', sans-serif;
+  --font-source-code-pro: 'Source Code Pro', monospace;
+  --code-block-collapsed-height: 6.5rem;
+  --code-block-fade-height: 0.9375rem;
+  --message-content-max-width: 80%;
+
+  /* Component-specific sizing */
+  --alert-icon-width: calc(var(--spacing) * 4);
+  /* 16px - width of icon column in alert grid */
+  --drawer-max-height: 80vh;
+  /* Maximum height for top/bottom drawers */
+
+  /* Mountain */
+  --mountain-white: rgb(255, 255, 255);
+  --mountain-black: rgb(0, 0, 0);
+  --mountain-10: rgb(249, 250, 250);
+  --mountain-50: rgb(241, 242, 243);
+  --mountain-100: rgb(228, 230, 232);
+  --mountain-200: rgb(212, 215, 217);
+  --mountain-300: rgb(187, 192, 196);
+  --mountain-400: rgb(165, 171, 177);
+  --mountain-450: rgb(139, 148, 154);
+  --mountain-500: rgb(124, 134, 142);
+  --mountain-550: rgb(109, 118, 126);
+  --mountain-600: rgb(94, 102, 109);
+  --mountain-650: rgb(82, 89, 95);
+  --mountain-700: rgb(64, 70, 74);
+  --mountain-800: rgb(45, 49, 52);
+  --mountain-900: rgb(33, 36, 38);
+  --mountain-950: rgb(17, 18, 19);
+
+  /* Fjord */
+  --fjord-50: rgb(239, 242, 253);
+  --fjord-100: rgb(223, 229, 252);
+  --fjord-200: rgb(204, 213, 250);
+  --fjord-300: rgb(174, 189, 247);
+  --fjord-400: rgb(147, 167, 244);
+  --fjord-450: rgb(114, 141, 241);
+  --fjord-500: rgb(95, 125, 239);
+  --fjord-550: rgb(72, 106, 237);
+  --fjord-600: rgb(47, 85, 234);
+  --fjord-650: rgb(23, 66, 231);
+  --fjord-700: rgb(18, 52, 182);
+  --fjord-800: rgb(13, 37, 130);
+  --fjord-900: rgb(10, 28, 97);
+  --fjord-950: rgb(5, 15, 51);
+
+  /* Nordic */
+  --nordic-50: rgb(218, 249, 242);
+  --nordic-100: rgb(180, 242, 229);
+  --nordic-200: rgb(127, 233, 210);
+  --nordic-300: rgb(37, 215, 176);
+  --nordic-400: rgb(33, 192, 157);
+  --nordic-450: rgb(28, 165, 135);
+  --nordic-500: rgb(26, 150, 122);
+  --nordic-550: rgb(23, 132, 108);
+  --nordic-600: rgb(20, 115, 94);
+  --nordic-650: rgb(17, 100, 82);
+  --nordic-700: rgb(13, 78, 64);
+  --nordic-800: rgb(10, 55, 45);
+  --nordic-900: rgb(7, 41, 34);
+  --nordic-950: rgb(4, 21, 17);
+
+  /* Aurora */
+  --aurora-50: rgb(231, 249, 198);
+  --aurora-100: rgb(207, 243, 141);
+  --aurora-200: rgb(171, 233, 56);
+  --aurora-300: rgb(144, 210, 23);
+  --aurora-400: rgb(129, 188, 20);
+  --aurora-450: rgb(110, 161, 18);
+  --aurora-500: rgb(100, 146, 16);
+  --aurora-550: rgb(88, 129, 14);
+  --aurora-600: rgb(77, 112, 12);
+  --aurora-650: rgb(67, 97, 11);
+  --aurora-700: rgb(52, 76, 8);
+  --aurora-800: rgb(37, 54, 6);
+  --aurora-900: rgb(27, 40, 4);
+  --aurora-950: rgb(14, 20, 2);
+
+  /* Dusk */
+  --dusk-50: rgb(248, 239, 249);
+  --dusk-100: rgb(241, 225, 243);
+  --dusk-200: rgb(232, 206, 236);
+  --dusk-300: rgb(219, 177, 225);
+  --dusk-400: rgb(207, 151, 215);
+  --dusk-450: rgb(192, 120, 203);
+  --dusk-500: rgb(183, 101, 196);
+  --dusk-550: rgb(173, 78, 187);
+  --dusk-600: rgb(153, 64, 166);
+  --dusk-650: rgb(133, 55, 144);
+  --dusk-700: rgb(104, 44, 113);
+  --dusk-800: rgb(74, 31, 80);
+  --dusk-900: rgb(55, 23, 60);
+  --dusk-950: rgb(28, 12, 31);
+
+  /* Red */
+  --red-50: rgb(254, 238, 241);
+  --red-100: rgb(253, 222, 228);
+  --red-200: rgb(252, 202, 210);
+  --red-300: rgb(250, 169, 183);
+  --red-400: rgb(248, 137, 156);
+  --red-450: rgb(246, 94, 120);
+  --red-500: rgb(244, 61, 92);
+  --red-550: rgb(233, 13, 50);
+  --red-600: rgb(203, 11, 44);
+  --red-650: rgb(178, 10, 38);
+  --red-700: rgb(141, 8, 31);
+  --red-800: rgb(102, 6, 22);
+  --red-900: rgb(78, 4, 17);
+  --red-950: rgb(44, 2, 9);
+
+  /* Amber */
+  --amber-50: rgb(255, 241, 208);
+  --amber-100: rgb(255, 227, 162);
+  --amber-200: rgb(255, 208, 98);
+  --amber-300: rgb(252, 177, 0);
+  --amber-400: rgb(225, 158, 0);
+  --amber-450: rgb(193, 136, 0);
+  --amber-500: rgb(175, 123, 0);
+  --amber-550: rgb(155, 109, 0);
+  --amber-600: rgb(134, 94, 0);
+  --amber-650: rgb(117, 82, 0);
+  --amber-700: rgb(91, 64, 0);
+  --amber-800: rgb(65, 45, 0);
+  --amber-900: rgb(48, 34, 0);
+  --amber-950: rgb(24, 17, 0);
+
+  /* Green */
+  --green-50: rgb(221, 249, 231);
+  --green-100: rgb(187, 243, 208);
+  --green-200: rgb(139, 234, 174);
+  --green-300: rgb(52, 218, 113);
+  --green-400: rgb(36, 196, 94);
+  --green-450: rgb(31, 168, 81);
+  --green-500: rgb(28, 152, 74);
+  --green-550: rgb(25, 135, 65);
+  --green-600: rgb(21, 117, 56);
+  --green-650: rgb(19, 102, 49);
+  --green-700: rgb(15, 80, 38);
+  --green-800: rgb(10, 56, 27);
+  --green-900: rgb(8, 42, 20);
+  --green-950: rgb(4, 22, 10);
+
+  /* Blue */
+  --blue-50: rgb(230, 244, 255);
+  --blue-100: rgb(206, 234, 255);
+  --blue-200: rgb(174, 220, 255);
+  --blue-300: rgb(124, 198, 255);
+  --blue-400: rgb(76, 178, 255);
+  --blue-450: rgb(11, 149, 255);
+  --blue-500: rgb(0, 134, 237);
+  --blue-550: rgb(0, 119, 210);
+  --blue-600: rgb(0, 103, 182);
+  --blue-650: rgb(0, 90, 159);
+  --blue-700: rgb(0, 71, 125);
+  --blue-800: rgb(0, 50, 89);
+  --blue-900: rgb(0, 37, 66);
+  --blue-950: rgb(0, 20, 35);
+
+  /* Sky */
+  --sky-50: rgb(219, 247, 255);
+  --sky-100: rgb(183, 239, 254);
+  --sky-200: rgb(132, 228, 254);
+  --sky-300: rgb(37, 207, 253);
+  --sky-400: rgb(2, 185, 234);
+  --sky-450: rgb(2, 159, 201);
+  --sky-500: rgb(2, 144, 182);
+  --sky-550: rgb(1, 127, 161);
+  --sky-600: rgb(1, 110, 140);
+  --sky-650: rgb(1, 96, 122);
+  --sky-700: rgb(1, 75, 96);
+  --sky-800: rgb(1, 54, 68);
+  --sky-900: rgb(0, 40, 50);
+  --sky-950: rgb(0, 21, 26);
+
+  /* Orange */
+  --orange-50: rgb(254, 239, 230);
+  --orange-100: rgb(253, 224, 207);
+  --orange-200: rgb(252, 205, 176);
+  --orange-300: rgb(251, 174, 126);
+  --orange-400: rgb(249, 143, 78);
+  --orange-450: rgb(247, 100, 10);
+  --orange-500: rgb(225, 90, 7);
+  --orange-550: rgb(199, 80, 6);
+  --orange-600: rgb(173, 69, 6);
+  --orange-650: rgb(150, 60, 5);
+  --orange-700: rgb(118, 47, 4);
+  --orange-800: rgb(84, 34, 3);
+  --orange-900: rgb(62, 25, 2);
+  --orange-950: rgb(33, 13, 1);
+
+  /* Yellow */
+  --yellow-50: rgb(255, 244, 162);
+  --yellow-100: rgb(255, 232, 52);
+  --yellow-200: rgb(243, 215, 0);
+  --yellow-300: rgb(216, 191, 0);
+  --yellow-400: rgb(193, 171, 0);
+  --yellow-450: rgb(166, 147, 0);
+  --yellow-500: rgb(150, 133, 0);
+  --yellow-550: rgb(133, 118, 0);
+  --yellow-600: rgb(115, 102, 0);
+  --yellow-650: rgb(100, 89, 0);
+  --yellow-700: rgb(78, 69, 0);
+  --yellow-800: rgb(55, 49, 0);
+  --yellow-900: rgb(41, 36, 0);
+  --yellow-950: rgb(21, 18, 0);
+
+  /* Gray */
+  --gray-50: rgb(240, 242, 249);
+  --gray-100: rgb(226, 229, 244);
+  --gray-200: rgb(208, 214, 237);
+  --gray-300: rgb(181, 190, 226);
+  --gray-400: rgb(157, 169, 217);
+  --gray-450: rgb(129, 143, 206);
+  --gray-500: rgb(112, 129, 199);
+  --gray-550: rgb(93, 112, 192);
+  --gray-600: rgb(74, 95, 184);
+  --gray-650: rgb(63, 82, 163);
+  --gray-700: rgb(50, 65, 127);
+  --gray-800: rgb(35, 46, 90);
+  --gray-900: rgb(26, 34, 66);
+  --gray-950: rgb(13, 17, 34);
+
+  /* Pink */
+  --pink-50: rgb(253, 238, 244);
+  --pink-100: rgb(251, 222, 234);
+  --pink-200: rgb(249, 202, 221);
+  --pink-300: rgb(245, 169, 200);
+  --pink-400: rgb(242, 139, 180);
+  --pink-450: rgb(237, 97, 153);
+  --pink-500: rgb(233, 68, 135);
+  --pink-550: rgb(225, 26, 106);
+  --pink-600: rgb(196, 23, 92);
+  --pink-650: rgb(171, 20, 81);
+  --pink-700: rgb(136, 16, 64);
+  --pink-800: rgb(98, 11, 46);
+  --pink-900: rgb(73, 8, 35);
+  --pink-950: rgb(40, 5, 19);
+
+  /* Theme tokens (Light) mapped to ramp variables */
+  --background: var(--mountain-white);
+  --foreground: var(--mountain-950);
+  --card: var(--mountain-10);
+  --card-foreground: var(--mountain-950);
+  --popover: var(--mountain-white);
+  --popover-foreground: var(--mountain-950);
+  --primary: var(--mountain-900);
+  --primary-hover: var(--mountain-700);
+  --primary-foreground: var(--mountain-50);
+  --secondary: var(--mountain-100);
+  --secondary-hover: var(--mountain-200);
+  --secondary-foreground: var(--mountain-800);
+  --tertiary: var(--gray-550);
+  --tertiary-hover: var(--gray-600);
+  --tertiary-foreground: var(--mountain-white);
+  --muted: var(--mountain-10);
+  --muted-foreground: var(--mountain-600);
+  --accent: var(--mountain-50);
+  --accent-foreground: var(--mountain-950);
+  --mountain: var(--mountain-50);
+  --mountain-foreground: var(--mountain-950);
+  --foreground-link: var(--fjord-550);
+  --border: var(--mountain-100);
+  --input: var(--mountain-100);
+  --ring: var(--gray-500);
+  --ring-shadow: var(--gray-300);
+  --ring-destructive: var(--red-500);
+  --ring-destructive-shadow: var(--red-300);
+  --backdrop: rgba(2, 6, 23, 0.2);
+
+  /* Status tokens */
+  --destructive: var(--red-200);
+  --destructive-hover: var(--red-300);
+  --destructive-foreground: var(--red-550);
+  --warning: var(--amber-100);
+  --warning-hover: var(--amber-200);
+  --warning-foreground: var(--amber-500);
+  --success: var(--green-100);
+  --success-hover: var(--green-200);
+  --success-foreground: var(--green-500);
+  --neutral: var(--gray-100);
+  --neutral-hover: var(--gray-200);
+  --neutral-foreground: var(--gray-650);
+  --undefined: var(--mountain-100);
+  --undefined-hover: var(--mountain-200);
+  --undefined-foreground: var(--mountain-500);
+  --disabled: var(--mountain-50);
+  --disabled-foreground: var(--mountain-450);
+  --hover: var(--mountain-50);
+
+  /* Status color -alternate variants (light mode) */
+  --destructive-foreground-alternate: var(--red-700);
+  --warning-foreground-alternate: var(--amber-700);
+  --success-foreground-alternate: var(--green-700);
+  --neutral-foreground-alternate: var(--gray-700);
+  --undefined-foreground-alternate: var(--mountain-550);
+
+  /* Chart tokens (light mode) */
+  --chart-fjord-solid: var(--fjord-600);
+  --chart-fjord-opacity-1: rgba(47, 85, 234, 0.8);
+  --chart-fjord-opacity-2: rgba(47, 85, 234, 0.65);
+  --chart-fjord-opacity-3: rgba(47, 85, 234, 0.5);
+  --chart-fjord-opacity-4: rgba(47, 85, 234, 0.35);
+  --chart-fjord-opacity-5: rgba(47, 85, 234, 0.2);
+  --chart-aurora-solid: var(--aurora-600);
+  --chart-aurora-opacity-1: rgba(77, 112, 12, 0.8);
+  --chart-aurora-opacity-2: rgba(77, 112, 12, 0.65);
+  --chart-aurora-opacity-3: rgba(77, 112, 12, 0.5);
+  --chart-aurora-opacity-4: rgba(77, 112, 12, 0.35);
+  --chart-aurora-opacity-5: rgba(77, 112, 12, 0.2);
+  --chart-nordic-solid: var(--nordic-600);
+  --chart-nordic-opacity-1: rgba(20, 115, 94, 0.8);
+  --chart-nordic-opacity-2: rgba(20, 115, 94, 0.65);
+  --chart-nordic-opacity-3: rgba(20, 115, 94, 0.5);
+  --chart-nordic-opacity-4: rgba(20, 115, 94, 0.35);
+  --chart-nordic-opacity-5: rgba(20, 115, 94, 0.2);
+  --chart-dusk-solid: var(--dusk-600);
+  --chart-dusk-opacity-1: rgba(153, 64, 166, 0.8);
+  --chart-dusk-opacity-2: rgba(153, 64, 166, 0.65);
+  --chart-dusk-opacity-3: rgba(153, 64, 166, 0.5);
+  --chart-dusk-opacity-4: rgba(153, 64, 166, 0.35);
+  --chart-dusk-opacity-5: rgba(153, 64, 166, 0.2);
+  --chart-orange-solid: var(--orange-600);
+  --chart-orange-opacity-1: rgba(173, 69, 6, 0.8);
+  --chart-orange-opacity-2: rgba(173, 69, 6, 0.65);
+  --chart-orange-opacity-3: rgba(173, 69, 6, 0.5);
+  --chart-orange-opacity-4: rgba(173, 69, 6, 0.35);
+  --chart-orange-opacity-5: rgba(173, 69, 6, 0.2);
+  --chart-gridlines: var(--mountain-50);
+
+  /* Opacity overlays (light mode - white backgrounds) */
+  --opacity-10: rgba(255, 255, 255, 0.1);
+  --opacity-20: rgba(255, 255, 255, 0.2);
+  --opacity-40: rgba(255, 255, 255, 0.4);
+  --opacity-60: rgba(255, 255, 255, 0.6);
+  --opacity-80: rgba(255, 255, 255, 0.8);
+
+  /* Effect tokens for shadow colors (light mode) */
+  --effect-shadow-sm: rgba(0, 0, 0, 0.04);
+  --effect-shadow-md: rgba(0, 0, 0, 0.05);
+  --effect-shadow-lg: rgba(0, 0, 0, 0.06);
+  --effect-shadow-xl: rgba(0, 0, 0, 0.1);
+
+  /* Toggled tokens (light mode) */
+  --toggled: var(--gray-100);
+  --toggled-foreground: var(--gray-700);
+  --toggled-hover: var(--gray-200);
+
+  /* Inverted tokens */
+  --inverted: var(--mountain-900);
+  --inverted-foreground: var(--mountain-50);
+  --inverted-foreground-muted: var(--mountain-300);
+  --inverted-destructive-foreground: var(--red-300);
+  --inverted-success-foreground: var(--green-300);
+
+  /* Decorative tokens */
+  --decorative-background-mountain: var(--mountain-100);
+  --decorative-background-fjord: var(--fjord-200);
+  --decorative-background-nordic: var(--nordic-100);
+  --decorative-background-aurora: var(--aurora-100);
+  --decorative-background-dusk: var(--dusk-200);
+  --decorative-background-orange: var(--orange-200);
+  --decorative-background-sky: var(--sky-200);
+  --decorative-background-gray: var(--gray-100);
+
+  /* Decorative background hover tokens */
+  --decorative-background-hover-mountain: var(--mountain-300);
+  --decorative-background-hover-fjord: var(--fjord-300);
+  --decorative-background-hover-nordic: var(--nordic-200);
+  --decorative-background-hover-aurora: var(--aurora-200);
+  --decorative-background-hover-dusk: var(--dusk-300);
+  --decorative-background-hover-orange: var(--orange-300);
+  --decorative-background-hover-sky: var(--sky-200);
+  --decorative-background-hover-gray: var(--gray-300);
+
+  /* Decorative foreground tokens */
+  --decorative-foreground-mountain: var(--mountain-700);
+  --decorative-foreground-fjord: var(--fjord-700);
+  --decorative-foreground-nordic: var(--nordic-700);
+  --decorative-foreground-aurora: var(--aurora-700);
+  --decorative-foreground-dusk: var(--dusk-700);
+  --decorative-foreground-orange: var(--orange-700);
+  --decorative-foreground-sky: var(--sky-600);
+  --decorative-foreground-gray: var(--gray-650);
+
+  /* Gradient tokens */
+  --gradient-nordic: linear-gradient(
+    -100deg,
+    var(--nordic-50) 0%,
+    var(--nordic-400) 44%,
+    var(--nordic-200) 100%
+  );
+  --gradient-aurora: linear-gradient(
+    -100deg,
+    var(--aurora-50) 0%,
+    var(--aurora-400) 50%,
+    var(--aurora-200) 100%
+  );
+  --gradient-dusk: linear-gradient(
+    -100deg,
+    var(--dusk-50) 0%,
+    var(--dusk-400) 48%,
+    var(--dusk-200) 100%
+  );
+  --gradient-equinox: linear-gradient(
+    -100deg,
+    var(--dusk-600) 0%,
+    var(--dusk-300) 40%,
+    var(--aurora-50) 60%,
+    var(--aurora-100) 100%
+  );
+  --gradient-summer: linear-gradient(
+    -100deg,
+    var(--nordic-100) 0%,
+    var(--dusk-50) 50%,
+    var(--aurora-100) 100%
+  );
+  --gradient-spring: linear-gradient(
+    -100deg,
+    var(--aurora-50) 0%,
+    var(--nordic-100) 50%,
+    var(--aurora-100) 100%
+  );
+  --gradient-fall: linear-gradient(
+    -100deg,
+    var(--fjord-550) 0%,
+    var(--dusk-550) 50%,
+    var(--dusk-300) 100%
+  );
+
+  /* Sidebar */
+  --sidebar: var(--mountain-900);
+  --sidebar-foreground: var(--mountain-100);
+  --sidebar-primary: var(--mountain-600);
+  --sidebar-primary-foreground: var(--mountain-white);
+  --sidebar-accent: var(--mountain-700);
+  --sidebar-accent-foreground: var(--mountain-white);
+  --sidebar-border: var(--mountain-800);
+  --sidebar-ring: var(--gray-300);
+}
+
+.dark {
+  --background: var(--mountain-950);
+  --foreground: var(--mountain-50);
+  --card: var(--mountain-900);
+  --card-foreground: var(--mountain-50);
+  --popover: var(--mountain-900);
+  --popover-foreground: var(--mountain-200);
+  --primary: var(--mountain-50);
+  --primary-hover: var(--mountain-200);
+  --primary-foreground: var(--mountain-950);
+  --secondary: var(--mountain-700);
+  --secondary-hover: var(--mountain-600);
+  --secondary-foreground: var(--mountain-50);
+  --tertiary: var(--gray-550);
+  --tertiary-hover: var(--gray-600);
+  --tertiary-foreground: var(--mountain-white);
+  --muted: var(--mountain-900);
+  --muted-foreground: var(--mountain-300);
+  --accent: var(--mountain-800);
+  --accent-foreground: var(--mountain-50);
+  --mountain: var(--mountain-800);
+  --mountain-foreground: var(--mountain-50);
+  --foreground-link: var(--fjord-550);
+  --border: var(--mountain-700);
+  --input: var(--mountain-900);
+  --ring: var(--gray-500);
+  --ring-shadow: var(--gray-300);
+  --ring-destructive: var(--red-500);
+  --ring-destructive-shadow: var(--red-300);
+  --backdrop: rgba(226, 232, 240, 0.2);
+
+  /* Status tokens */
+  --destructive: var(--red-400);
+  --destructive-hover: var(--red-500);
+  --destructive-foreground: var(--red-450);
+  --warning: var(--amber-100);
+  --warning-hover: var(--amber-200);
+  --warning-foreground: var(--amber-300);
+  --success: var(--green-200);
+  --success-hover: var(--green-300);
+  --success-foreground: var(--green-400);
+  --neutral: var(--gray-200);
+  --neutral-hover: var(--gray-300);
+  --neutral-foreground: var(--gray-400);
+  --undefined: var(--mountain-700);
+  --undefined-hover: var(--mountain-800);
+  --undefined-foreground: var(--mountain-400);
+  --disabled: var(--mountain-800);
+  --disabled-foreground: var(--mountain-450);
+  --hover: var(--mountain-800);
+
+  /* Status color -alternate variants (dark mode) */
+  --destructive-foreground-alternate: var(--red-900);
+  --warning-foreground-alternate: var(--amber-800);
+  --success-foreground-alternate: var(--green-800);
+  --neutral-foreground-alternate: var(--gray-900);
+  --undefined-foreground-alternate: var(--mountain-400);
+
+  /* Chart tokens (dark mode) */
+  --chart-fjord-solid: var(--fjord-300);
+  --chart-fjord-opacity-1: rgba(174, 189, 247, 0.8);
+  --chart-fjord-opacity-2: rgba(174, 189, 247, 0.65);
+  --chart-fjord-opacity-3: rgba(174, 189, 247, 0.5);
+  --chart-fjord-opacity-4: rgba(174, 189, 247, 0.35);
+  --chart-fjord-opacity-5: rgba(174, 189, 247, 0.2);
+  --chart-aurora-solid: var(--aurora-200);
+  --chart-aurora-opacity-1: rgba(171, 233, 56, 0.8);
+  --chart-aurora-opacity-2: rgba(171, 233, 56, 0.65);
+  --chart-aurora-opacity-3: rgba(171, 233, 56, 0.5);
+  --chart-aurora-opacity-4: rgba(171, 233, 56, 0.35);
+  --chart-aurora-opacity-5: rgba(171, 233, 56, 0.2);
+  --chart-nordic-solid: var(--nordic-200);
+  --chart-nordic-opacity-1: rgba(127, 233, 210, 0.8);
+  --chart-nordic-opacity-2: rgba(127, 233, 210, 0.65);
+  --chart-nordic-opacity-3: rgba(127, 233, 210, 0.5);
+  --chart-nordic-opacity-4: rgba(127, 233, 210, 0.35);
+  --chart-nordic-opacity-5: rgba(127, 233, 210, 0.2);
+  --chart-dusk-solid: var(--dusk-200);
+  --chart-dusk-opacity-1: rgba(232, 206, 236, 0.8);
+  --chart-dusk-opacity-2: rgba(232, 206, 236, 0.65);
+  --chart-dusk-opacity-3: rgba(232, 206, 236, 0.5);
+  --chart-dusk-opacity-4: rgba(232, 206, 236, 0.35);
+  --chart-dusk-opacity-5: rgba(232, 206, 236, 0.2);
+  --chart-orange-solid: var(--orange-200);
+  --chart-orange-opacity-1: rgba(252, 205, 176, 0.8);
+  --chart-orange-opacity-2: rgba(252, 205, 176, 0.65);
+  --chart-orange-opacity-3: rgba(252, 205, 176, 0.5);
+  --chart-orange-opacity-4: rgba(252, 205, 176, 0.35);
+  --chart-orange-opacity-5: rgba(252, 205, 176, 0.2);
+  --chart-gridlines: var(--mountain-800);
+
+  /* Opacity overlays (dark mode - dark backgrounds) */
+  --opacity-10: rgba(17, 18, 19, 0.1);
+  --opacity-20: rgba(17, 18, 19, 0.2);
+  --opacity-40: rgba(17, 18, 19, 0.4);
+  --opacity-60: rgba(17, 18, 19, 0.6);
+  --opacity-80: rgba(17, 18, 19, 0.8);
+
+  /* Effect tokens for shadow colors (dark mode) */
+  --effect-shadow-sm: rgba(0, 0, 0, 0.2);
+  --effect-shadow-md: rgba(0, 0, 0, 0.3);
+  --effect-shadow-lg: rgba(0, 0, 0, 0.4);
+  --effect-shadow-xl: rgba(0, 0, 0, 0.6);
+
+  /* Toggled tokens (dark mode) */
+  --toggled: var(--gray-650);
+  --toggled-foreground: var(--gray-50);
+  --toggled-hover: var(--gray-500);
+
+  /* Inverted tokens */
+  --inverted: var(--mountain-900);
+  --inverted-foreground: var(--mountain-50);
+  --inverted-foreground-muted: var(--mountain-300);
+  --inverted-destructive-foreground: var(--red-300);
+  --inverted-success-foreground: var(--green-300);
+
+  /* Decorative tokens */
+  --decorative-background-mountain: var(--mountain-700);
+  --decorative-background-fjord: var(--fjord-300);
+  --decorative-background-nordic: var(--nordic-200);
+  --decorative-background-aurora: var(--aurora-100);
+  --decorative-background-dusk: var(--dusk-300);
+  --decorative-background-orange: var(--orange-300);
+  --decorative-background-sky: var(--sky-200);
+  --decorative-background-gray: var(--gray-200);
+
+  /* Decorative background hover tokens */
+  --decorative-background-hover-mountain: var(--mountain-650);
+  --decorative-background-hover-fjord: var(--fjord-650);
+  --decorative-background-hover-nordic: var(--nordic-600);
+  --decorative-background-hover-aurora: var(--aurora-600);
+  --decorative-background-hover-dusk: var(--dusk-650);
+  --decorative-background-hover-orange: var(--orange-650);
+  --decorative-background-hover-sky: var(--sky-600);
+  --decorative-background-hover-gray: var(--gray-600);
+
+  /* Decorative foreground tokens */
+  --decorative-foreground-mountain: var(--mountain-200);
+  --decorative-foreground-fjord: var(--fjord-800);
+  --decorative-foreground-nordic: var(--nordic-800);
+  --decorative-foreground-aurora: var(--aurora-800);
+  --decorative-foreground-dusk: var(--dusk-800);
+  --decorative-foreground-orange: var(--orange-800);
+  --decorative-foreground-sky: var(--sky-300);
+  --decorative-foreground-gray: var(--gray-400);
+
+  /* Gradient tokens */
+  --gradient-nordic: linear-gradient(
+    -100deg,
+    var(--nordic-900) 0%,
+    var(--nordic-600) 44%,
+    var(--nordic-800) 100%
+  );
+  --gradient-aurora: linear-gradient(
+    -100deg,
+    var(--aurora-900) 0%,
+    var(--aurora-600) 50%,
+    var(--aurora-800) 100%
+  );
+  --gradient-dusk: linear-gradient(
+    -100deg,
+    var(--dusk-900) 0%,
+    var(--dusk-600) 48%,
+    var(--dusk-800) 100%
+  );
+  --gradient-equinox: linear-gradient(
+    -100deg,
+    var(--dusk-400) 0%,
+    var(--dusk-700) 40%,
+    var(--aurora-950) 60%,
+    var(--aurora-900) 100%
+  );
+  --gradient-summer: linear-gradient(
+    -100deg,
+    var(--nordic-900) 0%,
+    var(--dusk-950) 50%,
+    var(--aurora-900) 100%
+  );
+  --gradient-spring: linear-gradient(
+    -100deg,
+    var(--aurora-950) 0%,
+    var(--nordic-900) 50%,
+    var(--aurora-900) 100%
+  );
+  --gradient-fall: linear-gradient(
+    -100deg,
+    var(--fjord-450) 0%,
+    var(--dusk-450) 50%,
+    var(--dusk-700) 100%
+  );
+
+  /* Sidebar */
+  --sidebar: var(--mountain-900);
+  --sidebar-foreground: var(--mountain-100);
+  --sidebar-primary: var(--mountain-600);
+  --sidebar-primary-foreground: var(--mountain-white);
+  --sidebar-accent: var(--mountain-700);
+  --sidebar-accent-foreground: var(--mountain-white);
+  --sidebar-border: var(--mountain-800);
+  --sidebar-ring: var(--gray-300);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@layer utilities {
+  [data-state='closed'] {
+    --tw-animation-fill-mode: forwards;
+  }
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+
+    to {
+      height: 0;
+    }
+  }
+
+  .animate-accordion-down {
+    animation: accordion-down 0.2s ease-out;
+  }
+
+  .animate-accordion-up {
+    animation: accordion-up 0.2s ease-out;
+  }
+}