/* ============================================================
 * Tailwind v4 source — built into assets/static/css/app.css
 * ------------------------------------------------------------
 * Stack: Tailwind CSS v4 + Alpine.js v3 + PenguinUI components
 * (https://www.penguinui.com). PenguinUI is copy-paste: paste a
 * component's markup into a template and it picks up the design
 * tokens defined in the @theme block below.
 *
 * Build:   make css          (one-off, minified)
 *          make css-watch     (rebuild on change while developing)
 *
 * The compiled output assets/static/css/app.css IS committed, so
 * the Docker image / loco static server need no Node at runtime.
 * ============================================================ */

@import "tailwindcss";

/* Scan every template so used utility classes are emitted. */
@source "../views";

/* penguinui-components/ is the read-only vendored PenguinUI library
 * (reference only — never {% include %}'d, never edited). Tailwind v4
 * auto-detects it from the project root, so exclude it explicitly or
 * its 177 files bloat the build with classes we never render. */
@source not "../../penguinui-components";

/* PenguinUI toggles dark styles with a `dark:` variant. This app
 * already sets <html data-theme="dark|light"> (see base.html), so
 * key the variant off that attribute instead of the OS setting. */
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

/* === PenguinUI design tokens ================================
 * "Modern" starting palette. Swap any line for another Tailwind
 * color (e.g. --color-primary: var(--color-emerald-600)) or grab
 * a ready-made theme from https://www.penguinui.com/theme.
 * Components reference these as bg-primary, text-on-surface,
 * dark:bg-surface-dark, border-outline, etc.
 * ============================================================ */
@theme {
  /* light mode */
  --color-surface: var(--color-white);
  --color-surface-alt: var(--color-slate-100);
  --color-on-surface: var(--color-slate-700);
  --color-on-surface-strong: var(--color-slate-900);
  --color-primary: var(--color-indigo-600);
  --color-on-primary: var(--color-white);
  --color-secondary: var(--color-slate-600);
  --color-on-secondary: var(--color-white);
  --color-outline: var(--color-slate-300);
  --color-outline-strong: var(--color-slate-800);

  /* dark mode */
  --color-surface-dark: var(--color-slate-900);
  --color-surface-dark-alt: var(--color-slate-800);
  --color-on-surface-dark: var(--color-slate-300);
  --color-on-surface-dark-strong: var(--color-white);
  --color-primary-dark: var(--color-indigo-400);
  --color-on-primary-dark: var(--color-slate-950);
  --color-secondary-dark: var(--color-slate-300);
  --color-on-secondary-dark: var(--color-slate-950);
  --color-outline-dark: var(--color-slate-700);
  --color-outline-dark-strong: var(--color-slate-300);

  /* shared status colors (same in both modes) */
  --color-info: var(--color-sky-500);
  --color-on-info: var(--color-white);
  --color-success: var(--color-green-600);
  --color-on-success: var(--color-white);
  --color-warning: var(--color-amber-500);
  --color-on-warning: var(--color-white);
  --color-danger: var(--color-red-600);
  --color-on-danger: var(--color-white);

  /* shared design tokens */
  --radius-radius: 0.375rem;
}

/* Hide Alpine x-cloak elements until Alpine initializes. */
[x-cloak] { display: none !important; }
