/* Greyhaven HTMX Showcase — Tailwind v4 source
 *
 * Pairs the generated `dist/greyhaven.htmx.css` with the design system tokens
 * so a plain HTML page (no React) can render every component via data-slot
 * attribute selectors.
 *
 * Compiled output: public/htmx.css (served at /htmx.css)
 */

@import "tailwindcss";
@import "tw-animate-css";
@import "../app/tokens/tokens-light.css";
@import "../app/tokens/tokens-dark.css";
@import "../dist/greyhaven.htmx.css";

@source "./*.html";
@source "../public/htmx.html";

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

/* Self-hosted Aspekta (served from /fonts/) */
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/Aspekta-400.woff2') format('woff2'); }
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/Aspekta-500.woff2') format('woff2'); }
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/Aspekta-600.woff2') format('woff2'); }
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/Aspekta-700.woff2') format('woff2'); }

:root {
  --radius: 0.375rem;
}

@theme inline {
  --font-sans: 'Aspekta', ui-sans-serif, system-ui, sans-serif;
  /* Matches React's `var(--font-source-serif, 'Source Serif 4'), 'Source Serif Pro', Georgia, serif`.
   * Next.js injects --font-source-serif via next/font/google. We load Source Serif 4 from
   * Google Fonts directly in htmx.html <link>, so naming it here is enough. */
  --font-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --color-background: rgb(var(--background));
  --color-foreground: rgb(var(--foreground));
  --color-card: rgb(var(--card));
  --color-card-foreground: rgb(var(--card-foreground));
  --color-popover: rgb(var(--popover));
  --color-popover-foreground: rgb(var(--popover-foreground));
  --color-primary: rgb(var(--primary));
  --color-primary-foreground: rgb(var(--primary-foreground));
  --color-secondary: rgb(var(--secondary));
  --color-secondary-foreground: rgb(var(--secondary-foreground));
  --color-muted: rgb(var(--muted));
  --color-muted-foreground: rgb(var(--muted-foreground));
  --color-accent: rgb(var(--accent));
  --color-accent-foreground: rgb(var(--accent-foreground));
  --color-destructive: rgb(var(--destructive));
  --color-destructive-foreground: rgb(var(--destructive-foreground));
  --color-border: rgb(var(--border));
  --color-input: rgb(var(--input));
  --color-ring: rgb(var(--ring));
  --color-chart-1: rgb(var(--chart-1));
  --color-chart-2: rgb(var(--chart-2));
  --color-chart-3: rgb(var(--chart-3));
  --color-chart-4: rgb(var(--chart-4));
  --color-chart-5: rgb(var(--chart-5));
  --color-hero-bg: rgb(var(--hero-bg));
  --color-sidebar: rgb(var(--sidebar));
  --color-sidebar-foreground: rgb(var(--sidebar-foreground));
  --color-sidebar-primary: rgb(var(--sidebar-primary));
  --color-sidebar-primary-foreground: rgb(var(--sidebar-primary-foreground));
  --color-sidebar-accent: rgb(var(--sidebar-accent));
  --color-sidebar-accent-foreground: rgb(var(--sidebar-accent-foreground));
  --color-sidebar-border: rgb(var(--sidebar-border));
  --color-sidebar-ring: rgb(var(--sidebar-ring));

  --radius-sm: calc(var(--radius) - 2px);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius) + 2px);
  --radius-xl: calc(var(--radius) + 4px);
}

@layer base {
  * {
    border-color: rgb(var(--border));
  }
  body {
    background-color: rgb(var(--background));
    color: rgb(var(--foreground));
    font-family: var(--font-sans);
  }
}