@layer base {
  [data-color-theme="OsakaJade"] {
    /* Brand colors */
    --duck-yellow: #e0af68;
    --duck-orange: #f7768e;
    --duck-teal: #2ac3de;
    --duck-forest: #565f89;
    --duck-dark: #c5cdd9;
    --duck-beige: #1f2335;

    /* Page background */
    --pixel-grid-color: rgba(42, 195, 222, 0.06);

    /* Glass surfaces */
    --glass-bg: rgba(0, 0, 0, 0.25);
    --glass-border: rgba(42, 195, 222, 0.12);
    --dock-bg: rgba(0, 0, 0, 0.35);
    --dock-border: rgba(42, 195, 222, 0.08);
    --dock-tooltip-bg: rgba(0, 0, 0, 0.9);

    /* Card component */
    --card-bg: rgba(22, 22, 30, 0.92);
    --card-grid-color: rgba(42, 195, 222, 0.04);

    --cta: 189 73.2% 51.8%;
    --cta-foreground: 235 18.8% 12.5%;

    --naturegreen: 188.9 88.6% 44.7%;
    --naturegreen-foreground: 235 18.8% 12.5%;

    --background: 235 18.8% 12.5%;
    --foreground: 216 20.8% 81.2%;

    --card: 240 15.4% 10.2%;
    --card-foreground: 216 20.8% 81.2%;

    --popover: 240 15.4% 10.2%;
    --popover-foreground: 216 20.8% 81.2%;

    --primary: 189 73.2% 51.8%;
    --primary-foreground: 235 18.8% 12.5%;

    --secondary: 228 23.4% 21%;
    --secondary-foreground: 216 20.8% 81.2%;

    --muted: 229.1 26.2% 16.5%;
    --muted-foreground: 229.4 22.9% 43.7%;

    --accent: 188.9 88.6% 44.7%;
    --accent-foreground: 235 18.8% 12.5%;

    --destructive: 348.8 89% 71.6%;
    --destructive-foreground: 216 20.8% 81.2%;

    --success: 88.8 50.5% 61.2%;
    --success-foreground: 235 18.8% 12.5%;

    --brand: 189 73.2% 51.8%;
    --brand-foreground: 235 18.8% 12.5%;
    --brand-muted: 229.1 26.2% 16.5%;

    --warning: 35.5 65.9% 64.3%;
    --warning-foreground: 235 18.8% 12.5%;

    --border: 228 23.4% 21%;
    --input: 228 23.4% 21%;
    --ring: 189 73.2% 51.8%;

    --radius: 0.5rem;

    /* Chart gradients */
    --chart-primary: 189 73.2% 51.8%;
    --chart-secondary: 35.5 65.9% 64.3%;

    /* Status colors */
    --status-success: 88.8 50.5% 61.2%;
    --status-warning: 35.5 65.9% 64.3%;
    --status-in-progress: 189 73.2% 51.8%;

    --sidebar-background: 240 15.4% 10.2%;
    --sidebar-foreground: 229.4 22.9% 43.7%;
    --sidebar-primary: 189 73.2% 51.8%;
    --sidebar-primary-foreground: 235 18.8% 12.5%;
    --sidebar-accent: 229.1 26.2% 16.5%;
    --sidebar-accent-foreground: 216 20.8% 81.2%;
    --sidebar-border: 228 23.4% 21%;
    --sidebar-ring: 189 73.2% 51.8%;

    /* Hover Effect */
    --ctahover: 188.9 88.6% 44.7%;
  }
}