/* Tailwind CSS v4 input - compiled to public/tailwind.css. */
@import "tailwindcss";

@source "../app/**/*.{ts,js,tsx,jsx}";
@source "../../registry/components/**/*.{ts,js}";
@source "../components/**/*.{ts,js,tsx,jsx}";

/* --------------------------------------------------------------------------
   Webjs site theme - used by the docs chrome (header, nav, footer, prose).
   -------------------------------------------------------------------------- */
@theme {
  --color-fg:            var(--fg);
  --color-fg-muted:      var(--fg-muted);
  --color-fg-subtle:     var(--fg-subtle);

  --color-bg:            var(--bg);
  --color-bg-elev:       var(--bg-elev);
  --color-bg-subtle:     var(--bg-subtle);
  --color-bg-sunken:     var(--bg-sunken);

  --color-border:        var(--border);
  --color-border-strong: var(--border-strong);

  --color-accent:        var(--accent);
  --color-accent-hover:  var(--accent-hover);
  --color-accent-fg:     var(--accent-fg);
  --color-accent-tint:   var(--accent-tint);

  /* Brand-accent aliases - same warm-orange tokens as the chrome `accent`,
     but exposed under `brand` so they're NEVER overridden by the shadcn
     `--color-accent` redefinition below. Use `bg-brand`/`text-brand-fg`/
     `hover:bg-brand-hover` for marketing CTAs that must stay webjs-warm
     regardless of which palette `bg-accent` happens to resolve to. */
  --color-brand:         var(--accent);
  --color-brand-hover:   var(--accent-hover);
  --color-brand-fg:      var(--accent-fg);
  --color-brand-tint:    var(--accent-tint);

  --font-sans:  var(--font-sans);
  --font-serif: var(--font-serif);
  --font-mono:  var(--font-mono);

  /* Transition tokens - matched to webjs.dev. Generates Tailwind's
     `duration-fast` and `duration-slow` utilities. */
  --duration-fast: 140ms;
  --duration-slow: 220ms;

  /* ------------------------------------------------------------------------
     Shadcn theme tokens - used by the ui-* component previews.
     These are SEPARATE from the webjs chrome tokens above so the docs site
     keeps its warm orange look while the component previews render with the
     standard shadcn neutral palette (what users will see in their own apps).
     ------------------------------------------------------------------------ */
  --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);
  /* `bg-accent` / `text-accent-foreground` (used by ghost / outline buttons,
     hover states inside ui-* components) map to the shadcn neutral accent -
     NOT the webjs warm brand accent. The brand accent stays available via
     raw `var(--accent)` for the docs chrome (headlines, announce banner). */
  --color-accent:               var(--accent-shadcn);
  --color-accent-foreground:    var(--accent-shadcn-foreground);
  --color-destructive:          var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-input:                var(--input);
  --color-ring:                 var(--ring);
}

/* --------------------------------------------------------------------------
   Shadcn theme variable values (neutral base, light + dark mode).
   Mirrors what `webjsui init` writes into the user's app - ui-* components
   reference these via Tailwind classes like `bg-primary`, `text-foreground`.
   -------------------------------------------------------------------------- */
:root {
  --radius: 0.625rem;
  --background:               oklch(1 0 0);
  --foreground:               oklch(0.145 0 0);
  --card:                     oklch(1 0 0);
  --card-foreground:          oklch(0.145 0 0);
  --popover:                  oklch(1 0 0);
  --popover-foreground:       oklch(0.145 0 0);
  --primary:                  oklch(0.205 0 0);
  --primary-foreground:       oklch(0.985 0 0);
  --secondary:                oklch(0.97 0 0);
  --secondary-foreground:     oklch(0.205 0 0);
  --muted:                    oklch(0.97 0 0);
  --muted-foreground:         oklch(0.556 0 0);
  --accent-shadcn:            oklch(0.97 0 0);
  --accent-shadcn-foreground: oklch(0.205 0 0);
  --destructive:              oklch(0.577 0.245 27.325);
  --destructive-foreground:   oklch(0.97 0.01 17);
  --input:                    oklch(0.922 0 0);
  --ring:                     oklch(0.708 0 0);
}

/* OS-preference dark, when no explicit toggle. Gated by
   `:root:not([data-theme='light'])` so the theme toggle's explicit-light
   choice still beats the OS in system mode. Mirrors how the webjs chrome
   tokens (--fg / --bg / --accent / …) are darkened in `app/layout.ts`. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --background:               oklch(0.145 0 0);
    --foreground:               oklch(0.985 0 0);
    --card:                     oklch(0.205 0 0);
    --card-foreground:          oklch(0.985 0 0);
    --popover:                  oklch(0.205 0 0);
    --popover-foreground:       oklch(0.985 0 0);
    --primary:                  oklch(0.922 0 0);
    --primary-foreground:       oklch(0.205 0 0);
    --secondary:                oklch(0.269 0 0);
    --secondary-foreground:     oklch(0.985 0 0);
    --muted:                    oklch(0.269 0 0);
    --muted-foreground:         oklch(0.708 0 0);
    --accent-shadcn:            oklch(0.371 0 0);
    --accent-shadcn-foreground: oklch(0.985 0 0);
    --destructive:              oklch(0.704 0.191 22.216);
    --destructive-foreground:   oklch(0.58 0.22 27);
    --input:                    oklch(1 0 0 / 15%);
    --ring:                     oklch(0.556 0 0);
  }
}

/* Explicit toggle to dark - wins over the OS regardless of preference. */
:root[data-theme='dark'],
:root.dark {
  --background:               oklch(0.145 0 0);
  --foreground:               oklch(0.985 0 0);
  --card:                     oklch(0.205 0 0);
  --card-foreground:          oklch(0.985 0 0);
  --popover:                  oklch(0.205 0 0);
  --popover-foreground:       oklch(0.985 0 0);
  --primary:                  oklch(0.922 0 0);
  --primary-foreground:       oklch(0.205 0 0);
  --secondary:                oklch(0.269 0 0);
  --secondary-foreground:     oklch(0.985 0 0);
  --muted:                    oklch(0.269 0 0);
  --muted-foreground:         oklch(0.708 0 0);
  --accent-shadcn:            oklch(0.371 0 0);
  --accent-shadcn-foreground: oklch(0.985 0 0);
  --destructive:              oklch(0.704 0.191 22.216);
  --destructive-foreground:   oklch(0.58 0.22 27);
  --input:                    oklch(1 0 0 / 15%);
  --ring:                     oklch(0.556 0 0);
}
