:root {
    --radius: 0.625rem;
    --type-scale: 1;
    --row-h-desktop: 36px;
    --brand-primary: #5468FF;
    --brand-primary-rgb: 84 104 255;
    --brand-on-primary: #FFFFFF;
    --brand-bg-dark: #0B0B0C;
    --brand-accent: #1D1F24;
    --brand-on-ground-text: #F9FAFB;
    --brand-on-ground-muted: #9CA3AF;
    --brand-on-ground: #6273FF;
    --app-font-family: var(--font-inter), system-ui, sans-serif;
    --brand-action: #3F4FD9;
    --brand-action-rgb: 63 79 217;
    --brand-on-action: #FFFFFF;
    --brand-action-hover: #2839CC;
    --background: 220 16% 96%; --foreground: 230 13% 9%;
    --card: 0 0% 100%; --card-foreground: 230 13% 9%;
    --popover: 0 0% 100%; --popover-foreground: 230 13% 9%;
    --primary: 234 67% 55%; --primary-foreground: 0 0% 100%;
    --secondary: 223 11% 13%; --secondary-foreground: 220 9% 94%;
    --muted: 220 20% 94%; --muted-foreground: 224 8% 37%;
    --accent: 234 67% 55%; --accent-foreground: 0 0% 100%;
    --destructive: 4 70% 46%; --destructive-foreground: 0 0% 100%;
    --border: 222 15% 87%; --input: 222 15% 87%; --ring: 233 100% 66%;
  }
  .dark {
    --brand-action: #6273FF;
    --brand-action-rgb: 98 115 255;
    --brand-on-action: #0B0B0C;
    --brand-action-hover: #8693FF;
    --background: 240 4% 5%; --foreground: 220 9% 94%;
    --card: 228 11% 9%; --card-foreground: 220 9% 94%;
    --popover: 228 11% 9%; --popover-foreground: 220 9% 94%;
    --primary: 234 100% 69%; --primary-foreground: 240 4% 5%;
    --secondary: 223 11% 13%; --secondary-foreground: 220 9% 94%;
    --muted: 223 11% 13%; --muted-foreground: 225 6% 63%;
    --accent: 234 100% 69%; --accent-foreground: 240 4% 5%;
    --destructive: 4 70% 46%; --destructive-foreground: 0 0% 100%;
    --border: 222 11% 18%; --input: 222 11% 18%; --ring: 233 100% 66%;
  }