@layer base {
  [data-color-theme="CatppuccinMocha"] {
    /* Brand colors */
    --duck-yellow: #f9e2af;
    --duck-orange: #fab387;
    --duck-teal: #89b4fa;
    --duck-forest: #7f849c;
    --duck-dark: #cdd6f4;
    --duck-beige: #313244;

    /* Page background */
    --pixel-grid-color: rgba(137, 180, 250, 0.06);

    /* Glass surfaces */
    --glass-bg: rgba(0, 0, 0, 0.25);
    --glass-border: rgba(137, 180, 250, 0.12);
    --dock-bg: rgba(0, 0, 0, 0.35);
    --dock-border: rgba(137, 180, 250, 0.08);
    --dock-tooltip-bg: rgba(0, 0, 0, 0.9);

    /* Card component */
    --card-bg: rgba(24, 24, 37, 0.92);
    --card-grid-color: rgba(137, 180, 250, 0.04);

    --cta: 217.2 91.9% 75.9%;
    --cta-foreground: 240 21.1% 14.9%;

    --naturegreen: 189.2 71% 72.9%;
    --naturegreen-foreground: 240 21.1% 14.9%;

    --background: 240 21.1% 14.9%;
    --foreground: 226.2 63.9% 88%;

    --card: 240 21.3% 12%;
    --card-foreground: 226.2 63.9% 88%;

    --popover: 240 21.3% 12%;
    --popover-foreground: 226.2 63.9% 88%;

    --primary: 217.2 91.9% 75.9%;
    --primary-foreground: 240 21.1% 14.9%;

    --secondary: 234.3 13.2% 31.2%;
    --secondary-foreground: 226.2 63.9% 88%;

    --muted: 236.8 16.2% 22.9%;
    --muted-foreground: 229.7 12.8% 55.5%;

    --accent: 189.2 71% 72.9%;
    --accent-foreground: 240 21.1% 14.9%;

    --destructive: 343.3 81.2% 74.9%;
    --destructive-foreground: 240 21.1% 14.9%;

    --success: 115.5 54.1% 76.1%;
    --success-foreground: 240 21.1% 14.9%;

    --brand: 217.2 91.9% 75.9%;
    --brand-foreground: 240 21.1% 14.9%;
    --brand-muted: 236.8 16.2% 22.9%;

    --warning: 41.4 86% 83.1%;
    --warning-foreground: 240 21.1% 14.9%;

    --border: 234.3 13.2% 31.2%;
    --input: 234.3 13.2% 31.2%;
    --ring: 217.2 91.9% 75.9%;

    --radius: 0.5rem;

    /* Chart gradients */
    --chart-primary: 217.2 91.9% 75.9%;
    --chart-secondary: 41.4 86% 83.1%;

    /* Status colors */
    --status-success: 115.5 54.1% 76.1%;
    --status-warning: 41.4 86% 83.1%;
    --status-in-progress: 217.2 91.9% 75.9%;

    --sidebar-background: 240 21.3% 12%;
    --sidebar-foreground: 229.7 12.8% 55.5%;
    --sidebar-primary: 217.2 91.9% 75.9%;
    --sidebar-primary-foreground: 240 21.1% 14.9%;
    --sidebar-accent: 236.8 16.2% 22.9%;
    --sidebar-accent-foreground: 226.2 63.9% 88%;
    --sidebar-border: 234.3 13.2% 31.2%;
    --sidebar-ring: 217.2 91.9% 75.9%;

    /* Hover Effect */
    --ctahover: 189.2 71% 72.9%;
  }
}