Tailwind v4

@import "tailwindcss";
@import "./styles/tokens.css";
@import "./styles/typography.css";
@import "./styles/motion.css";
@import "./styles/astro.css";
@import "./styles/platform.css";

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

:root {
  /* semantic tokens */
  --background: var(--color-neutral-50);
  --foreground: var(--color-neutral-950);

  --card: var(--color-neutral-0);
  --card-foreground: var(--color-neutral-950);

  --primary: var(--color-signal-500);
  --primary-foreground: var(--color-neutral-950);
  --secondary: var(--color-alloy-500);
  --secondary-foreground: var(--color-neutral-950);
  --tertiary: var(--color-blue-500);
  --tertiary-foreground: var(--color-neutral-950);

  --muted: var(--color-neutral-100);
  --muted-foreground: var(--color-neutral-600);

  --border: var(--color-neutral-200);
  --ring: var(--color-signal-500);
  --overlay: oklch(0.178 0.006 271 / 0.4); /* scrim — the one translucent token */

  --positive: var(--color-positive-500);
  --caution: var(--color-caution-500);
  --warning: var(--color-warning-500);
  --status-foreground: var(--color-neutral-950);
}

.dark {
  --background: var(--color-neutral-950);
  --foreground: var(--color-neutral-50);

  --card: var(--color-neutral-900);
  --card-foreground: var(--color-neutral-50);

  --muted: var(--color-neutral-800);
  --muted-foreground: var(--color-neutral-400);

  --border: var(--color-neutral-700);
  --overlay: oklch(0 0 0 / 0.65);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-tertiary: var(--tertiary);
  --color-tertiary-foreground: var(--tertiary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-border: var(--border);
  --color-ring: var(--ring);
  --color-overlay: var(--overlay);
  --color-positive: var(--positive);
  --color-caution: var(--caution);
  --color-warning: var(--warning);
  --color-status-foreground: var(--status-foreground);
}

@layer base {
  *,
  ::after,
  ::before {
    border-color: var(--border);
  }

  body {
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  ::selection {
    background: var(--color-signal-500);
    color: var(--color-neutral-950);
  }
}

/*
 * AstroSiege — primitive tokens
 * Opaque OKLCH values. Each scale steps from the base (500) towards white.
 * Components use the semantic names in globals.css.
 */

@theme static {
  --color-*: initial;
  --radius-*: initial;

  /* primary · signal */
  --color-signal-500: oklch(0.655 0.188 32.8);
  --color-signal-400: oklch(0.724 0.151 32.8);
  --color-signal-300: oklch(0.793 0.113 32.8);
  --color-signal-200: oklch(0.862 0.075 32.8);
  --color-signal-100: oklch(0.931 0.038 32.8);
  --color-signal-50: oklch(0.966 0.019 32.8);

  /* secondary · alloy */
  --color-alloy-500: oklch(0.864 0.008 186.9);
  --color-alloy-400: oklch(0.891 0.006 186.9);
  --color-alloy-300: oklch(0.919 0.005 186.9);
  --color-alloy-200: oklch(0.946 0.003 186.9);
  --color-alloy-100: oklch(0.973 0.002 186.9);
  --color-alloy-50: oklch(0.986 0.001 186.9);

  /* tertiary · blue */
  --color-blue-500: oklch(0.628 0.147 252.7);
  --color-blue-400: oklch(0.703 0.117 252.7);
  --color-blue-300: oklch(0.777 0.088 252.7);
  --color-blue-200: oklch(0.851 0.059 252.7);
  --color-blue-100: oklch(0.926 0.029 252.7);
  --color-blue-50: oklch(0.963 0.015 252.7);

  /* neutral */
  --color-neutral-0: oklch(1 0 0);
  --color-neutral-50: oklch(0.95 0.003 174.5);
  --color-neutral-100: oklch(0.873 0.006 211);
  --color-neutral-200: oklch(0.819 0.007 219.6);
  --color-neutral-300: oklch(0.76 0.01 242.9);
  --color-neutral-400: oklch(0.677 0.011 248);
  --color-neutral-500: oklch(0.594 0.013 252.2);
  --color-neutral-600: oklch(0.484 0.013 256.7);
  --color-neutral-700: oklch(0.37 0.012 258.4);
  --color-neutral-800: oklch(0.276 0.01 260.7);
  --color-neutral-900: oklch(0.222 0.01 268.2);
  --color-neutral-950: oklch(0.178 0.006 271);

  /* status */
  --color-positive-500: oklch(0.682 0.135 160.9);
  --color-positive-300: oklch(0.809 0.081 160.9);
  --color-positive-100: oklch(0.905 0.04 160.9);
  --color-caution-500: oklch(0.764 0.142 72.2);
  --color-caution-300: oklch(0.858 0.085 72.2);
  --color-caution-100: oklch(0.929 0.042 72.2);
  --color-warning-500: oklch(0.604 0.205 12.4);
  --color-warning-300: oklch(0.763 0.123 12.4);
  --color-warning-100: oklch(0.881 0.062 12.4);

  /* spacing */
  --spacing: 0.25rem;

  /* radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  /* chamfer — the cut top-right corner */
  --chamfer-sm: 6px;
  --chamfer-md: 10px;
  --chamfer-lg: 16px;
}

/*
 * AstroSiege — typography
 */

@theme static {
  /* Font families */
  --font-sans: var(--font-inter), "Inter", sans-serif;
  --font-display: var(--font-tomorrow), "Tomorrow", sans-serif;
  --font-mono: var(--font-jetbrains), "JetBrains Mono", monospace;

  /* Font sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* Line heights */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
}

/*
 * AstroSiege — motion
 * One curve for everything that enters or moves; its mirror for exits.
 */

@theme static {
  /* Curve */
  --ease-siege: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-siege-in: cubic-bezier(0.64, 0, 0.78, 0);

  /* Enter on the curve, exit on its mirror */
  --animate-fade-in: fade-in var(--duration-base) var(--ease-siege) both;
  --animate-fade-out: fade-out var(--duration-fast) var(--ease-siege-in) both;
  --animate-pop-in: pop-in var(--duration-base) var(--ease-siege) both;
  --animate-pop-out: pop-out var(--duration-fast) var(--ease-siege-in) both;
  --animate-rise-in: rise-in var(--duration-slow) var(--ease-siege) both;
  --animate-rise-out: rise-out var(--duration-base) var(--ease-siege-in) both;
  --animate-slide-in: slide-in var(--duration-slow) var(--ease-siege) both;
  --animate-slide-out: slide-out var(--duration-base) var(--ease-siege-in) both;

  @keyframes fade-in {
    from { opacity: 0; }
  }
  @keyframes fade-out {
    to { opacity: 0; }
  }
  @keyframes pop-in {
    from { opacity: 0; scale: 0.96; translate: var(--from-x, 0) var(--from-y, 0); }
  }
  @keyframes pop-out {
    to { opacity: 0; scale: 0.96; translate: var(--from-x, 0) var(--from-y, 0); }
  }
  @keyframes rise-in {
    from { opacity: 0; scale: 0.96; translate: 0 var(--move); }
  }
  @keyframes rise-out {
    to { opacity: 0; scale: 0.96; translate: 0 calc(var(--move) / 2); }
  }
  @keyframes slide-in {
    from { translate: var(--slide-x, 100%) var(--slide-y, 0); }
  }
  @keyframes slide-out {
    to { translate: var(--slide-x, 100%) var(--slide-y, 0); }
  }
}

:root {
  /* Speed */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* Delay */
  --delay: 80ms;

  /* Stagger — per item in a sequence */
  --stagger: 40ms;

  /* Distance */
  --move: 8px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --move: 0px;
    --stagger: 0ms;
  }
}