@calliopelabs/ui 0.13.0 → 0.14.0

package/dist/tokens/plain.css

@@ -0,0 +1,930 @@
+/*
+ * @calliopelabs/ui tokens as plain CSS variables.
+ * Generated by `npm run theme` from the design tokens (tokens/*.json). Do not edit by hand.
+ *
+ * Every colour token under its own name as a concrete value (no var()
+ * chains, no color-mix, no product machinery), plus corners, motion and type.
+ * For static sites and apps that only read variables. data-ground and
+ * data-accent on <html> (or any element) choose the ground and accent.
+ * See README.plain.md.
+ */
+
+/* Default: Black ground, Green accent */
+:root {
+  --radius: 2px;
+  --motion-fast: 120ms;
+  --motion-base: 200ms;
+  --motion-slow: 320ms;
+  --font-sans: var(--font-plex-sans, "IBM Plex Sans"), system-ui, sans-serif;
+  --font-mono: var(--font-plex-mono, "IBM Plex Mono"), ui-monospace, SFMono-Regular, Menlo, monospace;
+  --font-head: var(--font-dm-sans, "DM Sans"), system-ui, sans-serif;
+  color-scheme: dark;
+  --background: #000000;
+  --foreground: #f0f2f1;
+  --card: #0a0a0a;
+  --card-foreground: #f0f2f1;
+  --popover: #141414;
+  --popover-foreground: #f0f2f1;
+  --primary: #2f9e52;
+  --primary-foreground: #04241b;
+  --secondary: #161616;
+  --secondary-foreground: #f0f2f1;
+  --muted: #111111;
+  --muted-foreground: #848b88;
+  --accent: #1b1b1b;
+  --accent-foreground: #f0f2f1;
+  --destructive: #ff6b6b;
+  --border: rgba(255, 255, 255, 0.1);
+  --input: rgba(255, 255, 255, 0.1);
+  --ring: #2f9e52;
+  --chart-1: #2f9e52;
+  --chart-2: #8fd82a;
+  --chart-3: #cbf39d;
+  --chart-4: #e0b34a;
+  --chart-5: #0b6644;
+  --sidebar: #0a0a0a;
+  --sidebar-foreground: #f0f2f1;
+  --sidebar-primary: #2f9e52;
+  --sidebar-primary-foreground: #04241b;
+  --sidebar-accent: rgba(47, 158, 82, 0.16);
+  --sidebar-accent-foreground: #f0f2f1;
+  --sidebar-border: rgba(255, 255, 255, 0.08);
+  --sidebar-ring: #2f9e52;
+  --sidebar-muted-foreground: #848b88;
+  --surface-0: #000000;
+  --surface-1: #0a0a0a;
+  --surface-2: #141414;
+  --success: #8fd82a;
+  --success-fg: #a6e34d;
+  --success-bg: rgba(143, 216, 42, 0.1);
+  --success-border: rgba(143, 216, 42, 0.35);
+  --warning: #f0c34e;
+  --warning-fg: #f0c34e;
+  --warning-bg: rgba(240, 195, 78, 0.1);
+  --warning-border: rgba(240, 195, 78, 0.35);
+  --info: #2f9e52;
+  --info-fg: #5cbb79;
+  --info-bg: rgba(47, 158, 82, 0.14);
+  --info-border: rgba(47, 158, 82, 0.4);
+  --danger: #ff6b6b;
+  --danger-fg: #ff8a8a;
+  --danger-bg: rgba(255, 107, 107, 0.1);
+  --danger-border: rgba(255, 107, 107, 0.35);
+}
+
+/* Ground: Black (dark) */
+[data-ground="black"] {
+  color-scheme: dark;
+  --background: #000000;
+  --foreground: #f0f2f1;
+  --card: #0a0a0a;
+  --card-foreground: #f0f2f1;
+  --popover: #141414;
+  --popover-foreground: #f0f2f1;
+  --primary: #2f9e52;
+  --primary-foreground: #04241b;
+  --secondary: #161616;
+  --secondary-foreground: #f0f2f1;
+  --muted: #111111;
+  --muted-foreground: #848b88;
+  --accent: #1b1b1b;
+  --accent-foreground: #f0f2f1;
+  --destructive: #ff6b6b;
+  --border: rgba(255, 255, 255, 0.1);
+  --input: rgba(255, 255, 255, 0.1);
+  --ring: #2f9e52;
+  --chart-1: #2f9e52;
+  --chart-2: #8fd82a;
+  --chart-3: #cbf39d;
+  --chart-4: #e0b34a;
+  --chart-5: #0b6644;
+  --sidebar: #0a0a0a;
+  --sidebar-foreground: #f0f2f1;
+  --sidebar-primary: #2f9e52;
+  --sidebar-primary-foreground: #04241b;
+  --sidebar-accent: rgba(47, 158, 82, 0.16);
+  --sidebar-accent-foreground: #f0f2f1;
+  --sidebar-border: rgba(255, 255, 255, 0.08);
+  --sidebar-ring: #2f9e52;
+  --sidebar-muted-foreground: #848b88;
+  --surface-0: #000000;
+  --surface-1: #0a0a0a;
+  --surface-2: #141414;
+  --success: #8fd82a;
+  --success-fg: #a6e34d;
+  --success-bg: rgba(143, 216, 42, 0.1);
+  --success-border: rgba(143, 216, 42, 0.35);
+  --warning: #f0c34e;
+  --warning-fg: #f0c34e;
+  --warning-bg: rgba(240, 195, 78, 0.1);
+  --warning-border: rgba(240, 195, 78, 0.35);
+  --info: #2f9e52;
+  --info-fg: #5cbb79;
+  --info-bg: rgba(47, 158, 82, 0.14);
+  --info-border: rgba(47, 158, 82, 0.4);
+  --danger: #ff6b6b;
+  --danger-fg: #ff8a8a;
+  --danger-bg: rgba(255, 107, 107, 0.1);
+  --danger-border: rgba(255, 107, 107, 0.35);
+}
+
+/* Accent: Green on Black */
+[data-ground="black"][data-accent="green"] {
+  --primary: #2f9e52;
+  --primary-foreground: #04241b;
+  --ring: #2f9e52;
+  --chart-1: #2f9e52;
+  --chart-3: #cbf39d;
+  --chart-4: #e0b34a;
+  --chart-5: #0b6644;
+  --sidebar-primary: #2f9e52;
+  --sidebar-primary-foreground: #04241b;
+  --sidebar-accent: rgba(47, 158, 82, 0.16);
+  --sidebar-ring: #2f9e52;
+}
+
+/* Accent: Copper on Black */
+[data-ground="black"][data-accent="copper"] {
+  --primary: #c97b4a;
+  --primary-foreground: #140a04;
+  --ring: #c97b4a;
+  --chart-1: #c97b4a;
+  --chart-3: #d9c7a3;
+  --chart-4: #e0b34a;
+  --chart-5: #2f9e52;
+  --sidebar-primary: #c97b4a;
+  --sidebar-primary-foreground: #140a04;
+  --sidebar-accent: rgba(201, 123, 74, 0.16);
+  --sidebar-ring: #c97b4a;
+}
+
+/* Accent: Ice on Black */
+[data-ground="black"][data-accent="ice"] {
+  --primary: #6e9fc4;
+  --primary-foreground: #06131c;
+  --ring: #6e9fc4;
+  --chart-1: #6e9fc4;
+  --chart-3: #b9d4e4;
+  --chart-4: #e0b34a;
+  --chart-5: #2f9e52;
+  --sidebar-primary: #6e9fc4;
+  --sidebar-primary-foreground: #06131c;
+  --sidebar-accent: rgba(110, 159, 196, 0.16);
+  --sidebar-ring: #6e9fc4;
+}
+
+/* Accent: Periwinkle on Black */
+[data-ground="black"][data-accent="periwinkle"] {
+  --primary: #8b8fd9;
+  --primary-foreground: #0b0c1a;
+  --ring: #8b8fd9;
+  --chart-1: #8b8fd9;
+  --chart-3: #c3c5ec;
+  --chart-4: #e0b34a;
+  --chart-5: #2f9e52;
+  --sidebar-primary: #8b8fd9;
+  --sidebar-primary-foreground: #0b0c1a;
+  --sidebar-accent: rgba(139, 143, 217, 0.16);
+  --sidebar-ring: #8b8fd9;
+}
+
+/* Accent: Amber on Black */
+[data-ground="black"][data-accent="amber"] {
+  --primary: #e0b34a;
+  --primary-foreground: #1a1204;
+  --ring: #e0b34a;
+  --chart-1: #e0b34a;
+  --chart-3: #cbf39d;
+  --chart-4: #c97b4a;
+  --chart-5: #0b6644;
+  --sidebar-primary: #e0b34a;
+  --sidebar-primary-foreground: #1a1204;
+  --sidebar-accent: rgba(224, 179, 74, 0.16);
+  --sidebar-ring: #e0b34a;
+}
+
+/* Ground: Charcoal (dark) */
+[data-ground="charcoal"] {
+  color-scheme: dark;
+  --background: #0e0f10;
+  --foreground: #f0f2f1;
+  --card: #161819;
+  --card-foreground: #f0f2f1;
+  --popover: #1e2022;
+  --popover-foreground: #f0f2f1;
+  --primary: #2f9e52;
+  --primary-foreground: #04241b;
+  --secondary: #202325;
+  --secondary-foreground: #f0f2f1;
+  --muted: #191b1c;
+  --muted-foreground: #8b9194;
+  --accent: #232628;
+  --accent-foreground: #f0f2f1;
+  --destructive: #ff6b6b;
+  --border: rgba(255, 255, 255, 0.1);
+  --input: rgba(255, 255, 255, 0.1);
+  --ring: #2f9e52;
+  --chart-1: #2f9e52;
+  --chart-2: #8fd82a;
+  --chart-3: #cbf39d;
+  --chart-4: #e0b34a;
+  --chart-5: #0b6644;
+  --sidebar: #161819;
+  --sidebar-foreground: #f0f2f1;
+  --sidebar-primary: #2f9e52;
+  --sidebar-primary-foreground: #04241b;
+  --sidebar-accent: rgba(47, 158, 82, 0.16);
+  --sidebar-accent-foreground: #f0f2f1;
+  --sidebar-border: rgba(255, 255, 255, 0.08);
+  --sidebar-ring: #2f9e52;
+  --sidebar-muted-foreground: #8b9194;
+  --surface-0: #0e0f10;
+  --surface-1: #161819;
+  --surface-2: #1e2022;
+  --success: #8fd82a;
+  --success-fg: #a6e34d;
+  --success-bg: rgba(143, 216, 42, 0.1);
+  --success-border: rgba(143, 216, 42, 0.35);
+  --warning: #f0c34e;
+  --warning-fg: #f0c34e;
+  --warning-bg: rgba(240, 195, 78, 0.1);
+  --warning-border: rgba(240, 195, 78, 0.35);
+  --info: #2f9e52;
+  --info-fg: #5cbb79;
+  --info-bg: rgba(47, 158, 82, 0.14);
+  --info-border: rgba(47, 158, 82, 0.4);
+  --danger: #ff6b6b;
+  --danger-fg: #ff8a8a;
+  --danger-bg: rgba(255, 107, 107, 0.1);
+  --danger-border: rgba(255, 107, 107, 0.35);
+}
+
+/* Accent: Green on Charcoal */
+[data-ground="charcoal"][data-accent="green"] {
+  --primary: #2f9e52;
+  --primary-foreground: #04241b;
+  --ring: #2f9e52;
+  --chart-1: #2f9e52;
+  --chart-3: #cbf39d;
+  --chart-4: #e0b34a;
+  --chart-5: #0b6644;
+  --sidebar-primary: #2f9e52;
+  --sidebar-primary-foreground: #04241b;
+  --sidebar-accent: rgba(47, 158, 82, 0.16);
+  --sidebar-ring: #2f9e52;
+}
+
+/* Accent: Copper on Charcoal */
+[data-ground="charcoal"][data-accent="copper"] {
+  --primary: #c97b4a;
+  --primary-foreground: #140a04;
+  --ring: #c97b4a;
+  --chart-1: #c97b4a;
+  --chart-3: #d9c7a3;
+  --chart-4: #e0b34a;
+  --chart-5: #2f9e52;
+  --sidebar-primary: #c97b4a;
+  --sidebar-primary-foreground: #140a04;
+  --sidebar-accent: rgba(201, 123, 74, 0.16);
+  --sidebar-ring: #c97b4a;
+}
+
+/* Accent: Ice on Charcoal */
+[data-ground="charcoal"][data-accent="ice"] {
+  --primary: #6e9fc4;
+  --primary-foreground: #06131c;
+  --ring: #6e9fc4;
+  --chart-1: #6e9fc4;
+  --chart-3: #b9d4e4;
+  --chart-4: #e0b34a;
+  --chart-5: #2f9e52;
+  --sidebar-primary: #6e9fc4;
+  --sidebar-primary-foreground: #06131c;
+  --sidebar-accent: rgba(110, 159, 196, 0.16);
+  --sidebar-ring: #6e9fc4;
+}
+
+/* Accent: Periwinkle on Charcoal */
+[data-ground="charcoal"][data-accent="periwinkle"] {
+  --primary: #8b8fd9;
+  --primary-foreground: #0b0c1a;
+  --ring: #8b8fd9;
+  --chart-1: #8b8fd9;
+  --chart-3: #c3c5ec;
+  --chart-4: #e0b34a;
+  --chart-5: #2f9e52;
+  --sidebar-primary: #8b8fd9;
+  --sidebar-primary-foreground: #0b0c1a;
+  --sidebar-accent: rgba(139, 143, 217, 0.16);
+  --sidebar-ring: #8b8fd9;
+}
+
+/* Accent: Amber on Charcoal */
+[data-ground="charcoal"][data-accent="amber"] {
+  --primary: #e0b34a;
+  --primary-foreground: #1a1204;
+  --ring: #e0b34a;
+  --chart-1: #e0b34a;
+  --chart-3: #cbf39d;
+  --chart-4: #c97b4a;
+  --chart-5: #0b6644;
+  --sidebar-primary: #e0b34a;
+  --sidebar-primary-foreground: #1a1204;
+  --sidebar-accent: rgba(224, 179, 74, 0.16);
+  --sidebar-ring: #e0b34a;
+}
+
+/* Ground: Graphite (dark) */
+[data-ground="graphite"] {
+  color-scheme: dark;
+  --background: #111214;
+  --foreground: #f0f2f1;
+  --card: #18191b;
+  --card-foreground: #f0f2f1;
+  --popover: #202124;
+  --popover-foreground: #f0f2f1;
+  --primary: #2f9e52;
+  --primary-foreground: #04241b;
+  --secondary: #222326;
+  --secondary-foreground: #f0f2f1;
+  --muted: #1b1c1e;
+  --muted-foreground: #8e9296;
+  --accent: #26272a;
+  --accent-foreground: #f0f2f1;
+  --destructive: #ff6b6b;
+  --border: rgba(255, 255, 255, 0.09);
+  --input: rgba(255, 255, 255, 0.1);
+  --ring: #2f9e52;
+  --chart-1: #2f9e52;
+  --chart-2: #8fd82a;
+  --chart-3: #cbf39d;
+  --chart-4: #e0b34a;
+  --chart-5: #0b6644;
+  --sidebar: #161719;
+  --sidebar-foreground: #f0f2f1;
+  --sidebar-primary: #2f9e52;
+  --sidebar-primary-foreground: #04241b;
+  --sidebar-accent: rgba(47, 158, 82, 0.14);
+  --sidebar-accent-foreground: #f0f2f1;
+  --sidebar-border: rgba(255, 255, 255, 0.07);
+  --sidebar-ring: #2f9e52;
+  --sidebar-muted-foreground: #8e9296;
+  --surface-0: #111214;
+  --surface-1: #18191b;
+  --surface-2: #202124;
+  --success: #8fd82a;
+  --success-fg: #a6e34d;
+  --success-bg: rgba(143, 216, 42, 0.1);
+  --success-border: rgba(143, 216, 42, 0.35);
+  --warning: #f0c34e;
+  --warning-fg: #f0c34e;
+  --warning-bg: rgba(240, 195, 78, 0.1);
+  --warning-border: rgba(240, 195, 78, 0.35);
+  --info: #2f9e52;
+  --info-fg: #5cbb79;
+  --info-bg: rgba(47, 158, 82, 0.14);
+  --info-border: rgba(47, 158, 82, 0.4);
+  --danger: #ff6b6b;
+  --danger-fg: #ff8a8a;
+  --danger-bg: rgba(255, 107, 107, 0.1);
+  --danger-border: rgba(255, 107, 107, 0.35);
+}
+
+/* Accent: Green on Graphite */
+[data-ground="graphite"][data-accent="green"] {
+  --primary: #2f9e52;
+  --primary-foreground: #04241b;
+  --ring: #2f9e52;
+  --chart-1: #2f9e52;
+  --chart-3: #cbf39d;
+  --chart-4: #e0b34a;
+  --chart-5: #0b6644;
+  --sidebar-primary: #2f9e52;
+  --sidebar-primary-foreground: #04241b;
+  --sidebar-accent: rgba(47, 158, 82, 0.14);
+  --sidebar-ring: #2f9e52;
+}
+
+/* Accent: Copper on Graphite */
+[data-ground="graphite"][data-accent="copper"] {
+  --primary: #c97b4a;
+  --primary-foreground: #140a04;
+  --ring: #c97b4a;
+  --chart-1: #c97b4a;
+  --chart-3: #d9c7a3;
+  --chart-4: #e0b34a;
+  --chart-5: #2f9e52;
+  --sidebar-primary: #c97b4a;
+  --sidebar-primary-foreground: #140a04;
+  --sidebar-accent: rgba(201, 123, 74, 0.14);
+  --sidebar-ring: #c97b4a;
+}
+
+/* Accent: Ice on Graphite */
+[data-ground="graphite"][data-accent="ice"] {
+  --primary: #6e9fc4;
+  --primary-foreground: #06131c;
+  --ring: #6e9fc4;
+  --chart-1: #6e9fc4;
+  --chart-3: #b9d4e4;
+  --chart-4: #e0b34a;
+  --chart-5: #2f9e52;
+  --sidebar-primary: #6e9fc4;
+  --sidebar-primary-foreground: #06131c;
+  --sidebar-accent: rgba(110, 159, 196, 0.14);
+  --sidebar-ring: #6e9fc4;
+}
+
+/* Accent: Periwinkle on Graphite */
+[data-ground="graphite"][data-accent="periwinkle"] {
+  --primary: #8b8fd9;
+  --primary-foreground: #0b0c1a;
+  --ring: #8b8fd9;
+  --chart-1: #8b8fd9;
+  --chart-3: #c3c5ec;
+  --chart-4: #e0b34a;
+  --chart-5: #2f9e52;
+  --sidebar-primary: #8b8fd9;
+  --sidebar-primary-foreground: #0b0c1a;
+  --sidebar-accent: rgba(139, 143, 217, 0.14);
+  --sidebar-ring: #8b8fd9;
+}
+
+/* Accent: Amber on Graphite */
+[data-ground="graphite"][data-accent="amber"] {
+  --primary: #e0b34a;
+  --primary-foreground: #1a1204;
+  --ring: #e0b34a;
+  --chart-1: #e0b34a;
+  --chart-3: #cbf39d;
+  --chart-4: #c97b4a;
+  --chart-5: #0b6644;
+  --sidebar-primary: #e0b34a;
+  --sidebar-primary-foreground: #1a1204;
+  --sidebar-accent: rgba(224, 179, 74, 0.14);
+  --sidebar-ring: #e0b34a;
+}
+
+/* Ground: Emerald (dark) */
+[data-ground="emerald"] {
+  color-scheme: dark;
+  --background: #050b08;
+  --foreground: #f0f2f1;
+  --card: #0a1310;
+  --card-foreground: #f0f2f1;
+  --popover: #0d1814;
+  --popover-foreground: #f0f2f1;
+  --primary: #2f9e52;
+  --primary-foreground: #04241b;
+  --secondary: #121d18;
+  --secondary-foreground: #f0f2f1;
+  --muted: #101a15;
+  --muted-foreground: #8ba199;
+  --accent: #16261f;
+  --accent-foreground: #f0f2f1;
+  --destructive: #ff6b6b;
+  --border: rgba(255, 255, 255, 0.1);
+  --input: rgba(255, 255, 255, 0.1);
+  --ring: #2f9e52;
+  --chart-1: #2f9e52;
+  --chart-2: #8fd82a;
+  --chart-3: #cbf39d;
+  --chart-4: #e0b34a;
+  --chart-5: #0b6644;
+  --sidebar: #0a1310;
+  --sidebar-foreground: #f0f2f1;
+  --sidebar-primary: #2f9e52;
+  --sidebar-primary-foreground: #04241b;
+  --sidebar-accent: rgba(47, 158, 82, 0.16);
+  --sidebar-accent-foreground: #f0f2f1;
+  --sidebar-border: rgba(255, 255, 255, 0.08);
+  --sidebar-ring: #2f9e52;
+  --sidebar-muted-foreground: #8ba199;
+  --surface-0: #050b08;
+  --surface-1: #0a1310;
+  --surface-2: #0d1814;
+  --success: #8fd82a;
+  --success-fg: #a6e34d;
+  --success-bg: rgba(143, 216, 42, 0.1);
+  --success-border: rgba(143, 216, 42, 0.35);
+  --warning: #f0c34e;
+  --warning-fg: #f0c34e;
+  --warning-bg: rgba(240, 195, 78, 0.1);
+  --warning-border: rgba(240, 195, 78, 0.35);
+  --info: #2f9e52;
+  --info-fg: #5cbb79;
+  --info-bg: rgba(47, 158, 82, 0.14);
+  --info-border: rgba(47, 158, 82, 0.4);
+  --danger: #ff6b6b;
+  --danger-fg: #ff8a8a;
+  --danger-bg: rgba(255, 107, 107, 0.1);
+  --danger-border: rgba(255, 107, 107, 0.35);
+}
+
+/* Accent: Green on Emerald */
+[data-ground="emerald"][data-accent="green"] {
+  --primary: #2f9e52;
+  --primary-foreground: #04241b;
+  --ring: #2f9e52;
+  --chart-1: #2f9e52;
+  --chart-3: #cbf39d;
+  --chart-4: #e0b34a;
+  --chart-5: #0b6644;
+  --sidebar-primary: #2f9e52;
+  --sidebar-primary-foreground: #04241b;
+  --sidebar-accent: rgba(47, 158, 82, 0.16);
+  --sidebar-ring: #2f9e52;
+}
+
+/* Accent: Copper on Emerald */
+[data-ground="emerald"][data-accent="copper"] {
+  --primary: #c97b4a;
+  --primary-foreground: #140a04;
+  --ring: #c97b4a;
+  --chart-1: #c97b4a;
+  --chart-3: #d9c7a3;
+  --chart-4: #e0b34a;
+  --chart-5: #2f9e52;
+  --sidebar-primary: #c97b4a;
+  --sidebar-primary-foreground: #140a04;
+  --sidebar-accent: rgba(201, 123, 74, 0.16);
+  --sidebar-ring: #c97b4a;
+}
+
+/* Accent: Ice on Emerald */
+[data-ground="emerald"][data-accent="ice"] {
+  --primary: #6e9fc4;
+  --primary-foreground: #06131c;
+  --ring: #6e9fc4;
+  --chart-1: #6e9fc4;
+  --chart-3: #b9d4e4;
+  --chart-4: #e0b34a;
+  --chart-5: #2f9e52;
+  --sidebar-primary: #6e9fc4;
+  --sidebar-primary-foreground: #06131c;
+  --sidebar-accent: rgba(110, 159, 196, 0.16);
+  --sidebar-ring: #6e9fc4;
+}
+
+/* Accent: Periwinkle on Emerald */
+[data-ground="emerald"][data-accent="periwinkle"] {
+  --primary: #8b8fd9;
+  --primary-foreground: #0b0c1a;
+  --ring: #8b8fd9;
+  --chart-1: #8b8fd9;
+  --chart-3: #c3c5ec;
+  --chart-4: #e0b34a;
+  --chart-5: #2f9e52;
+  --sidebar-primary: #8b8fd9;
+  --sidebar-primary-foreground: #0b0c1a;
+  --sidebar-accent: rgba(139, 143, 217, 0.16);
+  --sidebar-ring: #8b8fd9;
+}
+
+/* Accent: Amber on Emerald */
+[data-ground="emerald"][data-accent="amber"] {
+  --primary: #e0b34a;
+  --primary-foreground: #1a1204;
+  --ring: #e0b34a;
+  --chart-1: #e0b34a;
+  --chart-3: #cbf39d;
+  --chart-4: #c97b4a;
+  --chart-5: #0b6644;
+  --sidebar-primary: #e0b34a;
+  --sidebar-primary-foreground: #1a1204;
+  --sidebar-accent: rgba(224, 179, 74, 0.16);
+  --sidebar-ring: #e0b34a;
+}
+
+/* Ground: Navy (dark) */
+[data-ground="navy"] {
+  color-scheme: dark;
+  --background: #0b1120;
+  --foreground: #f0f2f1;
+  --card: #152141;
+  --card-foreground: #f0f2f1;
+  --popover: #1a284a;
+  --popover-foreground: #f0f2f1;
+  --primary: #2f9e52;
+  --primary-foreground: #04241b;
+  --secondary: #1d2b50;
+  --secondary-foreground: #f0f2f1;
+  --muted: #182545;
+  --muted-foreground: #97a6c2;
+  --accent: #213157;
+  --accent-foreground: #f0f2f1;
+  --destructive: #ff6b6b;
+  --border: rgba(255, 255, 255, 0.1);
+  --input: rgba(255, 255, 255, 0.1);
+  --ring: #2f9e52;
+  --chart-1: #2f9e52;
+  --chart-2: #8fd82a;
+  --chart-3: #cbf39d;
+  --chart-4: #e0b34a;
+  --chart-5: #0b6644;
+  --sidebar: #152141;
+  --sidebar-foreground: #f0f2f1;
+  --sidebar-primary: #2f9e52;
+  --sidebar-primary-foreground: #04241b;
+  --sidebar-accent: rgba(47, 158, 82, 0.16);
+  --sidebar-accent-foreground: #f0f2f1;
+  --sidebar-border: rgba(255, 255, 255, 0.08);
+  --sidebar-ring: #2f9e52;
+  --sidebar-muted-foreground: #97a6c2;
+  --surface-0: #0b1120;
+  --surface-1: #152141;
+  --surface-2: #1a284a;
+  --success: #8fd82a;
+  --success-fg: #a6e34d;
+  --success-bg: rgba(143, 216, 42, 0.1);
+  --success-border: rgba(143, 216, 42, 0.35);
+  --warning: #f0c34e;
+  --warning-fg: #f0c34e;
+  --warning-bg: rgba(240, 195, 78, 0.1);
+  --warning-border: rgba(240, 195, 78, 0.35);
+  --info: #2f9e52;
+  --info-fg: #5cbb79;
+  --info-bg: rgba(47, 158, 82, 0.14);
+  --info-border: rgba(47, 158, 82, 0.4);
+  --danger: #ff6b6b;
+  --danger-fg: #ff8a8a;
+  --danger-bg: rgba(255, 107, 107, 0.1);
+  --danger-border: rgba(255, 107, 107, 0.35);
+}
+
+/* Accent: Green on Navy */
+[data-ground="navy"][data-accent="green"] {
+  --primary: #2f9e52;
+  --primary-foreground: #04241b;
+  --ring: #2f9e52;
+  --chart-1: #2f9e52;
+  --chart-3: #cbf39d;
+  --chart-4: #e0b34a;
+  --chart-5: #0b6644;
+  --sidebar-primary: #2f9e52;
+  --sidebar-primary-foreground: #04241b;
+  --sidebar-accent: rgba(47, 158, 82, 0.16);
+  --sidebar-ring: #2f9e52;
+}
+
+/* Accent: Copper on Navy */
+[data-ground="navy"][data-accent="copper"] {
+  --primary: #c97b4a;
+  --primary-foreground: #140a04;
+  --ring: #c97b4a;
+  --chart-1: #c97b4a;
+  --chart-3: #d9c7a3;
+  --chart-4: #e0b34a;
+  --chart-5: #2f9e52;
+  --sidebar-primary: #c97b4a;
+  --sidebar-primary-foreground: #140a04;
+  --sidebar-accent: rgba(201, 123, 74, 0.16);
+  --sidebar-ring: #c97b4a;
+}
+
+/* Accent: Ice on Navy */
+[data-ground="navy"][data-accent="ice"] {
+  --primary: #6e9fc4;
+  --primary-foreground: #06131c;
+  --ring: #6e9fc4;
+  --chart-1: #6e9fc4;
+  --chart-3: #b9d4e4;
+  --chart-4: #e0b34a;
+  --chart-5: #2f9e52;
+  --sidebar-primary: #6e9fc4;
+  --sidebar-primary-foreground: #06131c;
+  --sidebar-accent: rgba(110, 159, 196, 0.16);
+  --sidebar-ring: #6e9fc4;
+}
+
+/* Accent: Periwinkle on Navy */
+[data-ground="navy"][data-accent="periwinkle"] {
+  --primary: #8b8fd9;
+  --primary-foreground: #0b0c1a;
+  --ring: #8b8fd9;
+  --chart-1: #8b8fd9;
+  --chart-3: #c3c5ec;
+  --chart-4: #e0b34a;
+  --chart-5: #2f9e52;
+  --sidebar-primary: #8b8fd9;
+  --sidebar-primary-foreground: #0b0c1a;
+  --sidebar-accent: rgba(139, 143, 217, 0.16);
+  --sidebar-ring: #8b8fd9;
+}
+
+/* Accent: Amber on Navy */
+[data-ground="navy"][data-accent="amber"] {
+  --primary: #e0b34a;
+  --primary-foreground: #1a1204;
+  --ring: #e0b34a;
+  --chart-1: #e0b34a;
+  --chart-3: #cbf39d;
+  --chart-4: #c97b4a;
+  --chart-5: #0b6644;
+  --sidebar-primary: #e0b34a;
+  --sidebar-primary-foreground: #1a1204;
+  --sidebar-accent: rgba(224, 179, 74, 0.16);
+  --sidebar-ring: #e0b34a;
+}
+
+/* Ground: Paper (light) */
+[data-ground="paper"] {
+  color-scheme: light;
+  --background: #faf6ee;
+  --foreground: #1e1d1b;
+  --card: #fffdf9;
+  --card-foreground: #1e1d1b;
+  --popover: #fffdf9;
+  --popover-foreground: #1e1d1b;
+  --primary: #26803f;
+  --primary-foreground: #f3fbf7;
+  --secondary: #f3eee4;
+  --secondary-foreground: #1e1d1b;
+  --muted: #f3eee4;
+  --muted-foreground: #5c5b58;
+  --accent: #f0e6da;
+  --accent-foreground: #1e1d1b;
+  --destructive: #d40c1a;
+  --border: #dedad2;
+  --input: #dedad2;
+  --ring: #26803f;
+  --chart-1: #26803f;
+  --chart-2: #5c9c1a;
+  --chart-3: #8a7a5c;
+  --chart-4: #b8860b;
+  --chart-5: #26803f;
+  --sidebar: #f5f0e4;
+  --sidebar-foreground: #1e1d1b;
+  --sidebar-primary: #26803f;
+  --sidebar-primary-foreground: #f3fbf7;
+  --sidebar-accent: #f0e6da;
+  --sidebar-accent-foreground: #1e1d1b;
+  --sidebar-border: #dedad2;
+  --sidebar-ring: #26803f;
+  --sidebar-muted-foreground: #5c5b58;
+  --surface-0: #faf6ee;
+  --surface-1: #fffdf9;
+  --surface-2: #fffdf9;
+  --success: #508d23;
+  --success-fg: #305a12;
+  --success-bg: #e3f5da;
+  --success-border: #b4d7a2;
+  --warning: #cb7a00;
+  --warning-fg: #824c12;
+  --warning-bg: #fef0d4;
+  --warning-border: #e8c184;
+  --info: #2f8543;
+  --info-fg: #1b622d;
+  --info-bg: #e2f4e3;
+  --info-border: #acd8b1;
+  --danger: #df2225;
+  --danger-fg: #bb0916;
+  --danger-bg: #ffeae9;
+  --danger-border: #ffb1aa;
+}
+
+/* Accent: Green on Paper */
+[data-ground="paper"][data-accent="green"] {
+  --primary: #26803f;
+  --ring: #26803f;
+  --chart-1: #26803f;
+  --sidebar-primary: #26803f;
+  --sidebar-ring: #26803f;
+}
+
+/* Accent: Copper on Paper */
+[data-ground="paper"][data-accent="copper"] {
+  --primary: #9c5730;
+  --ring: #9c5730;
+  --chart-1: #9c5730;
+  --sidebar-primary: #9c5730;
+  --sidebar-ring: #9c5730;
+}
+
+/* Accent: Ice on Paper */
+[data-ground="paper"][data-accent="ice"] {
+  --primary: #3d6f95;
+  --ring: #3d6f95;
+  --chart-1: #3d6f95;
+  --sidebar-primary: #3d6f95;
+  --sidebar-ring: #3d6f95;
+}
+
+/* Accent: Periwinkle on Paper */
+[data-ground="paper"][data-accent="periwinkle"] {
+  --primary: #5a5fae;
+  --ring: #5a5fae;
+  --chart-1: #5a5fae;
+  --sidebar-primary: #5a5fae;
+  --sidebar-ring: #5a5fae;
+}
+
+/* Accent: Amber on Paper */
+[data-ground="paper"][data-accent="amber"] {
+  --primary: #8a6410;
+  --ring: #8a6410;
+  --chart-1: #8a6410;
+  --sidebar-primary: #8a6410;
+  --sidebar-ring: #8a6410;
+}
+
+/* Ground: Mist (light) */
+[data-ground="mist"] {
+  color-scheme: light;
+  --background: #f2f7f9;
+  --foreground: #1e1d1b;
+  --card: #ffffff;
+  --card-foreground: #1e1d1b;
+  --popover: #ffffff;
+  --popover-foreground: #1e1d1b;
+  --primary: #26803f;
+  --primary-foreground: #f3fbf7;
+  --secondary: #e9eff2;
+  --secondary-foreground: #1e1d1b;
+  --muted: #e9eff2;
+  --muted-foreground: #5c5b58;
+  --accent: #dfeaf0;
+  --accent-foreground: #1e1d1b;
+  --destructive: #d40c1a;
+  --border: #d6dcdf;
+  --input: #d6dcdf;
+  --ring: #26803f;
+  --chart-1: #26803f;
+  --chart-2: #5c9c1a;
+  --chart-3: #8a7a5c;
+  --chart-4: #b8860b;
+  --chart-5: #26803f;
+  --sidebar: #e9f1f5;
+  --sidebar-foreground: #1e1d1b;
+  --sidebar-primary: #26803f;
+  --sidebar-primary-foreground: #f3fbf7;
+  --sidebar-accent: #dfeaf0;
+  --sidebar-accent-foreground: #1e1d1b;
+  --sidebar-border: #d6dcdf;
+  --sidebar-ring: #26803f;
+  --sidebar-muted-foreground: #5c5b58;
+  --surface-0: #f2f7f9;
+  --surface-1: #ffffff;
+  --surface-2: #ffffff;
+  --success: #508d23;
+  --success-fg: #305a12;
+  --success-bg: #e3f5da;
+  --success-border: #b4d7a2;
+  --warning: #cb7a00;
+  --warning-fg: #824c12;
+  --warning-bg: #fef0d4;
+  --warning-border: #e8c184;
+  --info: #2f8543;
+  --info-fg: #1b622d;
+  --info-bg: #e2f4e3;
+  --info-border: #acd8b1;
+  --danger: #df2225;
+  --danger-fg: #bb0916;
+  --danger-bg: #ffeae9;
+  --danger-border: #ffb1aa;
+}
+
+/* Accent: Green on Mist */
+[data-ground="mist"][data-accent="green"] {
+  --primary: #26803f;
+  --ring: #26803f;
+  --chart-1: #26803f;
+  --sidebar-primary: #26803f;
+  --sidebar-ring: #26803f;
+}
+
+/* Accent: Copper on Mist */
+[data-ground="mist"][data-accent="copper"] {
+  --primary: #9c5730;
+  --ring: #9c5730;
+  --chart-1: #9c5730;
+  --sidebar-primary: #9c5730;
+  --sidebar-ring: #9c5730;
+}
+
+/* Accent: Ice on Mist */
+[data-ground="mist"][data-accent="ice"] {
+  --primary: #3d6f95;
+  --ring: #3d6f95;
+  --chart-1: #3d6f95;
+  --sidebar-primary: #3d6f95;
+  --sidebar-ring: #3d6f95;
+}
+
+/* Accent: Periwinkle on Mist */
+[data-ground="mist"][data-accent="periwinkle"] {
+  --primary: #5a5fae;
+  --ring: #5a5fae;
+  --chart-1: #5a5fae;
+  --sidebar-primary: #5a5fae;
+  --sidebar-ring: #5a5fae;
+}
+
+/* Accent: Amber on Mist */
+[data-ground="mist"][data-accent="amber"] {
+  --primary: #8a6410;
+  --ring: #8a6410;
+  --chart-1: #8a6410;
+  --sidebar-primary: #8a6410;
+  --sidebar-ring: #8a6410;
+}