/*
 * The source of css/components.css, compiled at build time (`pnpm build:css`); the consumer needs no
 * Tailwind. Everything the package draws lives in the `voffice-components` cascade layer, BELOW a
 * site's own `components` and `utilities` (css/layers.css is the order statement), so a site rule on a
 * `data-part` wins without a specificity fight.
 *
 * The compiled file declares no custom property on :root/:host: Tailwind's theme is imported as
 * `reference` with its values inlined into the utilities, and every colour/radius utility resolves to
 * a shadcn variable (`bg-primary` → `var(--primary)`), never to `var(--color-*)`, so the package cannot
 * redefine or collide with a site's own Tailwind theme. The token contract is css/tokens.css.
 *
 * Each unit's rules (keyed on data-part and state attributes) live beside its components in
 * src/<dir>/styles.css and are imported here, the foundation first.
 */
@layer properties, theme, base, voffice-tokens, voffice-components, components, utilities;

@import "tailwindcss/theme.css" theme(reference inline);
@import "tailwindcss/utilities.css" layer(voffice-components);

@import "../src/primitives/styles.css" layer(voffice-components);
@import "../src/rich-text/styles.css" layer(voffice-components);
@import "../src/contact/styles.css" layer(voffice-components);
@import "../src/search/styles.css" layer(voffice-components);
@import "../src/results/styles.css" layer(voffice-components);
@import "../src/card/styles.css" layer(voffice-components);
@import "../src/showcase/styles.css" layer(voffice-components);
@import "../src/rental/styles.css" layer(voffice-components);
@import "../src/quote/styles.css" layer(voffice-components);
@import "../src/booking/styles.css" layer(voffice-components);
@import "../src/map/styles.css" layer(voffice-components);

/* The generated calendar (src/ui/calendar.tsx) rounds its day cells with `var(--radius-4xl)`. The theme
   is imported as reference, so the variable is declared on the calendar root, never on :root. */
@layer voffice-components {
  [data-slot="calendar"] {
    --radius-4xl: calc(var(--radius) * 2.6);
  }
}

@source "../src";
@source not "../src/**/__tests__";

@theme inline reference {
  --font-heading: var(--font-heading);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --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-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --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);
}