/** * AgnosticUI Skins Bundle — DO NOT EDIT * * Auto-generated by skins/build-bundle.js * Regenerate with: node v2/skins/build-bundle.js * * All skin CSS files concatenated into one importable file. * Import this AFTER ag-tokens-dark.css in your entry point. */ /* ═══════════════════════════════════════════════════════════════════════════ Autumn Slate — Light ═══════════════════════════════════════════════════════════════════════════ */ /** * Autumn Slate Skin — Light Mode * * Warm autumn tones (burnt orange, amber) with cool slate gray accents. * Inspired by HTML5UP's Dopetrope magazine/blog aesthetic. * * Activate by adding class="ag-skin-autumn-slate" to . * Load this file AFTER ag-tokens.css so the cascade overrides. */ :where(html).ag-skin-autumn-slate { /* ── Primary color family (burnt orange) ── */ --ag-primary: #d2691e; --ag-primary-fg: #000000; --ag-primary-dark: #b8571a; --ag-primary-border: #e8b896; --ag-primary-background: #fdf6f0; --ag-primary-text: #a0521a; /* ── Focus ring (burnt orange-derived RGB) ── */ --ag-focus: 210, 105, 30; --ag-focus-dark: #e8761e; /* ── Semantic text (slate gray) ── */ --ag-text-primary: #2f4f4f; --ag-text-secondary: #536878; --ag-text-muted: #708090; --ag-text-primary-muted: #3d5a5f; /* ── Borders (warm gray) ── */ --ag-border: #d5d0c8; --ag-border-subtle: #e5e0d8; /* ── Backgrounds (warm neutrals) ── */ --ag-background-primary: #fafaf8; --ag-background-secondary: #f5f3f0; --ag-background-tertiary: #ebe8e3; /* ── Border radius (moderate) ── */ --ag-radius-lg: 0.5rem; /* ── Shadows (warm-tinted) ── */ --ag-shadow-xs: 0 1px 2px 0 rgba(47, 79, 79, 0.06); --ag-shadow-sm: 0 1px 4px 0 rgba(47, 79, 79, 0.08); --ag-shadow-md: 0 2px 8px 0 rgba(47, 79, 79, 0.1); --ag-shadow-lg: 0 4px 16px 0 rgba(47, 79, 79, 0.12); --ag-shadow-xl: 0 6px 24px 0 rgba(47, 79, 79, 0.14); /* ── Rating (amber) ── */ --ag-rating-filled: #f4a742; --ag-rating-filled-primary: #d2691e; /* ── Autumn palette (overrides blue palette) ── */ --ag-blue-50: #fdf6f0; --ag-blue-100: #f8e4d2; --ag-blue-200: #f0cfb3; --ag-blue-300: #e8b896; --ag-blue-400: #e89148; --ag-blue-500: #d2691e; --ag-blue-600: #b8571a; --ag-blue-700: #a0521a; --ag-blue-800: #7a3d14; --ag-blue-900: #5a2d0f; } /* ═══════════════════════════════════════════════════════════════════════════ Autumn Slate — Dark ═══════════════════════════════════════════════════════════════════════════ */ /** * Autumn Slate Skin — Dark Mode * * Dark-mode overrides for the Autumn Slate warm/cool aesthetic. * * Activate by adding class="ag-skin-autumn-slate" to . * Load this file AFTER ag-tokens-dark.css so the cascade overrides. */ [data-theme="dark"].ag-skin-autumn-slate { /* ── Primary color family (brightened burnt orange) ── */ --ag-primary: #e89148; --ag-primary-fg: #000000; --ag-primary-dark: #d2691e; --ag-primary-border: #c86828; --ag-primary-background: #2a1a10; --ag-primary-text: #f0cfb3; /* ── Focus ring (brightened orange-derived RGB) ── */ --ag-focus: 232, 145, 72; --ag-focus-dark: #f0a860; /* ── Semantic text (lighter slate) ── */ --ag-text-primary: #d8dfe5; --ag-text-secondary: #b0bec8; --ag-text-muted: #8a9aa8; --ag-text-primary-muted: #c0cbd5; /* ── Borders (dark slate) ── */ --ag-border: #3a4a52; --ag-border-subtle: #2f3e45; /* ── Backgrounds (dark warm neutrals) ── */ --ag-background-primary: #1a1612; --ag-background-secondary: #221e18; --ag-background-tertiary: #2a2520; /* ── Border radius (matches light) ── */ --ag-radius-lg: 0.5rem; /* ── Shadows (warm-tinted for dark mode) ── */ --ag-shadow-xs: 0 1px 2px 0 rgba(232, 145, 72, 0.08); --ag-shadow-sm: 0 1px 4px 0 rgba(232, 145, 72, 0.1); --ag-shadow-md: 0 2px 8px 0 rgba(232, 145, 72, 0.12); --ag-shadow-lg: 0 4px 16px 0 rgba(232, 145, 72, 0.14); --ag-shadow-xl: 0 6px 24px 0 rgba(232, 145, 72, 0.16); /* ── Rating (amber) ── */ --ag-rating-filled: #f4a742; --ag-rating-filled-primary: #e89148; /* ── Autumn palette (overrides blue palette) ── */ --ag-blue-50: #f8e4d2; --ag-blue-100: #f0cfb3; --ag-blue-200: #e8b896; --ag-blue-300: #e8a870; --ag-blue-400: #e89148; --ag-blue-500: #d2691e; --ag-blue-600: #b8571a; --ag-blue-700: #a0521a; --ag-blue-800: #5a2d0f; --ag-blue-900: #2a1a10; } /* ═══════════════════════════════════════════════════════════════════════════ Black Cream — Light ═══════════════════════════════════════════════════════════════════════════ */ /** * Black Cream Skin — Light Mode * * Elegant black and cream color scheme with sophisticated contrast. * Inspired by modern portfolio templates with refined aesthetics. * * Activate by adding class="ag-skin-black-cream" to . * Load this file AFTER ag-tokens.css so the cascade overrides. */ :where(html).ag-skin-black-cream { /* ── Primary color family (rich black) ── */ --ag-primary: #1a1a1a; --ag-primary-dark: #0a0a0a; --ag-primary-border: #3a3a3a; --ag-primary-background: #faf8f5; --ag-primary-text: #1a1a1a; /* ── Focus ring (black-derived RGB) ── */ --ag-focus: 26, 26, 26; --ag-focus-dark: #3a3a3a; /* ── Semantic text (warm blacks) ── */ --ag-text-primary: #1a1a1a; --ag-text-secondary: #4a4745; --ag-text-muted: #6a6762; --ag-text-primary-muted: #2a2826; /* ── Borders (soft warm gray) ── */ --ag-border: #e0dcd5; --ag-border-subtle: #ebe8e1; /* ── Backgrounds (cream tones) ── */ --ag-background-primary: #fffcf7; --ag-background-secondary: #faf8f5; --ag-background-tertiary: #f0ede8; /* ── Border radius (refined) ── */ --ag-radius-lg: 0.75rem; /* ── Shadows (warm, subtle) ── */ --ag-shadow-xs: 0 1px 2px 0 rgba(26, 26, 26, 0.04); --ag-shadow-sm: 0 1px 3px 0 rgba(26, 26, 26, 0.06); --ag-shadow-md: 0 2px 8px 0 rgba(26, 26, 26, 0.08); --ag-shadow-lg: 0 4px 16px 0 rgba(26, 26, 26, 0.1); --ag-shadow-xl: 0 8px 24px 0 rgba(26, 26, 26, 0.12); /* ── Rating (warm gold) ── */ --ag-rating-filled: #d4af37; --ag-rating-filled-primary: #1a1a1a; /* ── Warm neutral palette (overrides blue palette) ── */ --ag-blue-50: #faf8f5; --ag-blue-100: #f0ede8; --ag-blue-200: #e0dcd5; --ag-blue-300: #ccc6bb; --ag-blue-400: #b3aa9d; --ag-blue-500: #8a8275; --ag-blue-600: #6a6762; --ag-blue-700: #4a4745; --ag-blue-800: #2a2826; --ag-blue-900: #1a1a1a; } /* ═══════════════════════════════════════════════════════════════════════════ Black Cream — Dark ═══════════════════════════════════════════════════════════════════════════ */ /** * Black Cream Skin — Dark Mode * * Dark-mode overrides for the Black Cream sophisticated aesthetic. * * Activate by adding class="ag-skin-black-cream" to . * Load this file AFTER ag-tokens-dark.css so the cascade overrides. */ [data-theme="dark"].ag-skin-black-cream { /* ── Primary color family (warm cream) ── */ --ag-primary: #f0ede8; --ag-primary-fg: #000000; --ag-primary-dark: #e0dcd5; --ag-primary-border: #4a4745; --ag-primary-background: #1a1816; --ag-primary-text: #faf8f5; /* ── Focus ring (cream-derived RGB) ── */ --ag-focus: 240, 237, 232; --ag-focus-dark: #fffcf7; /* ── Semantic text (warm lights) ── */ --ag-text-primary: #faf8f5; --ag-text-secondary: #e0dcd5; --ag-text-muted: #b3aa9d; --ag-text-primary-muted: #ebe8e1; /* ── Borders (dark warm) ── */ --ag-border: #3a3836; --ag-border-subtle: #2a2826; /* ── Backgrounds (dark warm neutrals) ── */ --ag-background-primary: #0a0a08; --ag-background-secondary: #151412; --ag-background-tertiary: #1f1e1c; /* ── Border radius (matches light) ── */ --ag-radius-lg: 0.75rem; /* ── Shadows (warm-tinted for dark mode) ── */ --ag-shadow-xs: 0 1px 2px 0 rgba(240, 237, 232, 0.04); --ag-shadow-sm: 0 1px 3px 0 rgba(240, 237, 232, 0.06); --ag-shadow-md: 0 2px 8px 0 rgba(240, 237, 232, 0.08); --ag-shadow-lg: 0 4px 16px 0 rgba(240, 237, 232, 0.1); --ag-shadow-xl: 0 8px 24px 0 rgba(240, 237, 232, 0.12); /* ── Rating (warm gold) ── */ --ag-rating-filled: #d4af37; --ag-rating-filled-primary: #f0ede8; /* ── Warm neutral palette (overrides blue palette) ── */ --ag-blue-50: #faf8f5; --ag-blue-100: #f0ede8; --ag-blue-200: #e0dcd5; --ag-blue-300: #ccc6bb; --ag-blue-400: #b3aa9d; --ag-blue-500: #8a8275; --ag-blue-600: #6a6762; --ag-blue-700: #4a4745; --ag-blue-800: #2a2826; --ag-blue-900: #1a1816; } /* ═══════════════════════════════════════════════════════════════════════════ Claymorphic — Light ═══════════════════════════════════════════════════════════════════════════ */ /** * Claymorphic Skin — Light Mode * * A warm, earthy palette with terracotta primary on cream neutrals. * Inspired by Claude's aesthetic. * * Activate by adding class="ag-skin-claymorphic" to . * Load this file AFTER ag-tokens.css so the cascade overrides. */ :where(html).ag-skin-claymorphic { /* ── Primary color family ── */ --ag-primary: #c96442; --ag-primary-fg: #000000; --ag-primary-dark: #b05730; --ag-primary-border: #e8c4b5; --ag-primary-background: #fdf0eb; --ag-primary-text: #b05730; /* ── Focus ring (terracotta-derived RGB) ── */ --ag-focus: 201, 100, 66; --ag-focus-dark: #b05730; /* ── Semantic text ── */ --ag-text-primary: #3d3929; --ag-text-secondary: #535146; --ag-text-muted: #83827d; --ag-text-primary-muted: #535146; /* ── Borders ── */ --ag-border: #dad9d4; --ag-border-subtle: #ede9de; /* ── Backgrounds ── */ --ag-background-primary: #faf9f5; --ag-background-secondary: #f5f4ee; --ag-background-tertiary: #ede9de; /* ── Border radius (clean, moderate) ── */ --ag-radius-lg: 0.75rem; /* ── Shadows (soft, warm clay-like) ── */ --ag-shadow-xs: 0 1px 2px 0 rgba(61, 57, 41, 0.05); --ag-shadow-sm: 0 1px 3px 0 rgba(61, 57, 41, 0.08); --ag-shadow-md: 0 2px 8px -1px rgba(61, 57, 41, 0.1); --ag-shadow-lg: 0 4px 16px -2px rgba(61, 57, 41, 0.1); --ag-shadow-xl: 0 8px 24px -4px rgba(61, 57, 41, 0.12); /* ── Rating ── */ --ag-rating-filled-primary: #c96442; /* ── Terracotta palette (overrides blue palette for primary usage) ── */ --ag-blue-50: #fdf0eb; --ag-blue-100: #f5d5c7; --ag-blue-200: #e8b8a3; --ag-blue-300: #db9a7e; --ag-blue-400: #d97757; --ag-blue-500: #c96442; --ag-blue-600: #b05730; --ag-blue-700: #8e4526; --ag-blue-800: #6c341c; --ag-blue-900: #4a2312; } /* ═══════════════════════════════════════════════════════════════════════════ Claymorphic — Dark ═══════════════════════════════════════════════════════════════════════════ */ /** * Claymorphic Skin — Dark Mode * * Dark-mode overrides for the Claymorphic terracotta/cream aesthetic. * Inspired by Claude's aesthetic. * * Activate by adding class="ag-skin-claymorphic" to . * Load this file AFTER ag-tokens-dark.css so the cascade overrides. */ [data-theme="dark"].ag-skin-claymorphic { /* ── Primary color family (brightened for dark backgrounds) ── */ --ag-primary: #d97757; --ag-primary-fg: #000000; --ag-primary-dark: #c96442; --ag-primary-border: #d97757; --ag-primary-background: #3a2218; --ag-primary-text: #f5d5c7; /* ── Focus ring (terracotta-derived RGB, brightened) ── */ --ag-focus: 217, 119, 87; --ag-focus-dark: #e8b8a3; /* ── Semantic text ── */ --ag-text-primary: #c3c0b6; --ag-text-secondary: #a09d94; --ag-text-muted: #83827d; --ag-text-primary-muted: #a09d94; /* ── Borders ── */ --ag-border: #3d3b36; --ag-border-subtle: #524f48; /* ── Backgrounds ── */ --ag-background-primary: #262624; --ag-background-secondary: #2e2c2a; --ag-background-tertiary: #3a3836; /* ── Border radius (matches light) ── */ --ag-radius-lg: 0.75rem; /* ── Shadows (warm-tinted for dark mode) ── */ --ag-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.2); --ag-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.25); --ag-shadow-md: 0 2px 8px -1px rgba(0, 0, 0, 0.3); --ag-shadow-lg: 0 4px 16px -2px rgba(0, 0, 0, 0.3); --ag-shadow-xl: 0 8px 24px -4px rgba(0, 0, 0, 0.35); /* ── Rating ── */ --ag-rating-filled-primary: #d97757; /* ── Terracotta palette (overrides blue palette for primary usage) ── */ --ag-blue-50: #f5d5c7; --ag-blue-100: #e8b8a3; --ag-blue-200: #db9a7e; --ag-blue-300: #d97757; --ag-blue-400: #c96442; --ag-blue-500: #b05730; --ag-blue-600: #8e4526; --ag-blue-700: #6c341c; --ag-blue-800: #4a2312; --ag-blue-900: #3a2218; } /* ═══════════════════════════════════════════════════════════════════════════ Coffee Espresso — Light ═══════════════════════════════════════════════════════════════════════════ */ /** * Coffee Espresso Skin — Light Mode * * Rich warm browns with cream accents. Cozy editorial feel * inspired by artisan coffee shops and Notion-like warmth. * * Activate by adding class="ag-skin-coffee-espresso" to . * Load this file AFTER ag-tokens.css so the cascade overrides. */ :where(html).ag-skin-coffee-espresso { /* ── Primary color family (espresso brown) ── */ --ag-primary: #6f4e37; --ag-primary-dark: #5a3e2b; --ag-primary-border: #d4b89c; --ag-primary-background: #faf3ed; --ag-primary-text: #4a3322; /* ── Focus ring (coffee-derived RGB) ── */ --ag-focus: 111, 78, 55; --ag-focus-dark: #5a3e2b; /* ── Semantic text ── */ --ag-text-primary: #2c1e12; --ag-text-secondary: #5c4a3a; --ag-text-muted: #8c7a6a; --ag-text-primary-muted: #4a3828; /* ── Borders ── */ --ag-border: #e6dbd0; --ag-border-subtle: #efe6dc; /* ── Backgrounds ── */ --ag-background-primary: #fffcf8; --ag-background-secondary: #f8f2eb; --ag-background-tertiary: #f0e8df; /* ── Border radius (warm, moderate) ── */ --ag-radius-lg: 0.75rem; /* ── Shadows (warm brown-tinted) ── */ --ag-shadow-xs: 0 1px 3px 0 rgba(111, 78, 55, 0.06); --ag-shadow-sm: 0 1px 5px 0 rgba(111, 78, 55, 0.08); --ag-shadow-md: 0 2px 10px 0 rgba(111, 78, 55, 0.08); --ag-shadow-lg: 0 4px 18px -2px rgba(111, 78, 55, 0.1); --ag-shadow-xl: 0 8px 28px -4px rgba(111, 78, 55, 0.12); /* ── Rating ── */ --ag-rating-filled: #d4a055; --ag-rating-filled-primary: #6f4e37; /* ── Coffee palette (overrides blue palette) ── */ --ag-blue-50: #faf3ed; --ag-blue-100: #f0e0cc; --ag-blue-200: #d4b89c; --ag-blue-300: #c4a07c; --ag-blue-400: #a07850; --ag-blue-500: #6f4e37; --ag-blue-600: #5a3e2b; --ag-blue-700: #4a3322; --ag-blue-800: #362418; --ag-blue-900: #221610; } /* ═══════════════════════════════════════════════════════════════════════════ Coffee Espresso — Dark ═══════════════════════════════════════════════════════════════════════════ */ /** * Coffee Espresso Skin — Dark Mode * * Dark-mode overrides for the Coffee Espresso warm brown aesthetic. * Deep espresso backgrounds with cream and mocha highlights. * * Activate by adding class="ag-skin-coffee-espresso" to . * Load this file AFTER ag-tokens-dark.css so the cascade overrides. */ [data-theme="dark"].ag-skin-coffee-espresso { /* ── Primary color family (brightened for dark backgrounds) ── */ --ag-primary: #c4a07c; --ag-primary-fg: #000000; --ag-primary-dark: #a07850; --ag-primary-border: #6f4e37; --ag-primary-background: #221610; --ag-primary-text: #d4b89c; /* ── Focus ring (coffee-derived RGB, brightened) ── */ --ag-focus: 196, 160, 124; --ag-focus-dark: #d4b89c; /* ── Semantic text ── */ --ag-text-primary: #f5ece3; --ag-text-secondary: #d4c4b4; --ag-text-muted: #a0907e; --ag-text-primary-muted: #e8ddd0; /* ── Borders ── */ --ag-border: #3d2e22; --ag-border-subtle: #5a4434; /* ── Backgrounds ── */ --ag-background-primary: #120c08; --ag-background-secondary: #1a120c; --ag-background-tertiary: #2e2218; /* ── Border radius (matches light) ── */ --ag-radius-lg: 0.75rem; /* ── Shadows (warm brown-tinted for dark mode) ── */ --ag-shadow-xs: 0 1px 3px 0 rgba(196, 160, 124, 0.06); --ag-shadow-sm: 0 1px 5px 0 rgba(196, 160, 124, 0.08); --ag-shadow-md: 0 2px 10px 0 rgba(196, 160, 124, 0.08); --ag-shadow-lg: 0 4px 18px -2px rgba(196, 160, 124, 0.1); --ag-shadow-xl: 0 8px 28px -4px rgba(196, 160, 124, 0.12); /* ── Rating ── */ --ag-rating-filled: #d4a055; --ag-rating-filled-primary: #c4a07c; /* ── Coffee palette (overrides blue palette) ── */ --ag-blue-50: #f0e0cc; --ag-blue-100: #d4b89c; --ag-blue-200: #c4a07c; --ag-blue-300: #a07850; --ag-blue-400: #6f4e37; --ag-blue-500: #5a3e2b; --ag-blue-600: #4a3322; --ag-blue-700: #362418; --ag-blue-800: #221610; --ag-blue-900: #150e08; } /* ═══════════════════════════════════════════════════════════════════════════ Deep Forest — Light ═══════════════════════════════════════════════════════════════════════════ */ /** * Deep Forest Skin — Light Mode * * A clean, teal/green aesthetic inspired by deep forest tones. * * Activate by adding class="ag-skin-deep-forest" to . * Load this file AFTER ag-tokens.css so the cascade overrides. */ :where(html).ag-skin-deep-forest { /* ── Primary color family ── */ --ag-primary: #1f514c; --ag-primary-dark: #173d39; --ag-primary-border: #b2d4d0; --ag-primary-background: #e6f5f3; --ag-primary-text: #1f514c; /* ── Focus ring (teal-derived RGB) ── */ --ag-focus: 31, 81, 76; --ag-focus-dark: #3a8a80; /* ── Semantic text ── */ --ag-text-primary-muted: #2a4a46; /* ── Borders ── */ --ag-border: #d5e5e3; --ag-border-subtle: #c2d9d6; /* ── Backgrounds ── */ --ag-background-secondary: #f5faf9; --ag-background-tertiary: #e6f0ee; /* ── Border radius (rounder cards matching Deep Forest's 20-34px radii) ── */ --ag-radius-lg: 1.25rem; /* ── Shadows (softer, diffused) ── */ --ag-shadow-xs: 0 0 4px 0 rgba(31, 81, 76, 0.06); --ag-shadow-sm: 0 0 8px 0 rgba(31, 81, 76, 0.08); --ag-shadow-md: 0 0 15px 0 rgba(31, 81, 76, 0.08); --ag-shadow-lg: 0 0 25px -2px rgba(31, 81, 76, 0.1); --ag-shadow-xl: 0 0 35px -4px rgba(31, 81, 76, 0.12); /* ── Rating ── */ --ag-rating-filled-primary: #1f514c; /* ── Teal palette (overrides blue palette for primary usage) ── */ --ag-blue-50: #e6f5f3; --ag-blue-100: #c0e5e0; --ag-blue-200: #94d2ca; --ag-blue-300: #66bfb3; --ag-blue-400: #3a8a80; --ag-blue-500: #287a70; --ag-blue-600: #1f514c; --ag-blue-700: #173d39; --ag-blue-800: #0f2926; --ag-blue-900: #081a17; } /* ═══════════════════════════════════════════════════════════════════════════ Deep Forest — Dark ═══════════════════════════════════════════════════════════════════════════ */ /** * Deep Forest Skin — Dark Mode * * Dark-mode overrides for the Deep Forest teal/green aesthetic. * * Activate by adding class="ag-skin-deep-forest" to . * Load this file AFTER ag-tokens-dark.css so the cascade overrides. */ [data-theme="dark"].ag-skin-deep-forest { /* ── Primary color family (brightened for dark backgrounds) ── */ --ag-primary: #3a8a80; --ag-primary-fg: #000000; --ag-primary-dark: #2d6e65; --ag-primary-border: #3a8a80; --ag-primary-background: #0d2926; --ag-primary-text: #94d2ca; /* ── Focus ring (teal-derived RGB, brightened) ── */ --ag-focus: 58, 138, 128; --ag-focus-dark: #4db3a6; /* ── Semantic text ── */ --ag-text-primary-muted: #c0e5e0; /* ── Borders ── */ --ag-border: #1f3d3a; --ag-border-subtle: #2d5a54; /* ── Backgrounds ── */ --ag-background-secondary: #0a1f1d; --ag-background-tertiary: #1a3936; /* ── Border radius (matches light) ── */ --ag-radius-lg: 1.25rem; /* ── Shadows (teal-tinted for dark mode) ── */ --ag-shadow-xs: 0 0 4px 0 rgba(58, 138, 128, 0.1); --ag-shadow-sm: 0 0 8px 0 rgba(58, 138, 128, 0.12); --ag-shadow-md: 0 0 15px 0 rgba(58, 138, 128, 0.1); --ag-shadow-lg: 0 0 25px -2px rgba(58, 138, 128, 0.12); --ag-shadow-xl: 0 0 35px -4px rgba(58, 138, 128, 0.15); /* ── Rating ── */ --ag-rating-filled-primary: #3a8a80; /* ── Teal palette (overrides blue palette for primary usage) ── */ --ag-blue-50: #c0e5e0; --ag-blue-100: #94d2ca; --ag-blue-200: #66bfb3; --ag-blue-300: #4db3a6; --ag-blue-400: #3a8a80; --ag-blue-500: #287a70; --ag-blue-600: #1f6660; --ag-blue-700: #174f4a; --ag-blue-800: #0f3834; --ag-blue-900: #0d2926; } /* ═══════════════════════════════════════════════════════════════════════════ Glassmorphism — Light ═══════════════════════════════════════════════════════════════════════════ */ /** * Glassmorphism Skin — Light Mode * * Frosted glass panels with blur, translucency, and subtle borders. * Inspired by Apple's visionOS and modern glass-card designs. * * Activate by adding class="ag-skin-glassmorphism" to . * Load this file AFTER ag-tokens.css so the cascade overrides. */ :where(html).ag-skin-glassmorphism { /* ── Primary color family (soft violet-blue) ── */ --ag-primary: #6366f1; --ag-primary-fg: #000000; --ag-primary-dark: #4f46e5; --ag-primary-border: #c7d2fe; --ag-primary-background: rgba(99, 102, 241, 0.08); --ag-primary-text: #4338ca; /* ── Focus ring (indigo-derived RGB) ── */ --ag-focus: 99, 102, 241; --ag-focus-dark: #4f46e5; /* ── Semantic text ── */ --ag-text-primary: #1e1b4b; --ag-text-secondary: #4b5563; --ag-text-muted: #9ca3af; --ag-text-primary-muted: #374151; /* ── Borders (subtle, translucent) ── */ --ag-border: rgba(255, 255, 255, 0.6); --ag-border-subtle: rgba(255, 255, 255, 0.3); /* ── Backgrounds (translucent for glass effect) ── */ --ag-background-primary: rgba(255, 255, 255, 0.72); --ag-background-secondary: rgba(255, 255, 255, 0.48); --ag-background-tertiary: rgba(245, 243, 255, 0.6); /* ── Border radius (generous for glass cards) ── */ --ag-radius-lg: 1.25rem; /* ── Shadows (colorful, diffused for glass depth) ── */ --ag-shadow-xs: 0 1px 3px 0 rgba(99, 102, 241, 0.06); --ag-shadow-sm: 0 2px 8px 0 rgba(99, 102, 241, 0.08); --ag-shadow-md: 0 4px 16px 0 rgba(99, 102, 241, 0.08); --ag-shadow-lg: 0 8px 24px -4px rgba(99, 102, 241, 0.1); --ag-shadow-xl: 0 12px 40px -8px rgba(99, 102, 241, 0.12); /* ── Rating ── */ --ag-rating-filled-primary: #6366f1; /* ── Indigo palette (overrides blue palette) ── */ --ag-blue-50: #eef2ff; --ag-blue-100: #e0e7ff; --ag-blue-200: #c7d2fe; --ag-blue-300: #a5b4fc; --ag-blue-400: #818cf8; --ag-blue-500: #6366f1; --ag-blue-600: #4f46e5; --ag-blue-700: #4338ca; --ag-blue-800: #3730a3; --ag-blue-900: #312e81; } /* ═══════════════════════════════════════════════════════════════════════════ Glassmorphism — Dark ═══════════════════════════════════════════════════════════════════════════ */ /** * Glassmorphism Skin — Dark Mode * * Dark frosted glass with luminous indigo accents and translucent panels. * * Activate by adding class="ag-skin-glassmorphism" to . * Load this file AFTER ag-tokens-dark.css so the cascade overrides. */ [data-theme="dark"].ag-skin-glassmorphism { /* ── Primary color family (brightened for dark backgrounds) ── */ --ag-primary: #818cf8; --ag-primary-fg: #000000; --ag-primary-dark: #6366f1; --ag-primary-border: #4f46e5; --ag-primary-background: rgba(99, 102, 241, 0.12); --ag-primary-text: #c7d2fe; /* ── Focus ring (indigo-derived RGB, brightened) ── */ --ag-focus: 129, 140, 248; --ag-focus-dark: #a5b4fc; /* ── Semantic text ── */ --ag-text-primary: #f1f0ff; --ag-text-secondary: #c4c1e0; --ag-text-muted: #8b87a8; --ag-text-primary-muted: #d8d5f0; /* ── Borders (translucent light on dark) ── */ --ag-border: rgba(255, 255, 255, 0.1); --ag-border-subtle: rgba(255, 255, 255, 0.06); /* ── Backgrounds (translucent dark glass) ── */ --ag-background-primary: rgba(15, 15, 35, 0.8); --ag-background-secondary: rgba(20, 20, 50, 0.6); --ag-background-tertiary: rgba(30, 30, 70, 0.5); /* ── Border radius (matches light) ── */ --ag-radius-lg: 1.25rem; /* ── Shadows (indigo-tinted glow) ── */ --ag-shadow-xs: 0 1px 3px 0 rgba(99, 102, 241, 0.1); --ag-shadow-sm: 0 2px 8px 0 rgba(99, 102, 241, 0.12); --ag-shadow-md: 0 4px 16px 0 rgba(99, 102, 241, 0.1); --ag-shadow-lg: 0 8px 24px -4px rgba(99, 102, 241, 0.14); --ag-shadow-xl: 0 12px 40px -8px rgba(99, 102, 241, 0.18); /* ── Rating ── */ --ag-rating-filled-primary: #818cf8; /* ── Indigo palette (overrides blue palette) ── */ --ag-blue-50: #e0e7ff; --ag-blue-100: #c7d2fe; --ag-blue-200: #a5b4fc; --ag-blue-300: #818cf8; --ag-blue-400: #6366f1; --ag-blue-500: #4f46e5; --ag-blue-600: #4338ca; --ag-blue-700: #3730a3; --ag-blue-800: #312e81; --ag-blue-900: #1e1b4b; } /* ═══════════════════════════════════════════════════════════════════════════ High Contrast — Light ═══════════════════════════════════════════════════════════════════════════ */ /** * High Contrast Skin — Light Mode * * Accessibility-focused skin with WCAG AAA contrast ratios. * Bold borders, strong text, no subtle grays. Clear visual hierarchy. * * Activate by adding class="ag-skin-high-contrast" to . * Load this file AFTER ag-tokens.css so the cascade overrides. */ :where(html).ag-skin-high-contrast { /* ── Primary color family (strong blue, high contrast) ── */ --ag-primary: #0050d8; --ag-primary-dark: #003da5; --ag-primary-border: #0050d8; --ag-primary-background: #e8f0fe; --ag-primary-text: #003078; /* ── Focus ring (bold blue RGB, thick) ── */ --ag-focus: 0, 80, 216; --ag-focus-dark: #003da5; /* ── Semantic text (maximum contrast) ── */ --ag-text-primary: #000000; --ag-text-secondary: #1a1a1a; --ag-text-muted: #333333; --ag-text-primary-muted: #0d0d0d; /* ── Borders (strong, visible) ── */ --ag-border: #333333; --ag-border-subtle: #666666; /* ── Backgrounds ── */ --ag-background-primary: #ffffff; --ag-background-secondary: #f5f5f5; --ag-background-tertiary: #ebebeb; /* ── Border radius (minimal for clarity) ── */ --ag-radius-lg: 0.375rem; /* ── Shadows (sharp, defined) ── */ --ag-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.12); --ag-shadow-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.16); --ag-shadow-md: 0 2px 8px 0 rgba(0, 0, 0, 0.18); --ag-shadow-lg: 0 4px 12px 0 rgba(0, 0, 0, 0.2); --ag-shadow-xl: 0 8px 20px 0 rgba(0, 0, 0, 0.22); /* ── Rating ── */ --ag-rating-filled-primary: #0050d8; /* ── Blue palette (high-contrast blue ramp) ── */ --ag-blue-50: #e8f0fe; --ag-blue-100: #b8d4fc; --ag-blue-200: #88b8fa; --ag-blue-300: #4890f0; --ag-blue-400: #1a6ee6; --ag-blue-500: #0050d8; --ag-blue-600: #003da5; --ag-blue-700: #003078; --ag-blue-800: #002050; --ag-blue-900: #001030; } /* ═══════════════════════════════════════════════════════════════════════════ High Contrast — Dark ═══════════════════════════════════════════════════════════════════════════ */ /** * High Contrast Skin — Dark Mode * * Dark-mode overrides with maximum contrast for accessibility. * Bright text on pure dark backgrounds, strong borders. * * Activate by adding class="ag-skin-high-contrast" to . * Load this file AFTER ag-tokens-dark.css so the cascade overrides. */ [data-theme="dark"].ag-skin-high-contrast { /* ── Primary color family (bright for dark backgrounds) ── */ --ag-primary: #4890f0; --ag-primary-fg: #000000; --ag-primary-dark: #1a6ee6; --ag-primary-border: #4890f0; --ag-primary-background: #001030; --ag-primary-text: #b8d4fc; /* ── Focus ring (bright blue RGB) ── */ --ag-focus: 72, 144, 240; --ag-focus-dark: #88b8fa; /* ── Semantic text (maximum contrast on dark) ── */ --ag-text-primary: #ffffff; --ag-text-secondary: #f0f0f0; --ag-text-muted: #cccccc; --ag-text-primary-muted: #f5f5f5; /* ── Borders (strong, visible on dark) ── */ --ag-border: #cccccc; --ag-border-subtle: #888888; /* ── Backgrounds (pure dark) ── */ --ag-background-primary: #000000; --ag-background-secondary: #0a0a0a; --ag-background-tertiary: #141414; /* ── Border radius (matches light) ── */ --ag-radius-lg: 0.375rem; /* ── Shadows (bright edges for definition) ── */ --ag-shadow-xs: 0 1px 2px 0 rgba(255, 255, 255, 0.08); --ag-shadow-sm: 0 1px 4px 0 rgba(255, 255, 255, 0.1); --ag-shadow-md: 0 2px 8px 0 rgba(255, 255, 255, 0.1); --ag-shadow-lg: 0 4px 12px 0 rgba(255, 255, 255, 0.12); --ag-shadow-xl: 0 8px 20px 0 rgba(255, 255, 255, 0.14); /* ── Rating ── */ --ag-rating-filled-primary: #4890f0; /* ── Blue palette (high-contrast blue ramp) ── */ --ag-blue-50: #e8f0fe; --ag-blue-100: #b8d4fc; --ag-blue-200: #88b8fa; --ag-blue-300: #4890f0; --ag-blue-400: #1a6ee6; --ag-blue-500: #0050d8; --ag-blue-600: #003da5; --ag-blue-700: #003078; --ag-blue-800: #002050; --ag-blue-900: #001030; } /* ═══════════════════════════════════════════════════════════════════════════ Mo Neobrut — Light ═══════════════════════════════════════════════════════════════════════════ */ /** * Mo-Neobrut Skin — Light Mode * * Modern neo-brutalist aesthetic with vibrant accent colors, bold borders, * and high-contrast design. Inspired by contemporary portfolio sites. * * Activate by adding class="ag-skin-mo-neobrut" to . * Load this file AFTER ag-tokens.css so the cascade overrides. */ :where(html).ag-skin-mo-neobrut { /* ── Primary color family (vibrant cyan/blue) ── */ --ag-primary: #00bcd4; --ag-primary-fg: #000000; --ag-primary-dark: #0097a7; --ag-primary-border: #000000; --ag-primary-background: #e0f7fa; --ag-primary-text: #006064; /* ── Focus ring (cyan-derived RGB) ── */ --ag-focus: 0, 188, 212; --ag-focus-dark: #00acc1; /* ── Semantic text (high contrast) ── */ --ag-text-primary: #000000; --ag-text-secondary: #212121; --ag-text-muted: #424242; --ag-text-primary-muted: #1a1a1a; /* ── Borders (bold black) ── */ --ag-border: #000000; --ag-border-subtle: #2a2a2a; --ag-border-width-1: 2px; /* ── Backgrounds (bright white/off-white) ── */ --ag-background-primary: #ffffff; --ag-background-secondary: #f9f9f9; --ag-background-tertiary: #eeeeee; /* ── Border radius (sharp, minimal) ── */ --ag-radius-sm: 0.125rem; --ag-radius-md: 0.25rem; --ag-radius-lg: 0.375rem; /* ── Shadows (hard, flat) ── */ --ag-shadow-xs: 2px 2px 0 0 #000000; --ag-shadow-sm: 3px 3px 0 0 #000000; --ag-shadow-md: 4px 4px 0 0 #000000; --ag-shadow-lg: 6px 6px 0 0 #000000; --ag-shadow-xl: 8px 8px 0 0 #000000; --ag-shadow-2xl: 12px 12px 0 0 #000000; /* ── Rating (vibrant yellow) ── */ --ag-rating-filled: #ffc107; --ag-rating-filled-primary: #00bcd4; /* ── Vibrant cyan palette (overrides blue palette) ── */ --ag-blue-50: #e0f7fa; --ag-blue-100: #b2ebf2; --ag-blue-200: #80deea; --ag-blue-300: #4dd0e1; --ag-blue-400: #26c6da; --ag-blue-500: #00bcd4; --ag-blue-600: #00acc1; --ag-blue-700: #0097a7; --ag-blue-800: #00838f; --ag-blue-900: #006064; } /* ═══════════════════════════════════════════════════════════════════════════ Mo Neobrut — Dark ═══════════════════════════════════════════════════════════════════════════ */ /** * Mo-Neobrut Skin — Dark Mode * * Dark-mode overrides for the Mo-Neobrut neo-brutalist aesthetic. * * Activate by adding class="ag-skin-mo-neobrut" to . * Load this file AFTER ag-tokens-dark.css so the cascade overrides. */ [data-theme="dark"].ag-skin-mo-neobrut { /* ── Primary color family (brightened cyan) ── */ --ag-primary: #26c6da; --ag-primary-fg: #000000; --ag-primary-dark: #00bcd4; --ag-primary-border: #4dd0e1; --ag-primary-background: #004d56; --ag-primary-text: #b2ebf2; /* ── Focus ring (brightened cyan-derived RGB) ── */ --ag-focus: 38, 198, 218; --ag-focus-dark: #4dd0e1; /* ── Semantic text (high contrast on dark) ── */ --ag-text-primary: #ffffff; --ag-text-secondary: #e0e0e0; --ag-text-muted: #bdbdbd; --ag-text-primary-muted: #f5f5f5; /* ── Borders (bright for visibility) ── */ --ag-border: #4a4a4a; --ag-border-subtle: #3a3a3a; --ag-border-width-1: 2px; /* ── Backgrounds (dark) ── */ --ag-background-primary: #121212; --ag-background-secondary: #1e1e1e; --ag-background-tertiary: #2a2a2a; /* ── Border radius (matches light) ── */ --ag-radius-sm: 0.125rem; --ag-radius-md: 0.25rem; --ag-radius-lg: 0.375rem; /* ── Shadows (hard, flat, visible on dark) ── */ --ag-shadow-xs: 2px 2px 0 0 #4a4a4a; --ag-shadow-sm: 3px 3px 0 0 #4a4a4a; --ag-shadow-md: 4px 4px 0 0 #4a4a4a; --ag-shadow-lg: 6px 6px 0 0 #4a4a4a; --ag-shadow-xl: 8px 8px 0 0 #4a4a4a; --ag-shadow-2xl: 12px 12px 0 0 #4a4a4a; /* ── Rating (vibrant yellow) ── */ --ag-rating-filled: #ffc107; --ag-rating-filled-primary: #26c6da; /* ── Vibrant cyan palette (overrides blue palette) ── */ --ag-blue-50: #b2ebf2; --ag-blue-100: #80deea; --ag-blue-200: #4dd0e1; --ag-blue-300: #26c6da; --ag-blue-400: #00bcd4; --ag-blue-500: #00acc1; --ag-blue-600: #0097a7; --ag-blue-700: #00838f; --ag-blue-800: #006064; --ag-blue-900: #004d56; } /* ═══════════════════════════════════════════════════════════════════════════ Monochromatic — Light ═══════════════════════════════════════════════════════════════════════════ */ /** * Monochromatic Skin — Light Mode * * A clean, sophisticated black/white/gray aesthetic inspired by modern agency sites. * Pure monochrome with subtle gray tones, no color accents. * * Activate by adding class="ag-skin-monochromatic" to . * Load this file AFTER ag-tokens.css so the cascade overrides. */ :where(html).ag-skin-monochromatic { /* ── Primary color family (pure black) ── */ --ag-primary: #000000; --ag-primary-dark: #1a1a1a; --ag-primary-border: #e0e0e0; --ag-primary-background: #f8f8f8; --ag-primary-text: #000000; /* ── Focus ring (black-derived RGB) ── */ --ag-focus: 0, 0, 0; --ag-focus-dark: #333333; /* ── Semantic text ── */ --ag-text-primary: #000000; --ag-text-secondary: #4a4a4a; --ag-text-muted: #6b6b6b; --ag-text-primary-muted: #333333; /* ── Borders ── */ --ag-border: #e5e5e5; --ag-border-subtle: #f0f0f0; /* ── Backgrounds ── */ --ag-background-primary: #ffffff; --ag-background-secondary: #fafafa; --ag-background-tertiary: #f5f5f5; /* ── Border radius (clean, moderate) ── */ --ag-radius-lg: 0.5rem; /* ── Shadows (very subtle) ── */ --ag-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04); --ag-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.06); --ag-shadow-md: 0 2px 8px 0 rgba(0, 0, 0, 0.08); --ag-shadow-lg: 0 4px 16px 0 rgba(0, 0, 0, 0.1); --ag-shadow-xl: 0 8px 24px 0 rgba(0, 0, 0, 0.12); /* ── Rating ── */ --ag-rating-filled-primary: #000000; /* ── Grayscale palette (overrides blue palette) ── */ --ag-blue-50: #fafafa; --ag-blue-100: #f5f5f5; --ag-blue-200: #e5e5e5; --ag-blue-300: #d4d4d4; --ag-blue-400: #a3a3a3; --ag-blue-500: #737373; --ag-blue-600: #525252; --ag-blue-700: #404040; --ag-blue-800: #262626; --ag-blue-900: #171717; } /* ═══════════════════════════════════════════════════════════════════════════ Monochromatic — Dark ═══════════════════════════════════════════════════════════════════════════ */ /** * Monochromatic Skin — Dark Mode * * Dark-mode overrides for the Monochromatic black/white/gray aesthetic. * * Activate by adding class="ag-skin-monochromatic" to . * Load this file AFTER ag-tokens-dark.css so the cascade overrides. */ [data-theme="dark"].ag-skin-monochromatic { /* ── Primary color family (white for dark backgrounds) ── */ --ag-primary: #ffffff; --ag-primary-fg: #000000; --ag-primary-dark: #e5e5e5; --ag-primary-border: #404040; --ag-primary-background: #1a1a1a; --ag-primary-text: #ffffff; /* ── Focus ring (white-derived RGB) ── */ --ag-focus: 255, 255, 255; --ag-focus-dark: #e5e5e5; /* ── Semantic text ── */ --ag-text-primary: #ffffff; --ag-text-secondary: #d4d4d4; --ag-text-muted: #a3a3a3; --ag-text-primary-muted: #e5e5e5; /* ── Borders ── */ --ag-border: #2a2a2a; --ag-border-subtle: #1f1f1f; /* ── Backgrounds ── */ --ag-background-primary: #0a0a0a; --ag-background-secondary: #121212; --ag-background-tertiary: #1a1a1a; /* ── Border radius (matches light) ── */ --ag-radius-lg: 0.5rem; /* ── Shadows (very subtle, white-tinted) ── */ --ag-shadow-xs: 0 1px 2px 0 rgba(255, 255, 255, 0.04); --ag-shadow-sm: 0 1px 3px 0 rgba(255, 255, 255, 0.06); --ag-shadow-md: 0 2px 8px 0 rgba(255, 255, 255, 0.08); --ag-shadow-lg: 0 4px 16px 0 rgba(255, 255, 255, 0.1); --ag-shadow-xl: 0 8px 24px 0 rgba(255, 255, 255, 0.12); /* ── Rating ── */ --ag-rating-filled-primary: #ffffff; /* ── Grayscale palette (overrides blue palette) ── */ --ag-blue-50: #fafafa; --ag-blue-100: #f5f5f5; --ag-blue-200: #e5e5e5; --ag-blue-300: #d4d4d4; --ag-blue-400: #a3a3a3; --ag-blue-500: #737373; --ag-blue-600: #525252; --ag-blue-700: #404040; --ag-blue-800: #262626; --ag-blue-900: #1a1a1a; } /* ═══════════════════════════════════════════════════════════════════════════ Muted Minimal — Light ═══════════════════════════════════════════════════════════════════════════ */ /** * Muted Minimal Skin — Light Mode * * A restrained blue-gray aesthetic inspired by HTML5UP's Read Only template. * Soft, professional, with muted colors and understated elegance. * * Activate by adding class="ag-skin-muted-minimal" to . * Load this file AFTER ag-tokens.css so the cascade overrides. */ :where(html).ag-skin-muted-minimal { /* ── Primary color family (muted blue) ── */ --ag-primary: #4a90a4; --ag-primary-fg: #000000; --ag-primary-dark: #3a7a8c; --ag-primary-border: #c5dde5; --ag-primary-background: #edf5f7; --ag-primary-text: #2d5f6f; /* ── Focus ring (muted blue-derived RGB) ── */ --ag-focus: 74, 144, 164; --ag-focus-dark: #5fa8be; /* ── Semantic text ── */ --ag-text-primary: #3a3a3a; --ag-text-secondary: #5a5a5a; --ag-text-muted: #7a7a7a; --ag-text-primary-muted: #4a4a4a; /* ── Borders ── */ --ag-border: #d8d8d8; --ag-border-subtle: #e8e8e8; /* ── Backgrounds ── */ --ag-background-primary: #fefefe; --ag-background-secondary: #f8f8f8; --ag-background-tertiary: #f0f0f0; /* ── Border radius (minimal) ── */ --ag-radius-lg: 0.25rem; /* ── Shadows (very soft) ── */ --ag-shadow-xs: 0 1px 2px 0 rgba(74, 90, 100, 0.04); --ag-shadow-sm: 0 1px 3px 0 rgba(74, 90, 100, 0.06); --ag-shadow-md: 0 2px 6px 0 rgba(74, 90, 100, 0.08); --ag-shadow-lg: 0 3px 12px 0 rgba(74, 90, 100, 0.1); --ag-shadow-xl: 0 5px 20px 0 rgba(74, 90, 100, 0.12); /* ── Rating ── */ --ag-rating-filled-primary: #4a90a4; /* ── Muted blue-gray palette (overrides blue palette) ── */ --ag-blue-50: #edf5f7; --ag-blue-100: #d5e8ed; --ag-blue-200: #b8d7e0; --ag-blue-300: #9ac5d3; --ag-blue-400: #6fa8ba; --ag-blue-500: #4a90a4; --ag-blue-600: #3a7a8c; --ag-blue-700: #2d5f6f; --ag-blue-800: #204552; --ag-blue-900: #162f38; } /* ═══════════════════════════════════════════════════════════════════════════ Muted Minimal — Dark ═══════════════════════════════════════════════════════════════════════════ */ /** * Muted Minimal Skin — Dark Mode * * Dark-mode overrides for the Muted Minimal blue-gray aesthetic. * * Activate by adding class="ag-skin-muted-minimal" to . * Load this file AFTER ag-tokens-dark.css so the cascade overrides. */ [data-theme="dark"].ag-skin-muted-minimal { /* ── Primary color family (brightened muted blue) ── */ --ag-primary: #6fa8ba; --ag-primary-fg: #000000; --ag-primary-dark: #5a95a8; --ag-primary-border: #4a7a8a; --ag-primary-background: #1a2830; --ag-primary-text: #b8d7e0; /* ── Focus ring (muted blue-derived RGB, brightened) ── */ --ag-focus: 111, 168, 186; --ag-focus-dark: #9ac5d3; /* ── Semantic text ── */ --ag-text-primary: #e5e5e5; --ag-text-secondary: #c0c0c0; --ag-text-muted: #9a9a9a; --ag-text-primary-muted: #d0d0d0; /* ── Borders ── */ --ag-border: #2a3a42; --ag-border-subtle: #222e35; /* ── Backgrounds ── */ --ag-background-primary: #0f1518; --ag-background-secondary: #161f24; --ag-background-tertiary: #1f2b32; /* ── Border radius (matches light) ── */ --ag-radius-lg: 0.25rem; /* ── Shadows (muted blue-tinted for dark mode) ── */ --ag-shadow-xs: 0 1px 2px 0 rgba(111, 168, 186, 0.08); --ag-shadow-sm: 0 1px 3px 0 rgba(111, 168, 186, 0.1); --ag-shadow-md: 0 2px 6px 0 rgba(111, 168, 186, 0.12); --ag-shadow-lg: 0 3px 12px 0 rgba(111, 168, 186, 0.14); --ag-shadow-xl: 0 5px 20px 0 rgba(111, 168, 186, 0.16); /* ── Rating ── */ --ag-rating-filled-primary: #6fa8ba; /* ── Muted blue-gray palette (overrides blue palette) ── */ --ag-blue-50: #d5e8ed; --ag-blue-100: #b8d7e0; --ag-blue-200: #9ac5d3; --ag-blue-300: #7cb3c6; --ag-blue-400: #6fa8ba; --ag-blue-500: #5a95a8; --ag-blue-600: #4a7a8a; --ag-blue-700: #3a606e; --ag-blue-800: #2a4652; --ag-blue-900: #1a2830; } /* ═══════════════════════════════════════════════════════════════════════════ Neons On Black — Light ═══════════════════════════════════════════════════════════════════════════ */ /** * Neons On Black Skin — Light Mode * * Vibrant neon colors on dark backgrounds inspired by cyberpunk aesthetics. * Note: "Light mode" here is actually dark to maintain the neon-on-black aesthetic. * * Activate by adding class="ag-skin-neons-on-black" to . * Load this file AFTER ag-tokens.css so the cascade overrides. */ :where(html).ag-skin-neons-on-black { /* ── Primary color family (neon cyan) ── */ --ag-primary: #00ffff; --ag-primary-fg: #000000; --ag-primary-dark: #00e5e5; --ag-primary-border: #00cccc; --ag-primary-background: #001a1a; --ag-primary-text: #00ffff; /* ── Focus ring (neon cyan-derived RGB) ── */ --ag-focus: 0, 255, 255; --ag-focus-dark: #66ffff; /* ── Semantic text (bright on dark) ── */ --ag-text-primary: #ffffff; --ag-text-secondary: #e0e0e0; --ag-text-muted: #a0a0a0; --ag-text-primary-muted: #f0f0f0; /* ── Borders (subtle neon glow) ── */ --ag-border: #1a1a2e; --ag-border-subtle: #0f0f1e; /* ── Backgrounds (deep black/near-black) ── */ --ag-background-primary: #000000; --ag-background-secondary: #0a0a0a; --ag-background-tertiary: #141414; /* ── Border radius (sharp, modern) ── */ --ag-radius-lg: 0.25rem; /* ── Shadows (neon glow effects) ── */ --ag-shadow-xs: 0 0 4px 0 rgba(0, 255, 255, 0.3); --ag-shadow-sm: 0 0 8px 0 rgba(0, 255, 255, 0.4); --ag-shadow-md: 0 0 12px 0 rgba(0, 255, 255, 0.5); --ag-shadow-lg: 0 0 20px 0 rgba(0, 255, 255, 0.6); --ag-shadow-xl: 0 0 30px 0 rgba(0, 255, 255, 0.7); /* ── Rating (neon magenta) ── */ --ag-rating-filled: #ff00ff; --ag-rating-filled-primary: #00ffff; /* ── Neon color palette (overrides blue palette) ── */ --ag-blue-50: #e6ffff; --ag-blue-100: #ccffff; --ag-blue-200: #99ffff; --ag-blue-300: #66ffff; --ag-blue-400: #33ffff; --ag-blue-500: #00ffff; --ag-blue-600: #00e5e5; --ag-blue-700: #00cccc; --ag-blue-800: #009999; --ag-blue-900: #006666; /* ── Accent colors (additional neons) ── */ --ag-success: #00ff00; --ag-success-fg: #000000; --ag-warning: #ffff00; --ag-danger: #ff00ff; --ag-danger-fg: #000000; --ag-info: #ff00cc; } /* ═══════════════════════════════════════════════════════════════════════════ Neons On Black — Dark ═══════════════════════════════════════════════════════════════════════════ */ /** * Neons On Black Skin — Dark Mode * * Intensified neon effects for dark mode preference. * * Activate by adding class="ag-skin-neons-on-black" to . * Load this file AFTER ag-tokens-dark.css so the cascade overrides. */ [data-theme="dark"].ag-skin-neons-on-black { /* ── Primary color family (brighter neon cyan) ── */ --ag-primary: #33ffff; --ag-primary-fg: #000000; --ag-primary-dark: #00ffff; --ag-primary-border: #00e5e5; --ag-primary-background: #002020; --ag-primary-text: #ccffff; /* ── Focus ring (brightened neon cyan-derived RGB) ── */ --ag-focus: 51, 255, 255; --ag-focus-dark: #99ffff; /* ── Semantic text (ultra bright on deep black) ── */ --ag-text-primary: #ffffff; --ag-text-secondary: #f0f0f0; --ag-text-muted: #b0b0b0; --ag-text-primary-muted: #fafafa; /* ── Borders (visible neon glow) ── */ --ag-border: #1a2a3a; --ag-border-subtle: #0f1a2a; /* ── Backgrounds (pure black) ── */ --ag-background-primary: #000000; --ag-background-secondary: #050505; --ag-background-tertiary: #0f0f0f; /* ── Border radius (matches light) ── */ --ag-radius-lg: 0.25rem; /* ── Shadows (intensified neon glow) ── */ --ag-shadow-xs: 0 0 6px 0 rgba(51, 255, 255, 0.4); --ag-shadow-sm: 0 0 12px 0 rgba(51, 255, 255, 0.5); --ag-shadow-md: 0 0 18px 0 rgba(51, 255, 255, 0.6); --ag-shadow-lg: 0 0 28px 0 rgba(51, 255, 255, 0.7); --ag-shadow-xl: 0 0 40px 0 rgba(51, 255, 255, 0.8); /* ── Rating (neon magenta) ── */ --ag-rating-filled: #ff33ff; --ag-rating-filled-primary: #33ffff; /* ── Neon color palette (overrides blue palette) ── */ --ag-blue-50: #e6ffff; --ag-blue-100: #ccffff; --ag-blue-200: #99ffff; --ag-blue-300: #66ffff; --ag-blue-400: #33ffff; --ag-blue-500: #00ffff; --ag-blue-600: #00e5e5; --ag-blue-700: #00cccc; --ag-blue-800: #009999; --ag-blue-900: #006666; /* ── Accent colors (brighter neons) ── */ --ag-success: #33ff33; --ag-success-fg: #000000; --ag-warning: #ffff33; --ag-danger: #ff33ff; --ag-danger-fg: #000000; --ag-info: #ff33cc; } /* ═══════════════════════════════════════════════════════════════════════════ Retro Brutalist — Light ═══════════════════════════════════════════════════════════════════════════ */ /** * Retro Brutalist Skin — Light Mode * * A neo-brutalist aesthetic with hard offset shadows, bold yellow primary, * thick black borders, and zero border radius. Inspired by retroui.dev. * * Activate by adding class="ag-skin-retro-brutalist" to . * Load this file AFTER ag-tokens.css so the cascade overrides. */ :where(html).ag-skin-retro-brutalist { /* ── Primary color family ── */ --ag-primary: #ffdb33; --ag-primary-fg: #000000; --ag-primary-dark: #ffcc00; --ag-primary-border: #000000; --ag-primary-background: #fef9e7; --ag-primary-text: #000000; /* ── Focus ring (black for high contrast) ── */ --ag-focus: 0, 0, 0; --ag-focus-dark: #000000; /* ── Semantic text ── */ --ag-text-primary: #000000; --ag-text-secondary: #3a3a3a; --ag-text-muted: #5a5a5a; --ag-text-primary-muted: #3a3a3a; /* ── Borders (thick black, neo-brutalist signature) ── */ --ag-border: #000000; --ag-border-subtle: #000000; --ag-border-width-1: 2px; /* ── Backgrounds ── */ --ag-background-primary: #ffffff; --ag-background-secondary: #f5f5f5; --ag-background-tertiary: #d5d5d5; /* ── Border radius (flat/none — brutalist) ── */ --ag-radius-sm: 0; --ag-radius-md: 0; --ag-radius-lg: 0; /* ── Shadows (hard offset, no blur — neo-brutalist signature) ── */ --ag-shadow-xs: 1px 1px 0 0 #000000; --ag-shadow-sm: 2px 2px 0 0 #000000; --ag-shadow-md: 3px 3px 0 0 #000000; --ag-shadow-lg: 4px 4px 0 0 #000000; --ag-shadow-xl: 6px 6px 0 0 #000000; --ag-shadow-2xl: 10px 10px 0 1px #000000; /* ── Danger (vivid red) ── */ --ag-danger: #e63946; --ag-danger-fg: #000000; --ag-danger-rgb: 230, 57, 70; --ag-danger-dark: #c5303f; /* ── Rating ── */ --ag-rating-filled: #ffcc00; --ag-rating-filled-primary: #ffdb33; /* ── Yellow palette (overrides blue palette for primary usage) ── */ --ag-blue-50: #fef9e7; --ag-blue-100: #fdf0c4; --ag-blue-200: #fae583; --ag-blue-300: #ffdb33; --ag-blue-400: #ffcc00; --ag-blue-500: #e6b800; --ag-blue-600: #c49e00; --ag-blue-700: #9a7c00; --ag-blue-800: #705a00; --ag-blue-900: #463800; } /* ═══════════════════════════════════════════════════════════════════════════ Retro Brutalist — Dark ═══════════════════════════════════════════════════════════════════════════ */ /** * Retro Brutalist Skin — Dark Mode * * Dark-mode overrides for the neo-brutalist hard-shadow aesthetic. * Inspired by retroui.dev. * * Activate by adding class="ag-skin-retro-brutalist" to . * Load this file AFTER ag-tokens-dark.css so the cascade overrides. */ [data-theme="dark"].ag-skin-retro-brutalist { /* ── Primary color family ── */ --ag-primary: #ffdb33; --ag-primary-fg: #000000; --ag-primary-dark: #ffcc00; --ag-primary-border: #5c5c5c; --ag-primary-background: #2e2a1a; --ag-primary-text: #ffdb33; /* ── Focus ring (yellow for visibility on dark) ── */ --ag-focus: 255, 219, 51; --ag-focus-dark: #ffcc00; /* ── Semantic text ── */ --ag-text-primary: #f5f5f5; --ag-text-secondary: #d0d0d0; --ag-text-muted: #a0a0a0; --ag-text-primary-muted: #d0d0d0; /* ── Borders (gray for dark mode visibility) ── */ --ag-border: #5c5c5c; --ag-border-subtle: #3f3f46; --ag-border-width-1: 2px; /* ── Backgrounds ── */ --ag-background-primary: #1a1a1a; --ag-background-secondary: #242424; --ag-background-tertiary: #3a3a3a; /* ── Border radius (flat/none — brutalist) ── */ --ag-radius-sm: 0; --ag-radius-md: 0; --ag-radius-lg: 0; /* ── Shadows (hard offset with gray border for dark mode) ── */ --ag-shadow-xs: 1px 1px 0 0 #5c5c5c; --ag-shadow-sm: 2px 2px 0 0 #5c5c5c; --ag-shadow-md: 3px 3px 0 0 #5c5c5c; --ag-shadow-lg: 4px 4px 0 0 #5c5c5c; --ag-shadow-xl: 6px 6px 0 0 #5c5c5c; --ag-shadow-2xl: 10px 10px 0 1px #5c5c5c; /* ── Danger ── */ --ag-danger: #e63946; --ag-danger-fg: #000000; --ag-danger-rgb: 230, 57, 70; --ag-danger-dark: #ff5a67; /* ── Rating ── */ --ag-rating-filled: #ffcc00; --ag-rating-filled-primary: #ffdb33; /* ── Yellow palette (overrides blue palette for primary usage) ── */ --ag-blue-50: #fdf0c4; --ag-blue-100: #fae583; --ag-blue-200: #ffdb33; --ag-blue-300: #ffcc00; --ag-blue-400: #e6b800; --ag-blue-500: #c49e00; --ag-blue-600: #9a7c00; --ag-blue-700: #705a00; --ag-blue-800: #463800; --ag-blue-900: #2e2a1a; } /* ═══════════════════════════════════════════════════════════════════════════ Rose Blush — Light ═══════════════════════════════════════════════════════════════════════════ */ /** * Rose Blush Skin — Light Mode * * Soft pink-rose with warm undertones. Modern, elegant, and approachable. * Inspired by rose quartz tones and contemporary SaaS design. * * Activate by adding class="ag-skin-rose-blush" to . * Load this file AFTER ag-tokens.css so the cascade overrides. */ :where(html).ag-skin-rose-blush { /* ── Primary color family ── */ --ag-primary: #e11d73; --ag-primary-dark: #be185d; --ag-primary-border: #fbb6ce; --ag-primary-background: #fff1f5; --ag-primary-text: #9d174d; /* ── Focus ring (rose-derived RGB) ── */ --ag-focus: 225, 29, 115; --ag-focus-dark: #be185d; /* ── Semantic text ── */ --ag-text-primary: #1a1a2e; --ag-text-secondary: #4a4560; --ag-text-muted: #9091a4; --ag-text-primary-muted: #3d3852; /* ── Borders ── */ --ag-border: #f0e0e6; --ag-border-subtle: #f5eaef; /* ── Backgrounds ── */ --ag-background-secondary: #fdf6f8; --ag-background-tertiary: #f9eff3; /* ── Border radius (soft, rounded) ── */ --ag-radius-lg: 1rem; /* ── Shadows (warm pink-tinted) ── */ --ag-shadow-xs: 0 1px 3px 0 rgba(225, 29, 115, 0.06); --ag-shadow-sm: 0 1px 5px 0 rgba(225, 29, 115, 0.08); --ag-shadow-md: 0 2px 10px 0 rgba(225, 29, 115, 0.08); --ag-shadow-lg: 0 4px 18px -2px rgba(225, 29, 115, 0.1); --ag-shadow-xl: 0 8px 28px -4px rgba(225, 29, 115, 0.12); /* ── Rating ── */ --ag-rating-filled: #f59e0b; --ag-rating-filled-primary: #e11d73; /* ── Rose palette (overrides blue palette) ── */ --ag-blue-50: #fff1f5; --ag-blue-100: #ffe4ed; --ag-blue-200: #fbb6ce; --ag-blue-300: #f687a8; --ag-blue-400: #ec4899; --ag-blue-500: #e11d73; --ag-blue-600: #be185d; --ag-blue-700: #9d174d; --ag-blue-800: #831843; --ag-blue-900: #500724; } /* ═══════════════════════════════════════════════════════════════════════════ Rose Blush — Dark ═══════════════════════════════════════════════════════════════════════════ */ /** * Rose Blush Skin — Dark Mode * * Dark-mode overrides for the Rose Blush pink-rose aesthetic. * * Activate by adding class="ag-skin-rose-blush" to . * Load this file AFTER ag-tokens-dark.css so the cascade overrides. */ [data-theme="dark"].ag-skin-rose-blush { /* ── Primary color family (brightened for dark backgrounds) ── */ --ag-primary: #ec4899; --ag-primary-fg: #000000; --ag-primary-dark: #e11d73; --ag-primary-border: #ec4899; --ag-primary-background: #2a0a1e; --ag-primary-text: #fbb6ce; /* ── Focus ring (rose-derived RGB, brightened) ── */ --ag-focus: 236, 72, 153; --ag-focus-dark: #f687a8; /* ── Semantic text ── */ --ag-text-primary: #fdf2f6; --ag-text-secondary: #d4b8c8; --ag-text-muted: #a08898; --ag-text-primary-muted: #e8cede; /* ── Borders ── */ --ag-border: #3d1a2e; --ag-border-subtle: #5a2844; /* ── Backgrounds ── */ --ag-background-secondary: #1a0a14; --ag-background-tertiary: #2e1424; /* ── Border radius (matches light) ── */ --ag-radius-lg: 1rem; /* ── Shadows (rose-tinted for dark mode) ── */ --ag-shadow-xs: 0 1px 3px 0 rgba(236, 72, 153, 0.08); --ag-shadow-sm: 0 1px 5px 0 rgba(236, 72, 153, 0.1); --ag-shadow-md: 0 2px 10px 0 rgba(236, 72, 153, 0.1); --ag-shadow-lg: 0 4px 18px -2px rgba(236, 72, 153, 0.12); --ag-shadow-xl: 0 8px 28px -4px rgba(236, 72, 153, 0.14); /* ── Rating ── */ --ag-rating-filled: #fbbf24; --ag-rating-filled-primary: #ec4899; /* ── Rose palette (overrides blue palette) ── */ --ag-blue-50: #fbb6ce; --ag-blue-100: #f687a8; --ag-blue-200: #ec4899; --ag-blue-300: #e11d73; --ag-blue-400: #be185d; --ag-blue-500: #9d174d; --ag-blue-600: #831843; --ag-blue-700: #6b1038; --ag-blue-800: #500724; --ag-blue-900: #2a0a1e; } /* ═══════════════════════════════════════════════════════════════════════════ Sage — Light ═══════════════════════════════════════════════════════════════════════════ */ /** * Sage Skin — Light Mode * * Soft, earthy sage green with muted natural tones. Calm and organic, * inspired by botanical gardens and wellness design. * * Activate by adding class="ag-skin-sage" to . * Load this file AFTER ag-tokens.css so the cascade overrides. */ :where(html).ag-skin-sage { /* ── Primary color family (muted sage green) ── */ --ag-primary: #5f8a6e; --ag-primary-fg: #000000; --ag-primary-dark: #4a7258; --ag-primary-border: #b8d4c0; --ag-primary-background: #f0f7f2; --ag-primary-text: #3a5c44; /* ── Focus ring (sage-derived RGB) ── */ --ag-focus: 95, 138, 110; --ag-focus-dark: #4a7258; /* ── Semantic text ── */ --ag-text-primary: #1a2e20; --ag-text-secondary: #4a5c50; --ag-text-muted: #7a8c80; --ag-text-primary-muted: #344a3c; /* ── Borders ── */ --ag-border: #d8e6dc; --ag-border-subtle: #e4ede7; /* ── Backgrounds ── */ --ag-background-secondary: #f6faf7; --ag-background-tertiary: #edf4ef; /* ── Border radius (organic, rounded) ── */ --ag-radius-lg: 1rem; /* ── Shadows (green-tinted, soft) ── */ --ag-shadow-xs: 0 1px 3px 0 rgba(95, 138, 110, 0.06); --ag-shadow-sm: 0 1px 5px 0 rgba(95, 138, 110, 0.08); --ag-shadow-md: 0 2px 10px 0 rgba(95, 138, 110, 0.08); --ag-shadow-lg: 0 4px 18px -2px rgba(95, 138, 110, 0.1); --ag-shadow-xl: 0 8px 28px -4px rgba(95, 138, 110, 0.12); /* ── Rating ── */ --ag-rating-filled: #c4a04e; --ag-rating-filled-primary: #5f8a6e; /* ── Sage palette (overrides blue palette) ── */ --ag-blue-50: #f0f7f2; --ag-blue-100: #d4e8da; --ag-blue-200: #b8d4c0; --ag-blue-300: #8fbc9c; --ag-blue-400: #6ea07e; --ag-blue-500: #5f8a6e; --ag-blue-600: #4a7258; --ag-blue-700: #3a5c44; --ag-blue-800: #2a4432; --ag-blue-900: #1a2e20; } /* ═══════════════════════════════════════════════════════════════════════════ Sage — Dark ═══════════════════════════════════════════════════════════════════════════ */ /** * Sage Skin — Dark Mode * * Dark-mode overrides for the Sage green aesthetic. * Deep forest backgrounds with luminous sage highlights. * * Activate by adding class="ag-skin-sage" to . * Load this file AFTER ag-tokens-dark.css so the cascade overrides. */ [data-theme="dark"].ag-skin-sage { /* ── Primary color family (brightened for dark backgrounds) ── */ --ag-primary: #8fbc9c; --ag-primary-fg: #000000; --ag-primary-dark: #6ea07e; --ag-primary-border: #5f8a6e; --ag-primary-background: #0e1e14; --ag-primary-text: #b8d4c0; /* ── Focus ring (sage-derived RGB, brightened) ── */ --ag-focus: 143, 188, 156; --ag-focus-dark: #b8d4c0; /* ── Semantic text ── */ --ag-text-primary: #eaf2ec; --ag-text-secondary: #bccebe; --ag-text-muted: #88a08c; --ag-text-primary-muted: #d4e4d8; /* ── Borders ── */ --ag-border: #253830; --ag-border-subtle: #3a5444; /* ── Backgrounds ── */ --ag-background-secondary: #0c1a12; --ag-background-tertiary: #1e3228; /* ── Border radius (matches light) ── */ --ag-radius-lg: 1rem; /* ── Shadows (sage-tinted for dark mode) ── */ --ag-shadow-xs: 0 1px 3px 0 rgba(143, 188, 156, 0.06); --ag-shadow-sm: 0 1px 5px 0 rgba(143, 188, 156, 0.08); --ag-shadow-md: 0 2px 10px 0 rgba(143, 188, 156, 0.08); --ag-shadow-lg: 0 4px 18px -2px rgba(143, 188, 156, 0.1); --ag-shadow-xl: 0 8px 28px -4px rgba(143, 188, 156, 0.12); /* ── Rating ── */ --ag-rating-filled: #c4a04e; --ag-rating-filled-primary: #8fbc9c; /* ── Sage palette (overrides blue palette) ── */ --ag-blue-50: #d4e8da; --ag-blue-100: #b8d4c0; --ag-blue-200: #8fbc9c; --ag-blue-300: #6ea07e; --ag-blue-400: #5f8a6e; --ag-blue-500: #4a7258; --ag-blue-600: #3a5c44; --ag-blue-700: #2a4432; --ag-blue-800: #1a2e20; --ag-blue-900: #0e1e14; } /* ═══════════════════════════════════════════════════════════════════════════ Terra Soft — Light ═══════════════════════════════════════════════════════════════════════════ */ /** * Terra Soft Skin — Light Mode * * A warm orange-coral and golden aesthetic with soft, rounded forms. * * Activate by adding class="ag-skin-terra-soft" to . * Load this file AFTER ag-tokens.css so the cascade overrides. */ :where(html).ag-skin-terra-soft { /* ── Primary color family ── */ --ag-primary: #ff6a3e; --ag-primary-fg: #000000; --ag-primary-dark: #e55530; --ag-primary-border: #ffd4c4; --ag-primary-background: #fff4f0; --ag-primary-text: #9e3318; /* ── Focus ring (orange-derived RGB) ── */ --ag-focus: 255, 106, 62; --ag-focus-dark: #e55530; /* ── Semantic text ── */ --ag-text-primary: #1a1a1a; --ag-text-secondary: #4e4b66; --ag-text-muted: #4e4b66; --ag-text-primary-muted: #4e4b66; /* ── Borders ── */ --ag-border: #ede5df; --ag-border-subtle: #e0d6ce; /* ── Backgrounds ── */ --ag-background-secondary: #FBF5F1; --ag-background-tertiary: #f3ebe5; /* ── Border radius (rounder, matching CodeStitch's generous radii) ── */ --ag-radius-lg: 1.25rem; /* ── Shadows (soft, warm) ── */ --ag-shadow-xs: 0 1px 3px 0 rgba(149, 157, 165, 0.12); --ag-shadow-sm: 0 1px 5px 0 rgba(149, 157, 165, 0.16); --ag-shadow-md: 0 2px 10px 0 rgba(149, 157, 165, 0.16); --ag-shadow-lg: 0 4px 18px -2px rgba(149, 157, 165, 0.2); --ag-shadow-xl: 0 8px 28px -4px rgba(149, 157, 165, 0.2); /* ── Rating ── */ --ag-rating-filled: #ffba43; --ag-rating-filled-primary: #ff6a3e; /* ── Orange palette (overrides blue palette for primary usage) ── */ --ag-blue-50: #fff4f0; --ag-blue-100: #ffd4c4; --ag-blue-200: #ffb89e; --ag-blue-300: #ff9a78; --ag-blue-400: #ff6a3e; --ag-blue-500: #e55530; --ag-blue-600: #c44425; --ag-blue-700: #9e3318; --ag-blue-800: #7a2510; --ag-blue-900: #571808; } /* ═══════════════════════════════════════════════════════════════════════════ Terra Soft — Dark ═══════════════════════════════════════════════════════════════════════════ */ /** * Terra Soft Skin — Dark Mode * * Dark-mode overrides for the Terra Soft warm orange-coral aesthetic. * * Activate by adding class="ag-skin-terra-soft" to . * Load this file AFTER ag-tokens-dark.css so the cascade overrides. */ [data-theme="dark"].ag-skin-terra-soft { /* ── Primary color family (brightened for dark backgrounds) ── */ --ag-primary: #ff8a62; --ag-primary-fg: #000000; --ag-primary-dark: #ff6a3e; --ag-primary-border: #ff8a62; --ag-primary-background: #2e1a12; --ag-primary-text: #ffd4c4; /* ── Focus ring (orange-derived RGB, brightened) ── */ --ag-focus: 255, 138, 98; --ag-focus-dark: #ffb89e; /* ── Semantic text ── */ --ag-text-primary: #f5ebe4; --ag-text-secondary: #d4c4b8; --ag-text-primary-muted: #e0cfc6; /* ── Borders ── */ --ag-border: #3d2e26; --ag-border-subtle: #5a4438; /* ── Backgrounds ── */ --ag-background-secondary: #1a1210; --ag-background-tertiary: #2e2420; /* ── Border radius (matches light) ── */ --ag-radius-lg: 1.25rem; /* ── Shadows (warm-tinted for dark mode) ── */ --ag-shadow-xs: 0 1px 3px 0 rgba(255, 106, 62, 0.08); --ag-shadow-sm: 0 1px 5px 0 rgba(255, 106, 62, 0.1); --ag-shadow-md: 0 2px 10px 0 rgba(255, 106, 62, 0.1); --ag-shadow-lg: 0 4px 18px -2px rgba(255, 106, 62, 0.12); --ag-shadow-xl: 0 8px 28px -4px rgba(255, 106, 62, 0.14); /* ── Rating ── */ --ag-rating-filled: #ffba43; --ag-rating-filled-primary: #ff8a62; /* ── Orange palette (overrides blue palette for primary usage) ── */ --ag-blue-50: #ffd4c4; --ag-blue-100: #ffb89e; --ag-blue-200: #ff9a78; --ag-blue-300: #ff8a62; --ag-blue-400: #ff6a3e; --ag-blue-500: #e55530; --ag-blue-600: #c44425; --ag-blue-700: #9e3318; --ag-blue-800: #5a2210; --ag-blue-900: #2e1a12; }