Sample theme file for Tailwind CSS 4

globals.css

/* app/globals.css */
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-brand-base: var(--brand-base);
  --color-brand-main: var(--brand-main);
  --color-brand-sub: var(--brand-sub);
  --color-brand-accent: var(--brand-accent);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

:root {
  --radius: 0.625rem;
  --brand-base: #a3bad9;
  --brand-main: #4a608c;
  --brand-sub: #2a3a59;
  --brand-accent: #d93425;
  --background: #f4f7fb;
  --foreground: #2a3a59;
  --card: #ffffff;
  --card-foreground: #2a3a59;
  --popover: #ffffff;
  --popover-foreground: #2a3a59;
  --primary: #4a608c;
  --primary-foreground: #f8fbff;
  --secondary: #a3bad9;
  --secondary-foreground: #2a3a59;
  --muted: #dde6f1;
  --muted-foreground: #5c6d8b;
  --accent: #d8e2ef;
  --accent-foreground: #2a3a59;
  --destructive: #d93425;
  --destructive-foreground: #fff7f6;
  --border: #d2dceb;
  --input: #d2dceb;
  --ring: #4a608c;
  --chart-1: #4a608c;
  --chart-2: #a3bad9;
  --chart-3: #2a3a59;
  --chart-4: #d93425;
  --chart-5: #6f87b0;
  --sidebar: #eef3f9;
  --sidebar-foreground: #2a3a59;
  --sidebar-primary: #4a608c;
  --sidebar-primary-foreground: #f8fbff;
  --sidebar-accent: #d8e2ef;
  --sidebar-accent-foreground: #2a3a59;
  --sidebar-border: #d2dceb;
  --sidebar-ring: #4a608c;
}

.dark {
  --background: #202c43;
  --foreground: #edf3fb;
  --card: #25324d;
  --card-foreground: #edf3fb;
  --popover: #25324d;
  --popover-foreground: #edf3fb;
  --primary: #a3bad9;
  --primary-foreground: #2a3a59;
  --secondary: #4a608c;
  --secondary-foreground: #edf3fb;
  --muted: #32435f;
  --muted-foreground: #c4d3e8;
  --accent: #3b4e71;
  --accent-foreground: #edf3fb;
  --destructive: #d93425;
  --destructive-foreground: #fff7f6;
  --border: rgba(163, 186, 217, 0.18);
  --input: rgba(163, 186, 217, 0.2);
  --ring: #a3bad9;
  --chart-1: #a3bad9;
  --chart-2: #4a608c;
  --chart-3: #d93425;
  --chart-4: #c4d3e8;
  --chart-5: #7d97bf;
  --sidebar: #25324d;
  --sidebar-foreground: #edf3fb;
  --sidebar-primary: #a3bad9;
  --sidebar-primary-foreground: #2a3a59;
  --sidebar-accent: #3b4e71;
  --sidebar-accent-foreground: #edf3fb;
  --sidebar-border: rgba(163, 186, 217, 0.18);
  --sidebar-ring: #a3bad9;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  html,
  body {
    margin: 0;
    padding: 0;
  }

  body {
    @apply bg-background text-foreground;
    background-image:
      radial-gradient(circle at top, rgb(163 186 217 / 0.22), transparent 34%),
      linear-gradient(180deg, rgb(255 255 255 / 0.55), transparent 22rem);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  main {
    max-width: 960px;
    margin: 0 auto;
  }
}

@layer components {
  .admin-content-stage {
    animation: admin-content-enter 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .brand-hero-surface {
    border-color: color-mix(in srgb, var(--brand-main) 14%, white);
    background-image: linear-gradient(
      135deg,
      color-mix(in srgb, var(--brand-base) 46%, white),
      var(--background) 52%,
      color-mix(in srgb, var(--brand-main) 12%, white)
    );
  }

  .brand-kicker {
    border-color: color-mix(in srgb, var(--brand-main) 20%, white);
    background-color: color-mix(in srgb, var(--brand-base) 44%, white);
    color: var(--brand-sub);
  }

  .brand-success-surface {
    border-color: color-mix(in srgb, var(--brand-main) 24%, white);
    background-color: color-mix(in srgb, var(--brand-base) 34%, white);
    color: var(--brand-sub);
  }
}

@keyframes admin-content-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-content-stage {
    animation: none;
  }
}