/** * QuestGate Color Schemes v2.0.0 * Complete CSS color scheme definitions for external use * * Source of Truth: src/index.css * Last updated: 2025-12-28 * * Available schemes: color-default, color-mystic, color-forest, * color-fantasy, color-scifi, color-dnd, color-steampunk, color-cyberpunk, * color-volcanic, color-arctic * * Usage: Add class "color-{scheme}" to root element (e.g., "color-default") * For light mode: Add "light" class alongside the color scheme class * * Font System: * - Headings: Cinzel (fantasy/medieval decorative serif) * - Body: EB Garamond (elegant serif for readability) * - UI: Inter (clean sans-serif for interface elements) * - Russian fallback: Play font for Cyrillic headings */ /* ============================================ FONT IMPORTS ============================================ */ /* Fonts loaded via index.html — no @import needed here */ /* ============================================ BASE DARK THEME (Default Dark Slate / Artifact Gold) ============================================ */ :root { /* Dark Slate Backgrounds */ --background: oklch(0.2064 0.0388 265.55); --foreground: oklch(0.9206 0.0251 78.2); /* Card & Surface Colors */ --card: oklch(0.2346 0.0478 265.36); --card-foreground: oklch(0.9206 0.0251 78.2); --popover: oklch(0.2346 0.0478 265.36); --popover-foreground: oklch(0.9206 0.0251 78.2); /* Artifact Gold - Primary Brand Color */ --primary: oklch(0.7627 0.1509 71.45); --primary-foreground: oklch(0.2064 0.0388 265.55); --primary-glow: oklch(0.8237 0.1401 74.44); /* Secondary - Lighter Slate */ --secondary: oklch(0.2971 0.044 266.03); --secondary-foreground: oklch(0.9206 0.0251 78.2); /* Muted Surfaces */ --muted: oklch(0.2695 0.0383 266.09); --muted-foreground: oklch(0.6592 0.0435 264.21); /* Rune Emerald - Accent Color */ --accent: oklch(0.7733 0.1523 163.3); --accent-foreground: oklch(0.2064 0.0388 265.55); --accent-glow: oklch(0.8354 0.1464 165.17); /* Accent Ruby - Destructive/Important Actions */ --destructive: oklch(0.5786 0.2137 27.17); --destructive-foreground: oklch(1 0 0); /* Borders & Inputs */ --border: oklch(0.3419 0.0531 265.94); --input: oklch(0.2971 0.044 266.03); --ring: oklch(0.7627 0.1509 71.45); --radius: 0.5rem; /* Sidebar Colors */ --sidebar-background: oklch(0.2064 0.0388 265.55); --sidebar-foreground: oklch(0.9206 0.0251 78.2); --sidebar-primary: oklch(0.7627 0.1509 71.45); --sidebar-primary-foreground: oklch(0.2064 0.0388 265.55); --sidebar-accent: oklch(0.2971 0.044 266.03); --sidebar-accent-foreground: oklch(0.9206 0.0251 78.2); --sidebar-border: oklch(0.3419 0.0531 265.94); --sidebar-ring: oklch(0.7627 0.1509 71.45); /* Fantasy Theme Specific */ --gold-shimmer: oklch(0.8513 0.1294 75.58); --emerald-glow: oklch(0.8354 0.1464 165.17); --ruby-glow: oklch(0.6414 0.204 25.01); --slate-deep: oklch(0.1773 0.0294 265.82); /* Gradients */ --gradient-gold: linear-gradient(135deg, hsl(36 84% 55%), hsl(45 100% 70%)); --gradient-emerald: linear-gradient(135deg, var(--accent), var(--accent-glow)); --gradient-slate: linear-gradient(180deg, var(--card), var(--slate-deep)); --gradient-primary: linear-gradient(135deg, hsl(36 84% 50%), hsl(50 100% 65%)); --gradient-secondary: linear-gradient(135deg, var(--card), var(--slate-deep)); --gradient-card: linear-gradient(180deg, var(--card), var(--slate-deep)); /* Shadows with color */ --shadow-gold: 0 10px 40px -10px color-mix(in oklab, var(--primary) 40%, transparent); --shadow-emerald: 0 10px 40px -10px color-mix(in oklab, var(--accent) 30%, transparent); --shadow-slate: 0 4px 20px -4px hsl(222 47% 8% / 0.5); --shadow-glow: 0 10px 40px -10px color-mix(in oklab, var(--primary) 40%, transparent); --shadow-card: 0 4px 20px -4px hsl(222 47% 8% / 0.5); /* Transitions */ --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* >>> generated by scripts/gen-design-tokens.mjs — do not edit by hand */ /* body text: re-solved against the worst surface in this set */ --muted-foreground: oklch(0.7945 0.0435 264.21); /* -text role: readable on a surface, unlike the fill of the same name */ --primary-text: oklch(0.7998 0.1509 71.45); --accent-text: oklch(0.7733 0.1523 163.3); --destructive-text: oklch(0.8054 0.1108 27.17); /* status: hue pulled toward this scheme, clamped to its window */ --success: oklch(0.7736 0.1523 160); --success-foreground: oklch(0.2064 0.0388 265.55); --warning: oklch(0.7998 0.1523 71.45); --warning-foreground: oklch(0.2064 0.0388 265.55); --info: oklch(0.7864 0.1273 234.98); --info-foreground: oklch(0.2064 0.0388 265.55); /* rarity: hue pulled toward this scheme, clamped to its window */ --rarity-rare: oklch(0.8003 0.1048 285); --rarity-rare-foreground: oklch(0.2064 0.0388 265.55); --rarity-epic: oklch(0.8114 0.1523 327); --rarity-epic-foreground: oklch(0.2064 0.0388 265.55); --rarity-legendary: oklch(0.8307 0.0762 83.39); --rarity-legendary-foreground: oklch(0.2064 0.0388 265.55); /* <<< end generated */ } /* ============================================ BASE LIGHT THEME ============================================ */ .light { /* Light Fantasy Theme */ --background: oklch(0.9745 0.0101 78.28); --foreground: oklch(0.2064 0.0388 265.55); --card: oklch(1 0 0); --card-foreground: oklch(0.2064 0.0388 265.55); --popover: oklch(1 0 0); --popover-foreground: oklch(0.2064 0.0388 265.55); --primary: oklch(0.6847 0.1456 68.49); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.9443 0.0111 78.27); --secondary-foreground: oklch(0.2064 0.0388 265.55); --muted: oklch(0.9583 0.0083 78.28); --muted-foreground: oklch(0.4824 0.0487 266.56); --accent: oklch(0.6468 0.1209 164.24); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.5786 0.2137 27.17); --destructive-foreground: oklch(1 0 0); --border: oklch(0.8915 0.0141 78.26); --input: oklch(0.928 0.0093 78.28); --ring: oklch(0.6847 0.1456 68.49); /* >>> generated by scripts/gen-design-tokens.mjs — do not edit by hand */ /* body text: re-solved against the worst surface in this set */ --muted-foreground: oklch(0.4824 0.0487 266.56); /* -text role: readable on a surface, unlike the fill of the same name */ --primary-text: oklch(0.5716 0.125 68.49); --accent-text: oklch(0.5486 0.1165 164.24); --destructive-text: oklch(0.5786 0.2137 27.17); /* status: hue pulled toward this scheme, clamped to its window */ --success: oklch(0.551 0.1131 160); --success-foreground: oklch(1 0 0); --warning: oklch(0.5712 0.1083 70); --warning-foreground: oklch(1 0 0); --info: oklch(0.5598 0.1061 235); --info-foreground: oklch(1 0 0); /* rarity: hue pulled toward this scheme, clamped to its window */ --rarity-rare: oklch(0.5757 0.1456 279.5); --rarity-rare-foreground: oklch(1 0 0); --rarity-epic: oklch(0.5826 0.1456 321); --rarity-epic-foreground: oklch(1 0 0); --rarity-legendary: oklch(0.498 0.0887 85.2); --rarity-legendary-foreground: oklch(0.9745 0.0101 78.28); /* <<< end generated */ } /* ============================================ DEFAULT SCHEME - Gold & Emerald Dark slate background with artifact gold primary and rune emerald accent ============================================ */ .color-default { --background: oklch(0.2064 0.0388 265.55); --foreground: oklch(0.9206 0.0251 78.2); --card: oklch(0.2346 0.0478 265.36); --card-foreground: oklch(0.9206 0.0251 78.2); --popover: oklch(0.2346 0.0478 265.36); --popover-foreground: oklch(0.9206 0.0251 78.2); --primary: oklch(0.7627 0.1509 71.45); --primary-foreground: oklch(0.2064 0.0388 265.55); --primary-glow: oklch(0.8237 0.1401 74.44); --secondary: oklch(0.2971 0.044 266.03); --secondary-foreground: oklch(0.9206 0.0251 78.2); --muted: oklch(0.2695 0.0383 266.09); --muted-foreground: oklch(0.6592 0.0435 264.21); --accent: oklch(0.7733 0.1523 163.3); --accent-foreground: oklch(0.2064 0.0388 265.55); --accent-glow: oklch(0.8354 0.1464 165.17); --destructive: oklch(0.5786 0.2137 27.17); --destructive-foreground: oklch(1 0 0); --border: oklch(0.3419 0.0531 265.94); --input: oklch(0.2971 0.044 266.03); --ring: oklch(0.7627 0.1509 71.45); --radius: 0.5rem; /* Gradients */ --gradient-gold: linear-gradient(135deg, hsl(36 84% 55%), hsl(45 100% 70%)); --gradient-emerald: linear-gradient(135deg, var(--accent), var(--accent-glow)); --gradient-slate: linear-gradient(180deg, var(--card), var(--slate-deep)); --gradient-primary: linear-gradient(135deg, hsl(36 84% 50%), hsl(50 100% 65%)); --gradient-secondary: linear-gradient(135deg, var(--card), hsl(222 47% 8%)); --gradient-card: linear-gradient(180deg, var(--card), hsl(222 47% 8%)); /* Shadows */ --shadow-gold: 0 10px 40px -10px color-mix(in oklab, var(--primary) 40%, transparent); --shadow-emerald: 0 10px 40px -10px color-mix(in oklab, var(--accent) 30%, transparent); --shadow-slate: 0 4px 20px -4px hsl(222 47% 8% / 0.5); --shadow-glow: 0 10px 40px -10px color-mix(in oklab, var(--primary) 40%, transparent); --shadow-card: 0 4px 20px -4px hsl(222 47% 8% / 0.5); /* Sidebar */ --sidebar-background: oklch(0.2064 0.0388 265.55); --sidebar-foreground: oklch(0.9206 0.0251 78.2); --sidebar-primary: oklch(0.7627 0.1509 71.45); --sidebar-primary-foreground: oklch(0.2064 0.0388 265.55); --sidebar-accent: oklch(0.2971 0.044 266.03); --sidebar-accent-foreground: oklch(0.9206 0.0251 78.2); --sidebar-border: oklch(0.3419 0.0531 265.94); --sidebar-ring: oklch(0.7627 0.1509 71.45); /* >>> generated by scripts/gen-design-tokens.mjs — do not edit by hand */ /* body text: re-solved against the worst surface in this set */ --muted-foreground: oklch(0.7945 0.0435 264.21); /* -text role: readable on a surface, unlike the fill of the same name */ --primary-text: oklch(0.7998 0.1509 71.45); --accent-text: oklch(0.7733 0.1523 163.3); --destructive-text: oklch(0.8054 0.1108 27.17); /* status: hue pulled toward this scheme, clamped to its window */ --success: oklch(0.7736 0.1523 160); --success-foreground: oklch(0.2064 0.0388 265.55); --warning: oklch(0.7998 0.1523 71.45); --warning-foreground: oklch(0.2064 0.0388 265.55); --info: oklch(0.7864 0.1273 234.98); --info-foreground: oklch(0.2064 0.0388 265.55); /* rarity: hue pulled toward this scheme, clamped to its window */ --rarity-rare: oklch(0.8003 0.1048 285); --rarity-rare-foreground: oklch(0.2064 0.0388 265.55); --rarity-epic: oklch(0.8114 0.1523 327); --rarity-epic-foreground: oklch(0.2064 0.0388 265.55); --rarity-legendary: oklch(0.8307 0.0762 83.39); --rarity-legendary-foreground: oklch(0.2064 0.0388 265.55); /* <<< end generated */ } .color-default.light { --background: oklch(0.9745 0.0101 78.28); --foreground: oklch(0.2064 0.0388 265.55); --card: oklch(1 0 0); --card-foreground: oklch(0.2064 0.0388 265.55); --popover: oklch(1 0 0); --popover-foreground: oklch(0.2064 0.0388 265.55); --primary: oklch(0.6847 0.1456 68.49); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.9443 0.0111 78.27); --secondary-foreground: oklch(0.2064 0.0388 265.55); --muted: oklch(0.9576 0.007 78.29); --muted-foreground: oklch(0.4913 0.0352 264.18); --accent: oklch(0.6266 0.1178 164.14); --accent-foreground: oklch(1 0 0); --border: oklch(0.8933 0.0176 78.24); --input: oklch(0.9303 0.014 78.26); --ring: oklch(0.6847 0.1456 68.49); --gradient-primary: linear-gradient(135deg, hsl(36 84% 45%), hsl(36 90% 55%)); --gradient-secondary: linear-gradient(135deg, hsl(36 30% 92%), hsl(36 55% 96%)); --gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(36 55% 96%)); --shadow-glow: 0 10px 40px -10px hsl(36 84% 45% / 0.3); --shadow-card: 0 4px 20px -4px hsl(222 47% 11% / 0.1); --sidebar-background: oklch(0.9848 0 0); --sidebar-foreground: oklch(0.3522 0.0514 266.05); --sidebar-primary: oklch(0.6847 0.1456 68.49); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.9713 0.0037 78.3); --sidebar-accent-foreground: oklch(0.2064 0.0388 265.55); --sidebar-border: oklch(0.9363 0.0105 78.27); --sidebar-ring: oklch(0.6847 0.1456 68.49); /* >>> generated by scripts/gen-design-tokens.mjs — do not edit by hand */ /* body text: re-solved against the worst surface in this set */ --muted-foreground: oklch(0.4913 0.0352 264.18); /* -text role: readable on a surface, unlike the fill of the same name */ --primary-text: oklch(0.5706 0.1248 68.49); --accent-text: oklch(0.5476 0.1165 164.14); --destructive-text: oklch(0.5781 0.2137 27.17); /* status: hue pulled toward this scheme, clamped to its window */ --success: oklch(0.55 0.1131 160); --success-foreground: oklch(1 0 0); --warning: oklch(0.5702 0.1083 70); --warning-foreground: oklch(1 0 0); --info: oklch(0.5588 0.1061 235); --info-foreground: oklch(1 0 0); /* rarity: hue pulled toward this scheme, clamped to its window */ --rarity-rare: oklch(0.5747 0.1456 279.5); --rarity-rare-foreground: oklch(1 0 0); --rarity-epic: oklch(0.5816 0.1456 321); --rarity-epic-foreground: oklch(1 0 0); --rarity-legendary: oklch(0.4969 0.0887 85.2); --rarity-legendary-foreground: oklch(0.9745 0.0101 78.28); /* <<< end generated */ } /* ============================================ MYSTIC SCHEME - Purple & Cyan Deep blue/purple with mystic purple primary and cyan accent ============================================ */ .color-mystic { /* Deep Blue/Purple Backgrounds */ --background: oklch(0.1905 0.0696 285.31); --foreground: oklch(0.9253 0.0235 308.18); --card: oklch(0.217 0.0775 285.59); --card-foreground: oklch(0.9253 0.0235 308.18); --popover: oklch(0.217 0.0775 285.59); --popover-foreground: oklch(0.9253 0.0235 308.18); /* Mystic Purple - Primary */ --primary: oklch(0.5905 0.2097 303.57); --primary-foreground: oklch(0.1905 0.0696 285.31); --primary-glow: oklch(0.6783 0.1814 305.16); --secondary: oklch(0.2797 0.0886 286.85); --secondary-foreground: oklch(0.9253 0.0235 308.18); --muted: oklch(0.2532 0.0672 288.3); --muted-foreground: oklch(0.6836 0.0524 292.6); /* Cyan Accent */ --accent: oklch(0.7846 0.1316 215.57); --accent-foreground: oklch(0.1905 0.0696 285.31); --accent-glow: oklch(0.8296 0.1203 213.39); --destructive: oklch(0.5786 0.2137 27.17); --destructive-foreground: oklch(1 0 0); --border: oklch(0.3315 0.0969 287.56); --input: oklch(0.2797 0.0886 286.85); --ring: oklch(0.5905 0.2097 303.57); --radius: 0.75rem; --gold-shimmer: oklch(0.7155 0.187 305.26); --emerald-glow: oklch(0.8296 0.1203 213.39); --ruby-glow: oklch(0.6414 0.204 25.01); --slate-deep: oklch(0.1584 0.0498 287.1); --gradient-gold: linear-gradient(135deg, hsl(270 70% 55%), hsl(190 90% 60%)); --gradient-emerald: linear-gradient(135deg, var(--accent), var(--accent-glow)); --gradient-slate: linear-gradient(180deg, var(--card), var(--slate-deep)); --gradient-primary: linear-gradient(135deg, hsl(270 70% 50%), hsl(200 95% 55%)); --gradient-secondary: linear-gradient(135deg, var(--card), hsl(250 60% 8%)); --gradient-card: linear-gradient(180deg, var(--card), hsl(250 60% 10%)); --shadow-gold: 0 10px 40px -10px color-mix(in oklab, var(--primary) 40%, transparent); --shadow-emerald: 0 10px 40px -10px color-mix(in oklab, var(--accent) 30%, transparent); --shadow-slate: 0 4px 20px -4px hsl(250 60% 8% / 0.5); --shadow-glow: 0 10px 40px -10px color-mix(in oklab, var(--primary) 40%, transparent); --shadow-card: 0 4px 20px -4px hsl(250 60% 6% / 0.5); --sidebar-background: oklch(0.1905 0.0696 285.31); --sidebar-foreground: oklch(0.9253 0.0235 308.18); --sidebar-primary: oklch(0.5905 0.2097 303.57); --sidebar-primary-foreground: oklch(0.1905 0.0696 285.31); --sidebar-accent: oklch(0.2797 0.0886 286.85); --sidebar-accent-foreground: oklch(0.9253 0.0235 308.18); --sidebar-border: oklch(0.3315 0.0969 287.56); --sidebar-ring: oklch(0.5905 0.2097 303.57); /* >>> generated by scripts/gen-design-tokens.mjs — do not edit by hand */ /* body text: re-solved against the worst surface in this set */ --muted-foreground: oklch(0.7935 0.0524 292.6); /* -text role: readable on a surface, unlike the fill of the same name */ --primary-text: oklch(0.8012 0.1232 303.58); --accent-text: oklch(0.7846 0.1316 215.57); --destructive-text: oklch(0.8014 0.1135 27.17); /* status: hue pulled toward this scheme, clamped to its window */ --success: oklch(0.7683 0.2 142.5); --success-foreground: oklch(0.1905 0.0696 285.31); --warning: oklch(0.7924 0.1605 82.5); --warning-foreground: oklch(0.1905 0.0696 285.31); --info: oklch(0.7739 0.1371 215.57); --info-foreground: oklch(0.1905 0.0696 285.31); /* rarity: hue pulled toward this scheme, clamped to its window */ --rarity-rare: oklch(0.7962 0.1072 285); --rarity-rare-foreground: oklch(0.1905 0.0696 285.31); --rarity-epic: oklch(0.808 0.1637 321.6); --rarity-epic-foreground: oklch(0.1905 0.0696 285.31); --rarity-legendary: oklch(0.8514 0.0886 89.89); --rarity-legendary-foreground: oklch(0.1905 0.0696 285.31); /* <<< end generated */ } .color-mystic.light { --background: oklch(0.9806 0.0072 308.38); --foreground: oklch(0.1905 0.0696 285.31); --card: oklch(1 0 0); --card-foreground: oklch(0.1905 0.0696 285.31); --popover: oklch(1 0 0); --popover-foreground: oklch(0.1905 0.0696 285.31); --primary: oklch(0.5098 0.2439 299.82); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.9545 0.0127 308.31); --secondary-foreground: oklch(0.1905 0.0696 285.31); --muted: oklch(0.9645 0.0087 308.36); --muted-foreground: oklch(0.401 0.0883 289.45); --accent: oklch(0.6879 0.1173 216.04); --accent-foreground: oklch(1 0 0); --border: oklch(0.8951 0.0222 308.19); --input: oklch(0.9287 0.0176 308.25); --ring: oklch(0.5098 0.2439 299.82); --gradient-primary: linear-gradient(135deg, hsl(270 70% 50%), hsl(270 75% 60%)); --gradient-secondary: linear-gradient(135deg, hsl(270 30% 96%), hsl(270 50% 98%)); --gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(270 50% 98%)); --shadow-glow: 0 10px 40px -10px hsl(270 70% 50% / 0.3); --shadow-card: 0 4px 20px -4px hsl(250 60% 12% / 0.1); --sidebar-background: oklch(0.9848 0 0); --sidebar-foreground: oklch(0.33 0.069 289.72); --sidebar-primary: oklch(0.5098 0.2439 299.82); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.9662 0.0058 308.39); --sidebar-accent-foreground: oklch(0.1905 0.0696 285.31); --sidebar-border: oklch(0.9186 0.0156 293.75); --sidebar-ring: oklch(0.5098 0.2439 299.82); /* >>> generated by scripts/gen-design-tokens.mjs — do not edit by hand */ /* body text: re-solved against the worst surface in this set */ --muted-foreground: oklch(0.401 0.0883 289.45); /* -text role: readable on a surface, unlike the fill of the same name */ --primary-text: oklch(0.5098 0.2439 299.82); --accent-text: oklch(0.5625 0.0999 216.04); --destructive-text: oklch(0.5786 0.2137 27.17); /* status: hue pulled toward this scheme, clamped to its window */ --success: oklch(0.5554 0.1701 142.5); --success-foreground: oklch(0 0 0); --warning: oklch(0.5767 0.1029 82.5); --warning-foreground: oklch(0 0 0); --info: oklch(0.5652 0.0888 216.04); --info-foreground: oklch(0 0 0); /* rarity: hue pulled toward this scheme, clamped to its window */ --rarity-rare: oklch(0.5904 0.2 285); --rarity-rare-foreground: oklch(0 0 0); --rarity-epic: oklch(0.587 0.12 308); --rarity-epic-foreground: oklch(0 0 0); --rarity-legendary: oklch(0.4317 0.0744 89.35); --rarity-legendary-foreground: oklch(0.9806 0.0072 308.38); /* <<< end generated */ } /* ============================================ FOREST SCHEME - Green & Amber Deep forest backgrounds with forest green primary and amber accent ============================================ */ .color-forest { /* Deep Forest Backgrounds */ --background: oklch(0.1726 0.0232 161.7); --foreground: oklch(0.9668 0.007 121.61); --card: oklch(0.2248 0.0305 160.8); --card-foreground: oklch(0.9668 0.007 121.61); --popover: oklch(0.2248 0.0305 160.8); --popover-foreground: oklch(0.9668 0.007 121.61); /* Forest Green - Primary */ --primary: oklch(0.8067 0.1955 152.19); --primary-foreground: oklch(0.1726 0.0232 161.7); --primary-glow: oklch(0.8483 0.1706 154.56); --secondary: oklch(0.2604 0.0344 160.94); --secondary-foreground: oklch(0.9668 0.007 121.61); --muted: oklch(0.2087 0.0246 161.51); --muted-foreground: oklch(0.7766 0.0265 156.55); /* Amber Accent */ --accent: oklch(0.8309 0.1622 87.87); --accent-foreground: oklch(0.1726 0.0232 161.7); --accent-glow: oklch(0.8723 0.1489 90.28); --destructive: oklch(0.5786 0.2137 27.17); --destructive-foreground: oklch(1 0 0); --border: oklch(0.432 0.0512 161.48); --input: oklch(0.2477 0.0321 161.06); --ring: oklch(0.8067 0.1955 152.19); --radius: 0.5rem; --gold-shimmer: oklch(0.8954 0.1391 90.92); --emerald-glow: oklch(0.8578 0.179 154.18); --ruby-glow: oklch(0.6414 0.204 25.01); --slate-deep: oklch(0.1408 0.0169 165.07); --gradient-gold: linear-gradient(135deg, hsl(145 75% 50%), hsl(45 95% 60%)); --gradient-emerald: linear-gradient(135deg, var(--accent), var(--accent-glow)); --gradient-slate: linear-gradient(180deg, var(--card), var(--slate-deep)); --gradient-primary: linear-gradient(135deg, hsl(145 75% 45%), hsl(50 90% 55%)); --gradient-secondary: linear-gradient(135deg, var(--card), hsl(150 50% 4%)); --gradient-card: linear-gradient(180deg, var(--card), hsl(150 50% 4%)); --shadow-gold: 0 10px 40px -10px color-mix(in oklab, var(--primary) 40%, transparent); --shadow-emerald: 0 10px 40px -10px color-mix(in oklab, var(--accent) 30%, transparent); --shadow-slate: 0 4px 20px -4px hsl(150 50% 3% / 0.5); --shadow-glow: 0 10px 40px -10px color-mix(in oklab, var(--primary) 40%, transparent); --shadow-card: 0 4px 20px -4px hsl(150 50% 2% / 0.5); --sidebar-background: oklch(0.1726 0.0232 161.7); --sidebar-foreground: oklch(0.9668 0.007 121.61); --sidebar-primary: oklch(0.8067 0.1955 152.19); --sidebar-primary-foreground: oklch(0.1726 0.0232 161.7); --sidebar-accent: oklch(0.2477 0.0321 161.06); --sidebar-accent-foreground: oklch(0.9668 0.007 121.61); --sidebar-border: oklch(0.432 0.0512 161.48); --sidebar-ring: oklch(0.8067 0.1955 152.19); /* >>> generated by scripts/gen-design-tokens.mjs — do not edit by hand */ /* body text: re-solved against the worst surface in this set */ --muted-foreground: oklch(0.7831 0.0265 156.55); /* -text role: readable on a surface, unlike the fill of the same name */ --primary-text: oklch(0.8067 0.1955 152.19); --accent-text: oklch(0.8309 0.1622 87.87); --destructive-text: oklch(0.7979 0.1159 27.17); /* status: hue pulled toward this scheme, clamped to its window */ --success: oklch(0.7606 0.1955 152.19); --success-foreground: oklch(0.1726 0.0232 161.7); --warning: oklch(0.7869 0.1594 87.87); --warning-foreground: oklch(0.1726 0.0232 161.7); --info: oklch(0.7782 0.1314 234.99); --info-foreground: oklch(0.1726 0.0232 161.7); /* rarity: hue pulled toward this scheme, clamped to its window */ --rarity-rare: oklch(0.7923 0.1085 283.5); --rarity-rare-foreground: oklch(0.1726 0.0232 161.7); --rarity-epic: oklch(0.8043 0.1648 321.02); --rarity-epic-foreground: oklch(0.1726 0.0232 161.7); --rarity-legendary: oklch(0.8637 0.1765 94.88); --rarity-legendary-foreground: oklch(0.1726 0.0232 161.7); /* <<< end generated */ } .color-forest.light { --background: oklch(0.98 0.0103 145.5); --foreground: oklch(0.2415 0.0369 160.07); --card: oklch(1 0 0); --card-foreground: oklch(0.2415 0.0369 160.07); --popover: oklch(1 0 0); --popover-foreground: oklch(0.2415 0.0369 160.07); --primary: oklch(0.5975 0.1502 151.55); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.9586 0.0155 145.45); --secondary-foreground: oklch(0.2415 0.0369 160.07); --muted: oklch(0.9719 0.0086 145.51); --muted-foreground: oklch(0.4697 0.0727 159.98); --accent: oklch(0.6243 0.1345 66.5); --accent-foreground: oklch(1 0 0); --border: oklch(0.8994 0.0245 145.37); --input: oklch(0.9296 0.0217 145.4); --ring: oklch(0.5975 0.1502 151.55); --gradient-primary: linear-gradient(135deg, hsl(145 70% 35%), hsl(145 75% 45%)); --gradient-secondary: linear-gradient(135deg, hsl(120 30% 94%), hsl(120 40% 97%)); --gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(120 40% 97%)); --shadow-glow: 0 10px 40px -10px hsl(145 70% 35% / 0.3); --shadow-card: 0 4px 20px -4px hsl(150 45% 10% / 0.1); --sidebar-background: oklch(0.9848 0 0); --sidebar-foreground: oklch(0.418 0.0567 160.81); --sidebar-primary: oklch(0.5975 0.1502 151.55); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.9714 0.0069 145.52); --sidebar-accent-foreground: oklch(0.2415 0.0369 160.07); --sidebar-border: oklch(0.9367 0.0195 145.42); --sidebar-ring: oklch(0.5975 0.1502 151.55); /* >>> generated by scripts/gen-design-tokens.mjs — do not edit by hand */ /* body text: re-solved against the worst surface in this set */ --muted-foreground: oklch(0.4697 0.0727 159.98); /* -text role: readable on a surface, unlike the fill of the same name */ --primary-text: oklch(0.5674 0.1502 151.55); --accent-text: oklch(0.5936 0.1317 66.5); --destructive-text: oklch(0.5786 0.2137 27.17); /* status: hue pulled toward this scheme, clamped to its window */ --success: oklch(0.5711 0.1329 151.55); --success-foreground: oklch(0 0 0); --warning: oklch(0.5925 0.1083 70); --warning-foreground: oklch(0 0 0); --info: oklch(0.5813 0.1061 235); --info-foreground: oklch(0 0 0); /* rarity: hue pulled toward this scheme, clamped to its window */ --rarity-rare: oklch(0.5966 0.1502 277.5); --rarity-rare-foreground: oklch(0 0 0); --rarity-epic: oklch(0.6042 0.1502 317); --rarity-epic-foreground: oklch(0 0 0); --rarity-legendary: oklch(0.5196 0.0892 89.13); --rarity-legendary-foreground: oklch(0.98 0.0103 145.5); /* <<< end generated */ } /* ============================================ FANTASY SCHEME - Mystic Purple & Arcane Blue Dark blue-gray with mystic purple primary, arcane blue secondary, and ruby red accent ============================================ */ .color-fantasy { /* Deep Dark Blue-Gray Backgrounds */ --background: oklch(0.1881 0.0089 264.33); --foreground: oklch(0.9415 0.0292 84.59); --card: oklch(0.2096 0.0109 264.31); --card-foreground: oklch(0.9415 0.0292 84.59); --popover: oklch(0.2096 0.0109 264.31); --popover-foreground: oklch(0.9415 0.0292 84.59); /* Mystic Purple - Primary */ --primary: oklch(0.5836 0.2584 310.87); --primary-foreground: oklch(0.1881 0.0089 264.33); --primary-glow: oklch(0.7001 0.1882 313.29); /* Arcane Blue - Secondary */ --secondary: oklch(0.5493 0.1459 252.42); --secondary-foreground: oklch(0.9415 0.0292 84.59); --muted: oklch(0.2612 0.0154 264.26); --muted-foreground: oklch(0.6707 0.0216 264.42); /* Ruby Red - Accent */ --accent: oklch(0.6123 0.2093 6.39); --accent-foreground: oklch(0.1881 0.0089 264.33); --accent-glow: oklch(0.678 0.1807 2.47); --destructive: oklch(0.5786 0.2137 27.17); --destructive-foreground: oklch(1 0 0); --border: oklch(0.3103 0.0197 264.23); --input: oklch(0.3103 0.0197 264.23); --ring: oklch(0.5836 0.2584 310.87); --radius: 0.5rem; /* Additional Fantasy Colors */ --mystic: oklch(0.5836 0.2584 310.87); --mystic-glow: oklch(0.7001 0.1882 313.29); --arcane: oklch(0.5493 0.1459 252.42); --dragon: oklch(0.8309 0.1622 87.87); --forest: oklch(0.6909 0.1641 152.52); --ember: oklch(0.7096 0.173 50.31); --gold-shimmer: oklch(0.8954 0.1391 90.92); --emerald-glow: oklch(0.8108 0.1705 154.09); --ruby-glow: oklch(0.678 0.1807 2.47); --slate-deep: oklch(0.1546 0.0058 264.39); /* Fantasy Gradients */ --gradient-gold: linear-gradient(135deg, hsl(280 85% 55%), hsl(210 75% 50%)); --gradient-emerald: linear-gradient(135deg, var(--dragon), var(--ember)); --gradient-slate: linear-gradient(180deg, var(--card), var(--slate-deep)); --gradient-primary: linear-gradient(135deg, hsl(280 80% 50%), hsl(200 80% 55%)); --gradient-secondary: linear-gradient(180deg, hsl(220 15% 10%), hsl(220 15% 8%)); --gradient-card: linear-gradient(180deg, hsl(220 15% 10%), hsl(220 15% 8%)); --gradient-mystic: linear-gradient(135deg, hsl(280 80% 55%), hsl(210 70% 45%)); --gradient-arcane: linear-gradient(180deg, hsl(220 15% 10%), hsl(220 15% 8%)); --gradient-hero: linear-gradient(135deg, hsl(280 80% 25%), hsl(210 70% 20%)); /* Fantasy Shadows */ --shadow-gold: 0 10px 40px -10px color-mix(in oklab, var(--mystic) 50%, transparent); --shadow-emerald: 0 10px 40px -10px color-mix(in oklab, var(--dragon) 40%, transparent); --shadow-slate: 0 4px 20px -4px hsl(220 15% 5% / 0.6); --shadow-mystic: 0 10px 40px -10px hsl(280 80% 55% / 0.5); --shadow-glow: 0 10px 40px -10px color-mix(in oklab, var(--mystic) 50%, transparent); --shadow-card: 0 4px 20px -4px hsl(220 15% 4% / 0.5); --glow-mystic: 0 0 20px hsl(280 80% 70% / 0.6); --sidebar-background: oklch(0.1881 0.0089 264.33); --sidebar-foreground: oklch(0.9415 0.0292 84.59); --sidebar-primary: oklch(0.5836 0.2584 310.87); --sidebar-primary-foreground: oklch(0.1881 0.0089 264.33); --sidebar-accent: oklch(0.2612 0.0154 264.26); --sidebar-accent-foreground: oklch(0.9415 0.0292 84.59); --sidebar-border: oklch(0.3103 0.0197 264.23); --sidebar-ring: oklch(0.5836 0.2584 310.87); /* >>> generated by scripts/gen-design-tokens.mjs — do not edit by hand */ /* body text: re-solved against the worst surface in this set */ --muted-foreground: oklch(0.7924 0.0216 264.42); /* -text role: readable on a surface, unlike the fill of the same name */ --primary-text: oklch(0.8057 0.1337 310.89); --accent-text: oklch(0.8057 0.1155 6.39); --destructive-text: oklch(0.8036 0.112 27.17); /* status: hue pulled toward this scheme, clamped to its window */ --success: oklch(0.7706 0.2 142.5); --success-foreground: oklch(0.1881 0.0089 264.33); --warning: oklch(0.7947 0.1605 82.5); --warning-foreground: oklch(0.1881 0.0089 264.33); --info: oklch(0.7844 0.1286 234.98); --info-foreground: oklch(0.1881 0.0089 264.33); /* rarity: hue pulled toward this scheme, clamped to its window */ --rarity-rare: oklch(0.7985 0.1059 285); --rarity-rare-foreground: oklch(0.1881 0.0089 264.33); --rarity-epic: oklch(0.8107 0.1664 322.89); --rarity-epic-foreground: oklch(0.1881 0.0089 264.33); --rarity-legendary: oklch(0.8535 0.0883 89.88); --rarity-legendary-foreground: oklch(0.1881 0.0089 264.33); /* <<< end generated */ } .color-fantasy.light { --background: oklch(0.974 0.0069 314.79); --foreground: oklch(0.2612 0.0154 264.26); --card: oklch(1 0 0); --card-foreground: oklch(0.2612 0.0154 264.26); --popover: oklch(1 0 0); --popover-foreground: oklch(0.2612 0.0154 264.26); --primary: oklch(0.5069 0.2303 310.54); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.5883 0.1391 251.44); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.9667 0.0061 314.8); --muted-foreground: oklch(0.4913 0.0352 264.18); --accent: oklch(0.5749 0.2019 7.1); --accent-foreground: oklch(1 0 0); --border: oklch(0.8764 0.0176 314.73); --input: oklch(0.9162 0.0155 314.74); --ring: oklch(0.5069 0.2303 310.54); /* Light Fantasy Colors */ --mystic: oklch(0.5069 0.2303 310.54); --arcane: oklch(0.5883 0.1391 251.44); --dragon: oklch(0.8026 0.1613 86.4); --forest: oklch(0.6212 0.14 153.25); --ember: oklch(0.6778 0.1788 48.07); --gradient-primary: linear-gradient(135deg, hsl(280 70% 45%), hsl(210 60% 50%)); --gradient-secondary: linear-gradient(135deg, hsl(280 20% 96%), hsl(280 30% 97%)); --gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(280 30% 97%)); --shadow-glow: 0 10px 40px -10px hsl(280 70% 45% / 0.3); --shadow-card: 0 4px 20px -4px hsl(220 15% 15% / 0.1); --sidebar-background: oklch(0.9848 0 0); --sidebar-foreground: oklch(0.3669 0.0246 264.21); --sidebar-primary: oklch(0.5069 0.2303 310.54); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.9667 0.0061 314.8); --sidebar-accent-foreground: oklch(0.2612 0.0154 264.26); --sidebar-border: oklch(0.9231 0.0174 314.74); --sidebar-ring: oklch(0.5069 0.2303 310.54); /* >>> generated by scripts/gen-design-tokens.mjs — do not edit by hand */ /* body text: re-solved against the worst surface in this set */ --muted-foreground: oklch(0.4913 0.0352 264.18); /* -text role: readable on a surface, unlike the fill of the same name */ --primary-text: oklch(0.5069 0.2303 310.54); --accent-text: oklch(0.5749 0.2019 7.1); --destructive-text: oklch(0.5786 0.2137 27.17); /* status: hue pulled toward this scheme, clamped to its window */ --success: oklch(0.5589 0.1701 142.5); --success-foreground: oklch(0 0 0); --warning: oklch(0.5802 0.1029 82.5); --warning-foreground: oklch(0 0 0); --info: oklch(0.5714 0.1061 235); --info-foreground: oklch(0 0 0); /* rarity: hue pulled toward this scheme, clamped to its window */ --rarity-rare: oklch(0.5938 0.2 285); --rarity-rare-foreground: oklch(0 0 0); --rarity-epic: oklch(0.5908 0.12 310.54); --rarity-epic-foreground: oklch(0 0 0); --rarity-legendary: oklch(0.4361 0.0747 89.34); --rarity-legendary-foreground: oklch(0.974 0.0069 314.79); /* <<< end generated */ } /* ============================================ SCI-FI SCHEME - Neon Cyan & Pink Dark cyber backgrounds with neon cyan primary, deep purple secondary, and neon pink accent ============================================ */ .color-scifi { /* Dark Cyber Backgrounds */ --background: oklch(0.1801 0.0177 275.69); --foreground: oklch(0.9518 0.0369 196.55); --card: oklch(0.2096 0.0235 275.44); --card-foreground: oklch(0.9518 0.0369 196.55); --popover: oklch(0.2096 0.0235 275.44); --popover-foreground: oklch(0.9518 0.0369 196.55); /* Neon Cyan - Primary */ --primary: oklch(0.9054 0.1546 194.77); --primary-foreground: oklch(0.1801 0.0177 275.69); --primary-glow: oklch(0.9131 0.1399 194.98); /* Deep Purple - Secondary */ --secondary: oklch(0.3214 0.1099 303.84); --secondary-foreground: oklch(0.9518 0.0369 196.55); --muted: oklch(0.2476 0.0307 275.22); --muted-foreground: oklch(0.654 0.0384 276.38); /* Neon Pink - Accent */ --accent: oklch(0.6829 0.2615 345.75); --accent-foreground: oklch(0.1801 0.0177 275.69); --accent-glow: oklch(0.7337 0.2145 342.88); --destructive: oklch(0.6125 0.2276 27.27); --destructive-foreground: oklch(1 0 0); --border: oklch(0.3107 0.0426 274.97); --input: oklch(0.2751 0.0359 275.1); --ring: oklch(0.9054 0.1546 194.77); --radius: 0.25rem; --gold-shimmer: oklch(0.9131 0.1399 194.98); --emerald-glow: oklch(0.7337 0.2145 342.88); --ruby-glow: oklch(0.6362 0.2102 25.49); --slate-deep: oklch(0.1493 0.0116 276.03); --gradient-gold: linear-gradient(135deg, hsl(180 100% 45%), hsl(320 100% 55%)); --gradient-emerald: linear-gradient(135deg, var(--accent), var(--primary-glow)); --gradient-slate: linear-gradient(180deg, var(--card), var(--slate-deep)); --gradient-primary: linear-gradient(135deg, hsl(180 100% 40%), hsl(320 100% 50%)); --gradient-secondary: linear-gradient(135deg, var(--card), hsl(230 25% 6%)); --gradient-card: linear-gradient(180deg, var(--card), hsl(230 25% 6%)); --shadow-gold: 0 10px 40px -10px color-mix(in oklab, var(--primary) 50%, transparent); --shadow-emerald: 0 10px 40px -10px color-mix(in oklab, var(--accent) 40%, transparent); --shadow-slate: 0 4px 20px -4px hsl(230 25% 5% / 0.6); --shadow-glow: 0 10px 40px -10px color-mix(in oklab, var(--primary) 50%, transparent); --shadow-card: 0 4px 20px -4px hsl(230 25% 4% / 0.6); --sidebar-background: oklch(0.1801 0.0177 275.69); --sidebar-foreground: oklch(0.9518 0.0369 196.55); --sidebar-primary: oklch(0.9054 0.1546 194.77); --sidebar-primary-foreground: oklch(0.1801 0.0177 275.69); --sidebar-accent: oklch(0.3214 0.1099 303.84); --sidebar-accent-foreground: oklch(0.9518 0.0369 196.55); --sidebar-border: oklch(0.3107 0.0426 274.97); --sidebar-ring: oklch(0.9054 0.1546 194.77); /* >>> generated by scripts/gen-design-tokens.mjs — do not edit by hand */ /* body text: re-solved against the worst surface in this set */ --muted-foreground: oklch(0.7906 0.0384 276.38); /* -text role: readable on a surface, unlike the fill of the same name */ --primary-text: oklch(0.9054 0.1546 194.77); --accent-text: oklch(0.8057 0.1387 345.74); --destructive-text: oklch(0.8008 0.114 27.27); /* status: hue pulled toward this scheme, clamped to its window */ --success: oklch(0.7676 0.2 142.5); --success-foreground: oklch(0.1801 0.0177 275.69); --warning: oklch(0.7917 0.1605 82.5); --warning-foreground: oklch(0.1801 0.0177 275.69); --info: oklch(0.7731 0.1366 215); --info-foreground: oklch(0.1801 0.0177 275.69); /* rarity: hue pulled toward this scheme, clamped to its window */ --rarity-rare: oklch(0.7938 0.1051 277.5); --rarity-rare-foreground: oklch(0.1801 0.0177 275.69); --rarity-epic: oklch(0.8094 0.1769 329.98); --rarity-epic-foreground: oklch(0.1801 0.0177 275.69); --rarity-legendary: oklch(0.8508 0.0887 89.9); --rarity-legendary-foreground: oklch(0.1801 0.0177 275.69); /* <<< end generated */ } .color-scifi.light { --background: oklch(0.9776 0.0039 228.8); --foreground: oklch(0.2193 0.0253 275.38); --card: oklch(1 0 0); --card-foreground: oklch(0.2193 0.0253 275.38); --popover: oklch(1 0 0); --popover-foreground: oklch(0.2193 0.0253 275.38); --primary: oklch(0.7228 0.1217 194.8); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.5245 0.1588 304.58); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.9624 0.0043 228.81); --muted-foreground: oklch(0.47 0.0558 275.32); --accent: oklch(0.6187 0.2505 347.26); --accent-foreground: oklch(1 0 0); --border: oklch(0.8861 0.0131 228.95); --input: oklch(0.9247 0.0108 228.91); --ring: oklch(0.7228 0.1217 194.8); --gradient-primary: linear-gradient(135deg, hsl(180 85% 40%), hsl(320 80% 50%)); --gradient-secondary: linear-gradient(135deg, hsl(200 20% 95%), hsl(200 30% 97%)); --gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(200 30% 97%)); --shadow-glow: 0 10px 40px -10px hsl(180 85% 40% / 0.3); --shadow-card: 0 4px 20px -4px hsl(230 25% 12% / 0.1); --sidebar-background: oklch(0.9848 0 0); --sidebar-foreground: oklch(0.3519 0.039 275.47); --sidebar-primary: oklch(0.7228 0.1217 194.8); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.9698 0.0026 228.78); --sidebar-accent-foreground: oklch(0.2193 0.0253 275.38); --sidebar-border: oklch(0.932 0.0078 228.86); --sidebar-ring: oklch(0.7228 0.1217 194.8); /* >>> generated by scripts/gen-design-tokens.mjs — do not edit by hand */ /* body text: re-solved against the worst surface in this set */ --muted-foreground: oklch(0.47 0.0558 275.32); /* -text role: readable on a surface, unlike the fill of the same name */ --primary-text: oklch(0.5586 0.0953 194.8); --accent-text: oklch(0.5874 0.2476 347.26); --destructive-text: oklch(0.5845 0.2276 27.27); /* status: hue pulled toward this scheme, clamped to its window */ --success: oklch(0.5539 0.1701 142.5); --success-foreground: oklch(0 0 0); --warning: oklch(0.5753 0.1029 82.5); --warning-foreground: oklch(0 0 0); --info: oklch(0.5637 0.0883 215); --info-foreground: oklch(0 0 0); /* rarity: hue pulled toward this scheme, clamped to its window */ --rarity-rare: oklch(0.5862 0.2 277.5); --rarity-rare-foreground: oklch(0 0 0); --rarity-epic: oklch(0.5938 0.2 330); --rarity-epic-foreground: oklch(1 0 0); --rarity-legendary: oklch(0.4299 0.0742 89.36); --rarity-legendary-foreground: oklch(0.9776 0.0039 228.8); /* <<< end generated */ } /* ============================================ D&D SCHEME - Dragon Red & Antique Gold Parchment dark backgrounds with dragon red primary, antique gold secondary, and royal purple accent ============================================ */ .color-dnd { /* Parchment Dark Backgrounds */ --background: oklch(0.2189 0.0187 57.1); --foreground: oklch(0.9311 0.0315 91.67); --card: oklch(0.2523 0.0219 57.07); --card-foreground: oklch(0.9311 0.0315 91.67); --popover: oklch(0.2523 0.0219 57.07); --popover-foreground: oklch(0.9311 0.0315 91.67); /* Dragon Red - Primary (WCAG AA tuned) */ --primary: oklch(0.6669 0.1771 23.18); --primary-foreground: oklch(0 0 0); --primary-glow: oklch(0.7216 0.1493 21.47); /* Antique Gold - Secondary */ --secondary: oklch(0.5107 0.0902 89.92); --secondary-foreground: oklch(0.9311 0.0315 91.67); --muted: oklch(0.2842 0.0234 57.15); --muted-foreground: oklch(0.6867 0.0281 57.79); /* Royal Purple - Accent */ --accent: oklch(0.5524 0.2038 303.26); --accent-foreground: oklch(0.9713 0.0131 91.52); --accent-glow: oklch(0.6413 0.1741 305.1); --destructive: oklch(0.5786 0.2137 27.17); --destructive-foreground: oklch(1 0 0); --border: oklch(0.3767 0.034 57.01); --input: oklch(0.3062 0.0289 56.94); --ring: oklch(0.6669 0.1771 23.18); --radius: 0.375rem; --gold-shimmer: oklch(0.8806 0.154 90.03); --emerald-glow: oklch(0.6413 0.1741 305.1); --ruby-glow: oklch(0.6333 0.2001 24.93); --slate-deep: oklch(0.1717 0.0119 57.36); --gradient-gold: linear-gradient(135deg, hsl(0 80% 50%), hsl(45 90% 60%)); --gradient-emerald: linear-gradient(135deg, var(--accent), var(--accent-glow)); --gradient-slate: linear-gradient(180deg, var(--card), var(--slate-deep)); --gradient-primary: linear-gradient(135deg, hsl(0 75% 45%), hsl(50 85% 55%)); --gradient-secondary: linear-gradient(135deg, var(--card), hsl(25 30% 8%)); --gradient-card: linear-gradient(180deg, var(--card), hsl(25 30% 8%)); --shadow-gold: 0 10px 40px -10px color-mix(in oklab, var(--primary) 50%, transparent); --shadow-emerald: 0 10px 40px -10px color-mix(in oklab, var(--accent) 40%, transparent); --shadow-slate: 0 4px 20px -4px hsl(25 30% 6% / 0.6); --shadow-glow: 0 10px 40px -10px color-mix(in oklab, var(--primary) 40%, transparent); --shadow-card: 0 4px 20px -4px hsl(25 30% 5% / 0.5); --sidebar-background: oklch(0.2189 0.0187 57.1); --sidebar-foreground: oklch(0.9311 0.0315 91.67); --sidebar-primary: oklch(0.5789 0.2217 27.81); --sidebar-primary-foreground: oklch(0.9713 0.0131 91.52); --sidebar-accent: oklch(0.2842 0.0234 57.15); --sidebar-accent-foreground: oklch(0.9311 0.0315 91.67); --sidebar-border: oklch(0.3767 0.034 57.01); --sidebar-ring: oklch(0.5789 0.2217 27.81); /* >>> generated by scripts/gen-design-tokens.mjs — do not edit by hand */ /* body text: re-solved against the worst surface in this set */ --muted-foreground: oklch(0.7993 0.0281 57.79); /* -text role: readable on a surface, unlike the fill of the same name */ --primary-text: oklch(0.809 0.1082 23.18); --accent-text: oklch(0.8082 0.118 303.28); --destructive-text: oklch(0.8086 0.1086 27.17); /* status: hue pulled toward this scheme, clamped to its window */ --success: oklch(0.7759 0.2 142.5); --success-foreground: oklch(0.2189 0.0187 57.1); --warning: oklch(0.8 0.1605 82.5); --warning-foreground: oklch(0.2189 0.0187 57.1); --info: oklch(0.79 0.125 234.98); --info-foreground: oklch(0.2189 0.0187 57.1); /* rarity: hue pulled toward this scheme, clamped to its window */ --rarity-rare: oklch(0.8855 0.0585 286.31); --rarity-rare-foreground: oklch(0.2189 0.0187 57.1); --rarity-epic: oklch(0.8082 0.118 303.28); --rarity-epic-foreground: oklch(0.2189 0.0187 57.1); --rarity-legendary: oklch(0.8582 0.0876 89.86); --rarity-legendary-foreground: oklch(0.2189 0.0187 57.1); /* <<< end generated */ } .color-dnd.light { --background: oklch(0.9807 0.0058 84.57); --foreground: oklch(0.2746 0.0265 56.9); --card: oklch(1 0 0); --card-foreground: oklch(0.2746 0.0265 56.9); --popover: oklch(1 0 0); --popover-foreground: oklch(0.2746 0.0265 56.9); --primary: oklch(0.5229 0.1854 26.5); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.6613 0.1096 90.52); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.9663 0.0073 84.57); --muted-foreground: oklch(0.5197 0.0502 56.89); --accent: oklch(0.5152 0.1917 303.19); --accent-foreground: oklch(1 0 0); --border: oklch(0.8958 0.0185 84.59); --input: oklch(0.9323 0.0147 84.58); --ring: oklch(0.5229 0.1854 26.5); --gradient-primary: linear-gradient(135deg, hsl(0 65% 45%), hsl(45 75% 50%)); --gradient-secondary: linear-gradient(135deg, hsl(40 30% 95%), hsl(40 40% 97%)); --gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(40 40% 97%)); --shadow-glow: 0 10px 40px -10px hsl(0 65% 45% / 0.3); --shadow-card: 0 4px 20px -4px hsl(25 30% 15% / 0.1); --sidebar-background: oklch(0.986 0.0019 84.56); --sidebar-foreground: oklch(0.3849 0.0282 57.3); --sidebar-primary: oklch(0.5229 0.1854 26.5); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.9713 0.0029 84.56); --sidebar-accent-foreground: oklch(0.2746 0.0265 56.9); --sidebar-border: oklch(0.9365 0.0088 84.57); --sidebar-ring: oklch(0.5229 0.1854 26.5); /* >>> generated by scripts/gen-design-tokens.mjs — do not edit by hand */ /* body text: re-solved against the worst surface in this set */ --muted-foreground: oklch(0.5197 0.0502 56.89); /* -text role: readable on a surface, unlike the fill of the same name */ --primary-text: oklch(0.5229 0.1854 26.5); --accent-text: oklch(0.5152 0.1917 303.19); --destructive-text: oklch(0.5786 0.2137 27.17); /* status: hue pulled toward this scheme, clamped to its window */ --success: oklch(0.5592 0.1701 142.5); --success-foreground: oklch(0 0 0); --warning: oklch(0.5805 0.1029 82.5); --warning-foreground: oklch(0 0 0); --info: oklch(0.5717 0.1061 235); --info-foreground: oklch(0 0 0); /* rarity: hue pulled toward this scheme, clamped to its window */ --rarity-rare: oklch(0.5933 0.1917 285); --rarity-rare-foreground: oklch(0 0 0); --rarity-epic: oklch(0.5906 0.115 311.19); --rarity-epic-foreground: oklch(0 0 0); --rarity-legendary: oklch(0.4365 0.0747 89.34); --rarity-legendary-foreground: oklch(0.9807 0.0058 84.57); /* <<< end generated */ } /* ============================================ STEAMPUNK SCHEME - Brass & Copper Dark Victorian backgrounds with brass primary and copper accent ============================================ */ .color-steampunk { /* Dark Victorian Backgrounds */ --background: oklch(0.2198 0.0126 67.09); --foreground: oklch(0.8982 0.0222 84.59); --card: oklch(0.2531 0.0142 67.11); --card-foreground: oklch(0.8982 0.0222 84.59); --popover: oklch(0.2531 0.0142 67.11); --popover-foreground: oklch(0.8982 0.0222 84.59); /* Brass - Primary */ --primary: oklch(0.7646 0.1468 88.42); --primary-foreground: oklch(0.2198 0.0126 67.09); --primary-glow: oklch(0.8278 0.1437 90.11); --secondary: oklch(0.3858 0.0599 55.45); --secondary-foreground: oklch(0.8982 0.0222 84.59); --muted: oklch(0.3059 0.0156 67.19); --muted-foreground: oklch(0.692 0.0284 67.33); /* Copper - Accent */ --accent: oklch(0.6338 0.165 43.77); --accent-foreground: oklch(0.2198 0.0126 67.09); --accent-glow: oklch(0.7046 0.1507 45.69); --destructive: oklch(0.5786 0.2137 27.17); --destructive-foreground: oklch(1 0 0); --border: oklch(0.38 0.0273 66.85); --input: oklch(0.3071 0.0187 67.03); --ring: oklch(0.7646 0.1468 88.42); --radius: 0.125rem; --gold-shimmer: oklch(0.8476 0.1317 90.92); --emerald-glow: oklch(0.7046 0.1507 45.69); --ruby-glow: oklch(0.5972 0.1977 25.52); --slate-deep: oklch(0.1724 0.008 67.25); --gradient-gold: linear-gradient(135deg, hsl(45 75% 50%), hsl(20 80% 55%)); --gradient-emerald: linear-gradient(135deg, var(--accent), var(--accent-glow)); --gradient-slate: linear-gradient(180deg, var(--card), var(--slate-deep)); --gradient-primary: linear-gradient(135deg, hsl(45 70% 45%), hsl(15 85% 50%)); --gradient-secondary: linear-gradient(135deg, var(--card), hsl(30 20% 8%)); --gradient-card: linear-gradient(180deg, var(--card), hsl(30 20% 8%)); --shadow-gold: 0 10px 40px -10px color-mix(in oklab, var(--primary) 50%, transparent); --shadow-emerald: 0 10px 40px -10px color-mix(in oklab, var(--accent) 40%, transparent); --shadow-slate: 0 4px 20px -4px hsl(30 20% 6% / 0.6); --shadow-glow: 0 10px 40px -10px color-mix(in oklab, var(--primary) 40%, transparent); --shadow-card: 0 4px 20px -4px hsl(30 20% 5% / 0.5); --sidebar-background: oklch(0.2198 0.0126 67.09); --sidebar-foreground: oklch(0.8982 0.0222 84.59); --sidebar-primary: oklch(0.7646 0.1468 88.42); --sidebar-primary-foreground: oklch(0.2198 0.0126 67.09); --sidebar-accent: oklch(0.3858 0.0599 55.45); --sidebar-accent-foreground: oklch(0.8982 0.0222 84.59); --sidebar-border: oklch(0.38 0.0273 66.85); --sidebar-ring: oklch(0.7646 0.1468 88.42); /* >>> generated by scripts/gen-design-tokens.mjs — do not edit by hand */ /* body text: re-solved against the worst surface in this set */ --muted-foreground: oklch(0.8051 0.0284 67.33); /* -text role: readable on a surface, unlike the fill of the same name */ --primary-text: oklch(0.8044 0.1468 88.42); --accent-text: oklch(0.8131 0.112 43.78); --destructive-text: oklch(0.8145 0.1046 27.17); /* status: hue pulled toward this scheme, clamped to its window */ --success: oklch(0.7862 0.165 142.5); --success-foreground: oklch(0.2198 0.0126 67.09); --warning: oklch(0.8044 0.1594 88.42); --warning-foreground: oklch(0.2198 0.0126 67.09); --info: oklch(0.7966 0.1208 234.97); --info-foreground: oklch(0.2198 0.0126 67.09); /* rarity: hue pulled toward this scheme, clamped to its window */ --rarity-rare: oklch(0.8827 0.0578 278.54); --rarity-rare-foreground: oklch(0.2198 0.0126 67.09); --rarity-epic: oklch(0.8179 0.1342 315.04); --rarity-epic-foreground: oklch(0.2198 0.0126 67.09); --rarity-legendary: oklch(0.8371 0.0835 88.72); --rarity-legendary-foreground: oklch(0.2198 0.0126 67.09); /* <<< end generated */ } .color-steampunk.light { --background: oklch(0.9736 0.0068 84.57); --foreground: oklch(0.2757 0.0178 66.98); --card: oklch(1 0 0); --card-foreground: oklch(0.2757 0.0178 66.98); --popover: oklch(1 0 0); --popover-foreground: oklch(0.2757 0.0178 66.98); --primary: oklch(0.6956 0.1298 89.09); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.6179 0.1337 45.61); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.9586 0.0073 84.57); --muted-foreground: oklch(0.5204 0.0304 67.07); --accent: oklch(0.5769 0.1328 45.14); --accent-foreground: oklch(1 0 0); --border: oklch(0.8719 0.0179 84.59); --input: oklch(0.9169 0.0148 84.58); --ring: oklch(0.6956 0.1298 89.09); --gradient-primary: linear-gradient(135deg, hsl(45 65% 45%), hsl(45 70% 55%)); --gradient-secondary: linear-gradient(135deg, hsl(40 25% 94%), hsl(40 35% 96%)); --gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(40 35% 96%)); --shadow-glow: 0 10px 40px -10px hsl(45 65% 45% / 0.3); --shadow-card: 0 4px 20px -4px hsl(30 20% 15% / 0.1); --sidebar-background: oklch(0.986 0.0019 84.56); --sidebar-foreground: oklch(0.3873 0.0213 67.13); --sidebar-primary: oklch(0.6956 0.1298 89.09); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.9713 0.0029 84.56); --sidebar-accent-foreground: oklch(0.2757 0.0178 66.98); --sidebar-border: oklch(0.9351 0.0066 84.57); --sidebar-ring: oklch(0.6956 0.1298 89.09); /* >>> generated by scripts/gen-design-tokens.mjs — do not edit by hand */ /* body text: re-solved against the worst surface in this set */ --muted-foreground: oklch(0.5204 0.0304 67.07); /* -text role: readable on a surface, unlike the fill of the same name */ --primary-text: oklch(0.5677 0.116 89.09); --accent-text: oklch(0.5769 0.1328 45.14); --destructive-text: oklch(0.5786 0.2137 27.17); /* status: hue pulled toward this scheme, clamped to its window */ --success: oklch(0.5531 0.1328 142.5); --success-foreground: oklch(1 0 0); --warning: oklch(0.568 0.1022 89.09); --warning-foreground: oklch(1 0 0); --info: oklch(0.5604 0.1061 235); --info-foreground: oklch(1 0 0); /* rarity: hue pulled toward this scheme, clamped to its window */ --rarity-rare: oklch(0.5764 0.1328 283.5); --rarity-rare-foreground: oklch(1 0 0); --rarity-epic: oklch(0.5823 0.1328 329); --rarity-epic-foreground: oklch(1 0 0); --rarity-legendary: oklch(0.4221 0.0736 89.49); --rarity-legendary-foreground: oklch(0.9736 0.0068 84.57); /* <<< end generated */ } /* ============================================ CYBERPUNK SCHEME - Hot Pink & Electric Cyan Dark noir backgrounds with hot pink primary and electric cyan accent ============================================ */ .color-cyberpunk { /* Dark Noir Backgrounds */ --background: oklch(0.157 0.0197 299.42); --foreground: oklch(0.938 0.0956 195.64); --card: oklch(0.1891 0.0236 299.44); --card-foreground: oklch(0.938 0.0956 195.64); --popover: oklch(0.1891 0.0236 299.44); --popover-foreground: oklch(0.938 0.0956 195.64); /* Hot Pink - Primary */ --primary: oklch(0.6453 0.2504 351.96); --primary-foreground: oklch(0.157 0.0197 299.42); --primary-glow: oklch(0.699 0.2337 349.01); --secondary: oklch(0.2767 0.0736 296.68); --secondary-foreground: oklch(0.938 0.0956 195.64); --muted: oklch(0.2461 0.0366 299.01); --muted-foreground: oklch(0.5947 0.0708 299.53); /* Electric Cyan - Accent */ --accent: oklch(0.9054 0.1546 194.77); --accent-foreground: oklch(0.157 0.0197 299.42); --accent-glow: oklch(0.9089 0.1478 194.87); --destructive: oklch(0.6191 0.2361 27.74); --destructive-foreground: oklch(1 0 0); --border: oklch(0.3033 0.0606 298.06); --input: oklch(0.2461 0.0366 299.01); --ring: oklch(0.6453 0.2504 351.96); --radius: 0rem; --gold-shimmer: oklch(0.7288 0.2071 347.39); --emerald-glow: oklch(0.9089 0.1478 194.87); --ruby-glow: oklch(0.6398 0.2196 26.02); --slate-deep: oklch(0.1359 0.0144 300.99); --gradient-gold: linear-gradient(135deg, hsl(325 95% 55%), hsl(180 100% 55%)); --gradient-emerald: linear-gradient(135deg, var(--accent), var(--accent-glow)); --gradient-slate: linear-gradient(180deg, var(--card), var(--slate-deep)); --gradient-primary: linear-gradient(135deg, hsl(325 90% 50%), hsl(180 100% 50%)); --gradient-secondary: linear-gradient(135deg, var(--card), hsl(260 30% 4%)); --gradient-card: linear-gradient(180deg, var(--card), hsl(260 30% 5%)); --shadow-gold: 0 10px 40px -10px color-mix(in oklab, var(--primary) 60%, transparent); --shadow-emerald: 0 10px 40px -10px color-mix(in oklab, var(--accent) 50%, transparent); --shadow-slate: 0 4px 20px -4px hsl(260 30% 4% / 0.7); --shadow-glow: 0 10px 40px -10px color-mix(in oklab, var(--primary) 60%, transparent); --shadow-card: 0 4px 20px -4px hsl(260 30% 3% / 0.6); --sidebar-background: oklch(0.157 0.0197 299.42); --sidebar-foreground: oklch(0.938 0.0956 195.64); --sidebar-primary: oklch(0.6453 0.2504 351.96); --sidebar-primary-foreground: oklch(0.157 0.0197 299.42); --sidebar-accent: oklch(0.2767 0.0736 296.68); --sidebar-accent-foreground: oklch(0.938 0.0956 195.64); --sidebar-border: oklch(0.3033 0.0606 298.06); --sidebar-ring: oklch(0.6453 0.2504 351.96); /* >>> generated by scripts/gen-design-tokens.mjs — do not edit by hand */ /* body text: re-solved against the worst surface in this set */ --muted-foreground: oklch(0.7944 0.0708 299.53); /* -text role: readable on a surface, unlike the fill of the same name */ --primary-text: oklch(0.8042 0.1304 351.94); --accent-text: oklch(0.9054 0.1546 194.77); --destructive-text: oklch(0.8001 0.1144 27.74); /* status: hue pulled toward this scheme, clamped to its window */ --success: oklch(0.767 0.2 142.5); --success-foreground: oklch(0.157 0.0197 299.42); --warning: oklch(0.7911 0.1605 82.5); --warning-foreground: oklch(0.157 0.0197 299.42); --info: oklch(0.7725 0.1365 215); --info-foreground: oklch(0.157 0.0197 299.42); /* rarity: hue pulled toward this scheme, clamped to its window */ --rarity-rare: oklch(0.7932 0.1054 277.5); --rarity-rare-foreground: oklch(0.157 0.0197 299.42); --rarity-epic: oklch(0.8088 0.1774 329.99); --rarity-epic-foreground: oklch(0.157 0.0197 299.42); --rarity-legendary: oklch(0.8503 0.0888 89.9); --rarity-legendary-foreground: oklch(0.157 0.0197 299.42); /* <<< end generated */ } .color-cyberpunk.light { --background: oklch(0.9656 0.0056 301.4); --foreground: oklch(0.242 0.0439 298.42); --card: oklch(1 0 0); --card-foreground: oklch(0.242 0.0439 298.42); --popover: oklch(1 0 0); --popover-foreground: oklch(0.242 0.0439 298.42); --primary: oklch(0.612 0.2427 352.86); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.7427 0.1214 194.86); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.9498 0.0063 301.39); --muted-foreground: oklch(0.4673 0.0667 299.12); --accent: oklch(0.7087 0.1184 194.81); --accent-foreground: oklch(1 0 0); --border: oklch(0.8733 0.0161 301.2); --input: oklch(0.916 0.0106 301.31); --ring: oklch(0.612 0.2427 352.86); --gradient-primary: linear-gradient(135deg, hsl(325 80% 50%), hsl(180 80% 40%)); --gradient-secondary: linear-gradient(135deg, hsl(260 15% 94%), hsl(260 20% 96%)); --gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(260 20% 96%)); --shadow-glow: 0 10px 40px -10px hsl(325 80% 50% / 0.3); --shadow-card: 0 4px 20px -4px hsl(260 30% 15% / 0.1); --sidebar-background: oklch(0.9833 0.0021 301.46); --sidebar-foreground: oklch(0.35 0.0466 299.29); --sidebar-primary: oklch(0.612 0.2427 352.86); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.9666 0.0042 301.42); --sidebar-accent-foreground: oklch(0.242 0.0439 298.42); --sidebar-border: oklch(0.9232 0.0114 301.29); --sidebar-ring: oklch(0.612 0.2427 352.86); /* >>> generated by scripts/gen-design-tokens.mjs — do not edit by hand */ /* body text: re-solved against the worst surface in this set */ --muted-foreground: oklch(0.4673 0.0667 299.12); /* -text role: readable on a surface, unlike the fill of the same name */ --primary-text: oklch(0.5654 0.2336 352.86); --accent-text: oklch(0.5393 0.0921 194.81); --destructive-text: oklch(0.5597 0.2286 27.74); /* status: hue pulled toward this scheme, clamped to its window */ --success: oklch(0.5338 0.1701 142.5); --success-foreground: oklch(1 0 0); --warning: oklch(0.5556 0.1029 82.5); --warning-foreground: oklch(1 0 0); --info: oklch(0.5437 0.0883 215); --info-foreground: oklch(1 0 0); /* rarity: hue pulled toward this scheme, clamped to its window */ --rarity-rare: oklch(0.5667 0.2 277.5); --rarity-rare-foreground: oklch(1 0 0); --rarity-epic: oklch(0.5736 0.2 330); --rarity-epic-foreground: oklch(1 0 0); --rarity-legendary: oklch(0.4782 0.0874 93.17); --rarity-legendary-foreground: oklch(0.9656 0.0056 301.4); /* <<< end generated */ } /* ============================================ VOLCANIC SCHEME - Molten Lava & Obsidian Obsidian black with molten orange and ember red ============================================ */ .color-volcanic { /* Obsidian Backgrounds */ --background: oklch(0.1665 0.0052 17.69); --foreground: oklch(0.9475 0.028 67.48); --card: oklch(0.2006 0.0059 17.66); --card-foreground: oklch(0.9475 0.028 67.48); --popover: oklch(0.2006 0.0059 17.66); --popover-foreground: oklch(0.9475 0.028 67.48); /* Molten Orange - Primary */ --primary: oklch(0.7223 0.1874 48.6); --primary-foreground: oklch(0 0 0); --primary-glow: oklch(0.7483 0.1622 45.6); --secondary: oklch(0.2594 0.0178 18.36); --secondary-foreground: oklch(0.9475 0.028 67.48); --muted: oklch(0.2316 0.0096 17.87); --muted-foreground: oklch(0.6236 0.0282 17.93); /* Ember Red - Accent */ --accent: oklch(0.6125 0.2276 27.27); --accent-foreground: oklch(1 0 0); --accent-glow: oklch(0.6686 0.1968 24.14); --destructive: oklch(0.5786 0.2137 27.17); --destructive-foreground: oklch(1 0 0); --border: oklch(0.3104 0.018 18.17); --input: oklch(0.2316 0.0096 17.87); --ring: oklch(0.7223 0.1874 48.6); --radius: 0.25rem; --gold-shimmer: oklch(0.8006 0.1324 55.1); --emerald-glow: oklch(0.6686 0.1968 24.14); --ruby-glow: oklch(0.6398 0.2196 26.02); --slate-deep: oklch(0.1434 0.0036 17.58); --gradient-gold: linear-gradient(135deg, var(--primary), var(--accent)); --gradient-emerald: linear-gradient(135deg, var(--accent), var(--accent-glow)); --gradient-slate: linear-gradient(180deg, var(--card), var(--slate-deep)); --gradient-primary: linear-gradient(135deg, var(--primary), var(--accent)); --gradient-secondary: linear-gradient(135deg, var(--card), hsl(0 10% 4%)); --gradient-card: linear-gradient(180deg, var(--card), hsl(0 10% 4%)); --shadow-gold: 0 10px 50px -10px color-mix(in oklab, var(--primary) 60%, transparent); --shadow-emerald: 0 10px 40px -10px color-mix(in oklab, var(--accent) 50%, transparent); --shadow-slate: 0 4px 20px -4px hsl(0 10% 2% / 0.7); --shadow-glow: 0 10px 50px -10px color-mix(in oklab, var(--primary) 60%, transparent); --shadow-card: 0 4px 20px -4px hsl(0 10% 2% / 0.7); --sidebar-background: oklch(0.1665 0.0052 17.69); --sidebar-foreground: oklch(0.9475 0.028 67.48); --sidebar-primary: oklch(0.7223 0.1874 48.6); --sidebar-primary-foreground: oklch(0 0 0); --sidebar-accent: oklch(0.2594 0.0178 18.36); --sidebar-accent-foreground: oklch(0.9475 0.028 67.48); --sidebar-border: oklch(0.3104 0.018 18.17); --sidebar-ring: oklch(0.7223 0.1874 48.6); /* >>> generated by scripts/gen-design-tokens.mjs — do not edit by hand */ /* body text: re-solved against the worst surface in this set */ --muted-foreground: oklch(0.7896 0.0282 17.93); /* -text role: readable on a surface, unlike the fill of the same name */ --primary-text: oklch(0.7959 0.1285 48.61); --accent-text: oklch(0.798 0.1159 27.27); --destructive-text: oklch(0.798 0.1159 27.17); /* status: hue pulled toward this scheme, clamped to its window */ --success: oklch(0.7646 0.2 142.5); --success-foreground: oklch(0.1665 0.0052 17.69); --warning: oklch(0.7929 0.1689 70.01); --warning-foreground: oklch(0.1665 0.0052 17.69); --info: oklch(0.7782 0.1314 234.99); --info-foreground: oklch(0.1665 0.0052 17.69); /* rarity: hue pulled toward this scheme, clamped to its window */ --rarity-rare: oklch(0.7924 0.1085 283.5); --rarity-rare-foreground: oklch(0.1665 0.0052 17.69); --rarity-epic: oklch(0.8044 0.1647 321.02); --rarity-epic-foreground: oklch(0.1665 0.0052 17.69); --rarity-legendary: oklch(0.817 0.1056 89.59); --rarity-legendary-foreground: oklch(0.1665 0.0052 17.69); /* <<< end generated */ } .color-volcanic.light { --background: oklch(0.9716 0.007 67.74); --foreground: oklch(0.2105 0.0082 17.82); --card: oklch(1 0 0); --card-foreground: oklch(0.2105 0.0082 17.82); --popover: oklch(1 0 0); --popover-foreground: oklch(0.2105 0.0082 17.82); --primary: oklch(0.665 0.1804 47.04); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.9414 0.0088 67.72); --secondary-foreground: oklch(0.2105 0.0082 17.82); --muted: oklch(0.9557 0.0053 67.76); --muted-foreground: oklch(0.4943 0.0267 18.09); --accent: oklch(0.5617 0.2147 27.78); --accent-foreground: oklch(1 0 0); --border: oklch(0.8885 0.0134 67.65); --input: oklch(0.8885 0.0134 67.65); --ring: oklch(0.665 0.1804 47.04); --gradient-primary: linear-gradient(135deg, hsl(25 90% 48%), hsl(0 75% 48%)); --gradient-secondary: linear-gradient(135deg, hsl(30 25% 92%), hsl(30 40% 96%)); --gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(30 40% 96%)); --shadow-glow: 0 10px 40px -10px hsl(25 90% 48% / 0.4); --shadow-card: 0 4px 20px -4px hsl(0 10% 10% / 0.1); --sidebar-background: oklch(0.9853 0.0017 67.8); --sidebar-foreground: oklch(0.369 0.0187 18.03); --sidebar-primary: oklch(0.665 0.1804 47.04); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.9703 0.0026 67.79); --sidebar-accent-foreground: oklch(0.2105 0.0082 17.82); --sidebar-border: oklch(0.9332 0.0071 67.74); --sidebar-ring: oklch(0.665 0.1804 47.04); /* >>> generated by scripts/gen-design-tokens.mjs — do not edit by hand */ /* body text: re-solved against the worst surface in this set */ --muted-foreground: oklch(0.4943 0.0267 18.09); /* -text role: readable on a surface, unlike the fill of the same name */ --primary-text: oklch(0.5727 0.1583 47.04); --accent-text: oklch(0.5617 0.2147 27.78); --destructive-text: oklch(0.5749 0.2137 27.17); /* status: hue pulled toward this scheme, clamped to its window */ --success: oklch(0.5432 0.1701 142.5); --success-foreground: oklch(1 0 0); --warning: oklch(0.5672 0.1083 70); --warning-foreground: oklch(1 0 0); --info: oklch(0.5558 0.1061 235); --info-foreground: oklch(1 0 0); /* rarity: hue pulled toward this scheme, clamped to its window */ --rarity-rare: oklch(0.5758 0.2 277.5); --rarity-rare-foreground: oklch(1 0 0); --rarity-epic: oklch(0.5833 0.2 315); --rarity-epic-foreground: oklch(1 0 0); --rarity-legendary: oklch(0.4935 0.0885 85.21); --rarity-legendary-foreground: oklch(0.9716 0.007 67.74); /* <<< end generated */ } /* ============================================ ARCTIC SCHEME - Glacial Blue & Aurora Green Deep glacial blue with ice blue and aurora accents ============================================ */ .color-arctic { /* Glacial Backgrounds */ --background: oklch(0.1887 0.0258 249.34); --foreground: oklch(0.9626 0.0064 228.84); --card: oklch(0.2216 0.0306 249.36); --card-foreground: oklch(0.9626 0.0064 228.84); --popover: oklch(0.2216 0.0306 249.36); --popover-foreground: oklch(0.9626 0.0064 228.84); /* Ice Blue - Primary */ --primary: oklch(0.7513 0.148 236.31); --primary-foreground: oklch(0.1887 0.0258 249.34); --primary-glow: oklch(0.8325 0.1164 222.82); --secondary: oklch(0.2943 0.0365 249.16); --secondary-foreground: oklch(0.9626 0.0064 228.84); --muted: oklch(0.2643 0.0269 248.88); --muted-foreground: oklch(0.689 0.0364 229.57); /* Aurora Green - Accent */ --accent: oklch(0.8502 0.1871 161.31); --accent-foreground: oklch(0.1887 0.0258 249.34); --accent-glow: oklch(0.8741 0.1866 159.58); --destructive: oklch(0.5786 0.2137 27.17); --destructive-foreground: oklch(1 0 0); --border: oklch(0.3628 0.0413 249.03); --input: oklch(0.2643 0.0269 248.88); --ring: oklch(0.7513 0.148 236.31); --radius: 0.75rem; --gold-shimmer: oklch(0.8039 0.1192 232.69); --emerald-glow: oklch(0.8777 0.1737 164.74); --ruby-glow: oklch(0.5988 0.2021 25.78); --slate-deep: oklch(0.1542 0.0175 247.2); --gradient-gold: linear-gradient(135deg, var(--primary), var(--accent)); --gradient-emerald: linear-gradient(135deg, var(--accent), var(--accent-glow)); --gradient-slate: linear-gradient(180deg, var(--card), var(--slate-deep)); --gradient-primary: linear-gradient(135deg, var(--primary), var(--accent)); --gradient-secondary: linear-gradient(135deg, var(--card), hsl(210 50% 6%)); --gradient-card: linear-gradient(180deg, var(--card), hsl(210 50% 6%)); --shadow-gold: 0 10px 50px -10px color-mix(in oklab, var(--primary) 50%, transparent); --shadow-emerald: 0 10px 40px -10px color-mix(in oklab, var(--accent) 40%, transparent); --shadow-slate: 0 4px 20px -4px hsl(210 50% 4% / 0.6); --shadow-glow: 0 10px 50px -10px color-mix(in oklab, var(--primary) 50%, transparent); --shadow-card: 0 4px 20px -4px hsl(210 50% 4% / 0.6); --sidebar-background: oklch(0.1887 0.0258 249.34); --sidebar-foreground: oklch(0.9626 0.0064 228.84); --sidebar-primary: oklch(0.7513 0.148 236.31); --sidebar-primary-foreground: oklch(0.1887 0.0258 249.34); --sidebar-accent: oklch(0.2943 0.0365 249.16); --sidebar-accent-foreground: oklch(0.9626 0.0064 228.84); --sidebar-border: oklch(0.3628 0.0413 249.03); --sidebar-ring: oklch(0.7513 0.148 236.31); /* >>> generated by scripts/gen-design-tokens.mjs — do not edit by hand */ /* body text: re-solved against the worst surface in this set */ --muted-foreground: oklch(0.7907 0.0364 229.57); /* -text role: readable on a surface, unlike the fill of the same name */ --primary-text: oklch(0.786 0.1258 236.29); --accent-text: oklch(0.8502 0.1871 161.31); --destructive-text: oklch(0.8045 0.1114 27.17); /* status: hue pulled toward this scheme, clamped to its window */ --success: oklch(0.7682 0.1738 160); --success-foreground: oklch(0.1887 0.0258 249.34); --warning: oklch(0.7957 0.1605 82.5); --warning-foreground: oklch(0.1887 0.0258 249.34); --info: oklch(0.786 0.1258 236.28); --info-foreground: oklch(0.1887 0.0258 249.34); /* rarity: hue pulled toward this scheme, clamped to its window */ --rarity-rare: oklch(0.8631 0.0669 270.72); --rarity-rare-foreground: oklch(0.1887 0.0258 249.34); --rarity-epic: oklch(0.8081 0.142 315.03); --rarity-epic-foreground: oklch(0.1887 0.0258 249.34); --rarity-legendary: oklch(0.8567 0.0806 89.68); --rarity-legendary-foreground: oklch(0.1887 0.0258 249.34); /* <<< end generated */ } .color-arctic.light { --background: oklch(0.9779 0.0064 228.84); --foreground: oklch(0.2107 0.0312 249.51); --card: oklch(1 0 0); --card-foreground: oklch(0.2107 0.0312 249.51); --popover: oklch(1 0 0); --popover-foreground: oklch(0.2107 0.0312 249.51); --primary: oklch(0.6324 0.1392 239.2); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.94 0.0103 228.9); --secondary-foreground: oklch(0.2107 0.0312 249.51); --muted: oklch(0.9549 0.0065 228.84); --muted-foreground: oklch(0.5178 0.0384 230.03); --accent: oklch(0.6794 0.1409 163.51); --accent-foreground: oklch(1 0 0); --border: oklch(0.8865 0.0163 229); --input: oklch(0.8865 0.0163 229); --ring: oklch(0.6324 0.1392 239.2); --gradient-primary: linear-gradient(135deg, hsl(200 85% 45%), hsl(160 75% 40%)); --gradient-secondary: linear-gradient(135deg, hsl(200 30% 92%), hsl(200 50% 97%)); --gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(200 50% 97%)); --shadow-glow: 0 10px 40px -10px hsl(200 85% 45% / 0.3); --shadow-card: 0 4px 20px -4px hsl(210 50% 10% / 0.1); --sidebar-background: oklch(0.9851 0.0026 228.78); --sidebar-foreground: oklch(0.3723 0.0427 249.04); --sidebar-primary: oklch(0.6324 0.1392 239.2); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.9699 0.0034 228.8); --sidebar-accent-foreground: oklch(0.2107 0.0312 249.51); --sidebar-border: oklch(0.9321 0.0086 228.87); --sidebar-ring: oklch(0.6324 0.1392 239.2); /* >>> generated by scripts/gen-design-tokens.mjs — do not edit by hand */ /* body text: re-solved against the worst surface in this set */ --muted-foreground: oklch(0.5178 0.0384 230.03); /* -text role: readable on a surface, unlike the fill of the same name */ --primary-text: oklch(0.5545 0.1253 239.2); --accent-text: oklch(0.5446 0.1168 163.51); --destructive-text: oklch(0.5747 0.2137 27.17); /* status: hue pulled toward this scheme, clamped to its window */ --success: oklch(0.5468 0.1131 160); --success-foreground: oklch(1 0 0); --warning: oklch(0.5646 0.1029 82.5); --warning-foreground: oklch(1 0 0); --info: oklch(0.5565 0.113 239.2); --info-foreground: oklch(1 0 0); /* rarity: hue pulled toward this scheme, clamped to its window */ --rarity-rare: oklch(0.5725 0.1409 284); --rarity-rare-foreground: oklch(1 0 0); --rarity-epic: oklch(0.5783 0.1409 327); --rarity-epic-foreground: oklch(1 0 0); --rarity-legendary: oklch(0.4874 0.0879 95.13); --rarity-legendary-foreground: oklch(0.9779 0.0064 228.84); /* <<< end generated */ } /* ============================================ UTILITY CLASSES ============================================ */ /* Gradient backgrounds */ .bg-gradient-gold { background: var(--gradient-gold); } .bg-gradient-emerald { background: var(--gradient-emerald); } .bg-gradient-slate { background: var(--gradient-slate); } .bg-gradient-primary { background: var(--gradient-primary); } .bg-gradient-secondary { background: var(--gradient-secondary); } .bg-gradient-card { background: var(--gradient-card); } /* Shadow utilities */ .shadow-gold { box-shadow: var(--shadow-gold); } .shadow-emerald { box-shadow: var(--shadow-emerald); } .shadow-slate { box-shadow: var(--shadow-slate); } .shadow-glow { box-shadow: var(--shadow-glow); } .shadow-card { box-shadow: var(--shadow-card); } /* Text gradient */ .text-gradient-gold { background: var(--gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-gradient-emerald { background: var(--gradient-emerald); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-gradient-primary { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Smooth color transitions */ .transition-colors-theme { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } /* Hover glow effect */ .hover-glow:hover { box-shadow: var(--shadow-glow); } .hover-glow-emerald:hover { box-shadow: var(--shadow-emerald); }