@import "tailwindcss";

/*
  Admin design tokens — see specs/002-ui-redesign/design-tokens.md for the
  documented source of truth. Consume via arbitrary-value utilities:
    bg-[--color-sidebar], text-[--color-foreground-muted], rounded-[--radius-card], …
*/
@theme {
  /* Surfaces */
  --color-surface: #ffffff;
  --color-surface-muted: #f8fafc;
  --color-surface-subtle: #f1f5f9;
  --color-sidebar: #020617;
  --color-sidebar-muted: #0f172a;
  --color-topbar: #ffffff;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;

  /* Foreground */
  --color-foreground: #0f172a;
  --color-foreground-muted: #475569;
  --color-foreground-subtle: #94a3b8;
  --color-sidebar-foreground: #e2e8f0;
  --color-sidebar-foreground-active: #ffffff;
  --color-sidebar-foreground-muted: #94a3b8;

  /* Accent */
  --color-accent: #4f46e5;
  --color-accent-hover: #4338ca;
  --color-accent-subtle: #eef2ff;
  --color-accent-foreground: #ffffff;
  --color-focus-ring: #6366f1;

  /* Status (fills + text) */
  --color-status-draft: #f1f5f9;
  --color-status-draft-foreground: #334155;
  --color-status-queued: #e0e7ff;
  --color-status-queued-foreground: #3730a3;
  --color-status-running: #dbeafe;
  --color-status-running-foreground: #1e40af;
  --color-status-awaiting: #fef3c7;
  --color-status-awaiting-foreground: #92400e;
  --color-status-succeeded: #d1fae5;
  --color-status-succeeded-foreground: #065f46;
  --color-status-failed: #fee2e2;
  --color-status-failed-foreground: #991b1b;

  /* Typography */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Spacing — layout chrome */
  --width-sidebar: 16rem;
  --height-topbar: 3.5rem;
  --width-content-max: 80rem;
  --space-gutter: 2rem;
  --space-gutter-sm: 1rem;

  /* Radii */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-card: 0.75rem;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-elevated: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-topbar: 0 1px 0 var(--color-border);
}

/* Mobile sidebar drawer (≤767px). Desktop sidebar is always visible via the
   `md:` utilities on the <aside> itself. */
@media (max-width: 767px) {
  .admin-shell.is-open .admin-sidebar { transform: translateX(0); }
  .admin-shell.is-open .admin-shell-backdrop { display: block; }
}