/* ─────────────────────────────────────────────────────────────────────────
 *  Kazzle app theme — the ONE styling entry point for this app.
 *
 *  This file is the design system. It is imported once (in `main.tsx`) and
 *  gives you three things, in order:
 *
 *    1. Tailwind v4            — every utility class (`flex`, `gap-4`,
 *                                `rounded-xl`, `text-zinc-500`, …) works in
 *                                your JSX. No config file, no PostCSS setup.
 *    2. Design tokens (@theme) — colors, radius, fonts as CSS variables. Edit
 *                                these to re-skin the whole app at once.
 *    3. Primitives (@layer)    — a few ready-made classes (`.btn`, `.card`,
 *                                `.input`, `.field`, `.page`, `.stack`,
 *                                `.row`) so common UI looks good with zero
 *                                effort.
 *
 *  HOW TO STYLE — pick whichever is easier, mix freely:
 *    • Tailwind utilities in `className` for one-off layout/spacing.
 *    • A primitive class (`.btn`, `.card`) for the common building blocks.
 *
 *  WHY IT'S BUILT THIS WAY: styles live in the markup (utilities) or in named
 *  primitives here — never in a separate per-screen stylesheet keyed to class
 *  names you have to keep in sync. Rewriting a component can't silently strip
 *  its styling, because the styling travels with the elements.
 *
 *  TO EXTEND: add new design tokens under `@theme`, and add new reusable
 *  building blocks under `@layer components`. Keep app-specific one-offs as
 *  inline Tailwind utilities in the component instead of adding a class here.
 * ───────────────────────────────────────────────────────────────────────── */

@import "tailwindcss";

/* ── Design tokens ──────────────────────────────────────────────────────────
 * Exposed to Tailwind as `bg-surface`, `text-fg`, `text-muted`,
 * `bg-accent`, `rounded-app`, etc. Change a value here and every utility and
 * primitive that references it updates at once. */
@theme {
  --color-bg: #0b0f1a;
  --color-surface: #131a2a;
  --color-surface-raised: #1b2438;
  --color-fg: #e8edf7;
  --color-muted: #94a3b8;
  --color-border: rgba(148, 163, 184, 0.18);
  --color-accent: #6366f1;
  --color-accent-hover: #4f46e5;
  --color-accent-fg: #ffffff;
  --color-danger: #f87171;

  --radius-app: 0.875rem;

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Base ────────────────────────────────────────────────────────────────────
 * Sensible document defaults so even unstyled markup reads well. */
@layer base {
  html,
  body,
  #root {
    min-height: 100%;
  }

  body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }

  h1 {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
  }

  h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
  }
}

/* ── Primitives ──────────────────────────────────────────────────────────────
 * Reusable building blocks. Use them directly (`<button class="btn btn-primary">`)
 * or layer Tailwind utilities on top. Add new ones here when a pattern repeats. */
@layer components {
  /* Page wrapper — centers content with comfortable gutters. */
  .page {
    width: min(100% - 2rem, 48rem);
    margin-inline: auto;
    padding-block: 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  /* Vertical / horizontal stacks. */
  .stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  /* Card surface. */
  .card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-app);
    padding: 1.25rem;
  }

  /* Buttons. `.btn` is the neutral base; add `.btn-primary` for the accent. */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-app);
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    color: var(--color-fg);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  }
  .btn:hover {
    background: color-mix(in srgb, var(--color-surface-raised) 80%, white);
  }
  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .btn-primary {
    background: var(--color-accent);
    border-color: transparent;
    color: var(--color-accent-fg);
  }
  .btn-primary:hover {
    background: var(--color-accent-hover);
  }

  /* Text input / select. */
  .input {
    width: 100%;
    min-width: 0;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-app);
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    color: var(--color-fg);
    font: inherit;
    outline: none;
  }
  .input:focus {
    border-color: var(--color-accent);
  }

  /* Labelled field: <label class="field"><span>Label</span><input class="input"/></label> */
  .field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: var(--color-muted);
  }

  /* Muted helper / secondary text. */
  .muted {
    color: var(--color-muted);
  }
}