/* whynot-design tokens & semantic element styles (pinned via
   scripts/sync-whynot-design.sh; see .whynot-design-ref).
   Must precede the Tailwind import so the @import url(...) for IBM Plex
   ends up at the top of the generated bundle. */
@import "./vendor/whynot-design/colors_and_type.css";

@import "tailwindcss";

/* Explicit content sources. Without these, Tailwind's automatic detection
   depends on the build CWD finding the templates — which fails in the Docker
   asset stage (it only copies static/src), producing a CSS with no utility
   classes and badly oversized SVG icons. Keep these paths in sync with the
   template dirs copied in the Dockerfile `assets` stage. */
@source "../../vergabe_teilnahme/templates";

/* whynot tokens → Tailwind theme. Exposes utilities like bg-paper, text-ink,
   border-line, bg-paper-2, text-ink-3, … */
@theme {
  --color-ink: #0A0A0A;
  --color-ink-2: #1F1F1F;
  --color-ink-3: #5C5C5C;
  --color-ink-4: #8A8A8A;
  --color-ink-5: #B5B5B3;
  --color-line: #E5E5E2;
  --color-line-strong: #C9C9C5;
  --color-line-soft: #F0F0EC;
  --color-paper: #FFFFFF;
  --color-paper-2: #FAFAF7;
  --color-paper-3: #F4F4EF;
  --color-hi: #FFE14A;
  --color-hi-2: #FFD400;
  --color-hi-ink: #1A1500;

  /* Backwards-compat aliases for legacy `brand-*` utility usage in templates.
     Keeps Phase 1 a tokens-only swap; templates can migrate to ink/paper at
     leisure. Map blue-brand scale onto the whynot ink ramp. */
  --color-brand-50: #FAFAF7;
  --color-brand-100: #F4F4EF;
  --color-brand-500: #0A0A0A;
  --color-brand-600: #1F1F1F;
  --color-brand-700: #0A0A0A;
  --color-brand-900: #0A0A0A;
}

/* Off-spec — vergabe-local until whynot-design defines a canonical
   destructive color. See history/2026-05-23-whynot-design-cross-framework-analysis.md
   §4 for context. */
:root {
  --danger: #B22222;
  --danger-fg: #FFFFFF;
}

@layer base {
  html {
    font-family: var(--ff-sans, ui-sans-serif), system-ui, sans-serif;
  }
}

@layer components {
  /* Cards / sheets — whynot: no shadow, hairline border */
  .card { @apply bg-paper rounded border border-line p-6; }

  /* Buttons — whynot: 3 variants + off-spec danger */
  .btn-primary   { @apply bg-ink text-paper px-4 py-2 rounded hover:bg-ink-2 transition-colors; }
  .btn-secondary { @apply bg-paper text-ink border border-line px-4 py-2 rounded hover:bg-paper-2 transition-colors; }
  .btn-ghost     { @apply text-ink-3 px-3 py-2 rounded hover:bg-paper-2; }
  .btn-danger    { background: var(--danger); color: var(--danger-fg); @apply px-4 py-2 rounded transition-colors; }
  .btn-danger:hover { filter: brightness(0.92); }

  /* Field-row — label/value grid */
  .field-row   { @apply grid grid-cols-3 gap-4 py-3 border-b border-line-soft last:border-0; }
  .field-label { @apply text-sm font-medium text-ink-3 col-span-1; }
  .field-value { @apply text-sm text-ink col-span-2; }

  /* Phase indicators — vergabe semantics (todo/active/done/warn), translated
     into whynot palette. `phase-warn` uses --hi (annotation yellow). */
  .phase-badge  { @apply inline-flex items-center justify-center w-7 h-7 rounded-full text-sm font-bold; }
  .phase-todo   { @apply inline-flex items-center justify-center w-7 h-7 rounded-full text-sm font-bold bg-paper-3 text-ink-4; }
  .phase-active { @apply inline-flex items-center justify-center w-7 h-7 rounded-full text-sm font-bold bg-ink text-paper; }
  .phase-done   { @apply inline-flex items-center justify-center w-7 h-7 rounded-full text-sm font-bold bg-ink-3 text-paper; }
  .phase-warn   { background: var(--hi); color: var(--hi-ink); @apply inline-flex items-center justify-center w-7 h-7 rounded-full text-sm font-bold; }

  /* Titles / sections */
  .section-title { @apply text-base font-semibold text-ink mb-4; }
  .page-title    { @apply text-2xl font-medium text-ink tracking-tight; }

  /* Forms */
  .form-input { @apply w-full rounded border border-line px-3 py-2 text-sm bg-paper focus:outline-none focus:border-ink transition-colors; }
  .form-label { @apply block text-sm font-medium text-ink-2 mb-1; }

  /* Tables */
  .table-base   { @apply w-full text-sm text-left; }
  .table-header { @apply bg-paper-2 text-ink-3 font-medium text-xs uppercase tracking-wide; }
  .table-row    { @apply border-t border-line-soft hover:bg-paper-2 transition-colors; }

  /* Sidebar */
  .sidebar-link        { @apply flex items-center px-3 py-2 rounded text-sm text-ink-2 hover:bg-paper-2 transition-colors; }
  .sidebar-link-active { @apply bg-paper text-ink font-medium; box-shadow: inset 0 0 0 1px var(--line); }
  .sidebar-section-btn { @apply w-full flex items-center justify-between px-3 py-2 text-xs font-semibold text-ink-4 uppercase tracking-wide hover:text-ink-2; }
}