1  @import "tailwindcss";
  2  
  3  @source "./src/**/*.{rs,html,css}";
  4  @source "../libs/ui/**/*.{rs,html,css}";
  5  
  6  /* Active theme */
  7  @import "./themes/gold.css";
  8  
  9  @theme inline {
 10    --color-background: var(--background);
 11    --color-foreground: var(--foreground);
 12    --color-card: var(--card);
 13    --color-card-foreground: var(--card-foreground);
 14    --color-popover: var(--popover);
 15    --color-popover-foreground: var(--popover-foreground);
 16    --color-primary: var(--primary);
 17    --color-primary-foreground: var(--primary-foreground);
 18    --color-secondary: var(--secondary);
 19    --color-secondary-foreground: var(--secondary-foreground);
 20    --color-muted: var(--muted);
 21    --color-muted-foreground: var(--muted-foreground);
 22    --color-accent: var(--accent);
 23    --color-accent-foreground: var(--accent-foreground);
 24    --color-destructive: var(--destructive);
 25    --color-destructive-foreground: var(--primary-foreground);
 26    --color-border: var(--border);
 27    --color-input: var(--input);
 28    --color-ring: var(--ring);
 29    --color-chart-1: var(--chart-1);
 30    --color-chart-2: var(--chart-2);
 31    --color-chart-3: var(--chart-3);
 32    --color-chart-4: var(--chart-4);
 33    --color-chart-5: var(--chart-5);
 34    --color-sidebar: var(--sidebar);
 35    --color-sidebar-foreground: var(--sidebar-foreground);
 36    --color-sidebar-primary: var(--sidebar-primary);
 37    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
 38    --color-sidebar-accent: var(--sidebar-accent);
 39    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 40    --color-sidebar-border: var(--sidebar-border);
 41    --color-sidebar-ring: var(--sidebar-ring);
 42    --radius-sm: calc(var(--radius) - 4px);
 43    --radius-md: calc(var(--radius) - 2px);
 44    --radius-lg: var(--radius);
 45    --radius-xl: calc(var(--radius) + 4px);
 46    --radius-2xl: calc(var(--radius) + 8px);
 47    --radius-3xl: calc(var(--radius) + 12px);
 48  
 49    /* Animation definitions */
 50    --animate-slide-in-from-right: slide-in-from-right 0.2s ease-out;
 51    --animate-slide-out-to-right: slide-out-to-right 0.2s ease-out;
 52    --animate-in: forwards cubic-bezier(0.16, 1, 0.3, 1);
 53    --animate-out: forwards cubic-bezier(0.16, 1, 0.3, 1);
 54  
 55    @keyframes slide-in-from-right {
 56      from { transform: translateX(100%); }
 57      to { transform: translateX(0); }
 58    }
 59  
 60    @keyframes slide-out-to-right {
 61      from { transform: translateX(0); }
 62      to { transform: translateX(100%); }
 63    }
 64  }
 65  
 66  @layer base {
 67    * {
 68      @apply border-border;
 69    }
 70  
 71    html {
 72      color-scheme: dark;
 73    }
 74  
 75    body {
 76      @apply min-h-screen bg-background text-foreground antialiased;
 77      background-image:
 78        radial-gradient(circle at top, color-mix(in oklab, var(--primary) 14%, transparent) 0%, transparent 28%),
 79        radial-gradient(circle at left 20%, color-mix(in oklab, var(--accent) 10%, transparent) 0%, transparent 22%),
 80        linear-gradient(to bottom, color-mix(in oklab, var(--primary) 5%, transparent), transparent 18%);
 81    }
 82  
 83    ::selection {
 84      background: color-mix(in oklab, var(--primary) 32%, transparent);
 85      color: var(--foreground);
 86    }
 87  }
 88  
 89  @utility panel-shell {
 90    @apply rounded-2xl border border-border bg-card/92 backdrop-blur-sm;
 91    box-shadow: var(--app-shell-glow);
 92  }
 93  
 94  @utility panel-shell-strong {
 95    @apply rounded-2xl border border-border bg-card/94 backdrop-blur-md;
 96    box-shadow: var(--app-shell-glow-strong);
 97  }
 98  
 99  @utility mellow-hover {
100    @apply transition-all duration-300 ease-in-out hover:border-primary/50 hover:bg-accent/40;
101  }
102  
103  @utility gold-input {
104    @apply rounded-2xl border border-border bg-background/70 text-foreground placeholder:text-muted-foreground transition-all duration-300 ease-in-out;
105    @apply hover:border-primary/45 focus:border-primary/60 focus:ring-2 focus:ring-primary/20 focus:outline-none;
106  }
107  
108  @utility gold-button-outline {
109    @apply inline-flex items-center gap-2 rounded-2xl border border-border bg-background/70 px-4 py-2 text-foreground transition-all duration-300 ease-in-out;
110    @apply hover:border-primary/50 hover:bg-accent/45;
111  }
112  
113  @utility gold-card {
114    @apply rounded-xl border border-border bg-card/95 backdrop-blur-sm transition-all duration-300 ease-in-out;
115    box-shadow: var(--app-shell-glow);
116  }