fengling-auth-service/src/wwwroot/css/styles.css

/* ============================================
   shadcn UI Theme Variables
   Based on shadcn/ui default theme
   ============================================ */

/* Light Mode Variables */
:root {
    /* Background & Foreground */
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    
    /* Card */
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    
    /* Popover */
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    
    /* Primary */
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    
    /* Secondary */
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    
    /* Muted */
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    
    /* Accent */
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    
    /* Destructive */
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    
    /* Borders & Inputs */
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    
    /* Ring */
    --ring: 222.2 84% 4.9%;
    
    /* Radius */
    --radius: 0.5rem;
}

/* Dark Mode Variables */
.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
}

/* ============================================
   Base Styles
   ============================================ */

* {
    border-color: hsl(var(--border));
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-feature-settings: "rlig" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   Utility Classes
   ============================================ */

/* Background colors */
.bg-primary {
    background-color: hsl(var(--primary));
}

.bg-secondary {
    background-color: hsl(var(--secondary));
}

.bg-muted {
    background-color: hsl(var(--muted));
}

.bg-accent {
    background-color: hsl(var(--accent));
}

.bg-destructive {
    background-color: hsl(var(--destructive));
}

/* Text colors */
.text-primary-foreground {
    color: hsl(var(--primary-foreground));
}

.text-secondary-foreground {
    color: hsl(var(--secondary-foreground));
}

.text-muted-foreground {
    color: hsl(var(--muted-foreground));
}

.text-accent-foreground {
    color: hsl(var(--accent-foreground));
}

.text-destructive-foreground {
    color: hsl(var(--destructive-foreground));
}

.text-foreground {
    color: hsl(var(--foreground));
}

/* Borders */
.border-border {
    border-color: hsl(var(--border));
}

/* Hover effects */
.hover\:bg-muted:hover {
    background-color: hsl(var(--muted));
}

.hover\:bg-primary:hover {
    background-color: hsl(var(--primary));
}

.hover\:text-foreground:hover {
    color: hsl(var(--foreground));
}

/* ============================================
   Transitions
   ============================================ */

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* ============================================
   Component Styles
   ============================================ */

/* Button Styles */
.btn-primary {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.btn-primary:hover {
    background-color: hsl(var(--primary) / 0.9);
}

/* Card Styles */
.card {
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
}

.card-foreground {
    color: hsl(var(--card-foreground));
}

/* Input Styles */
.input {
    background-color: hsl(var(--background));
    border: 1px solid hsl(var(--input));
    color: hsl(var(--foreground));
}

.input:focus {
    outline: none;
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}