/*
 * Proof of Work — canonical design tokens as CSS custom properties.
 * Generated-by-hand mirror of design/tokens.tokens.json (the source of truth).
 * Import once at the app root so surfaces reference var(--pow-*) instead of inlining hexes.
 * Hexes are the literal Tailwind values the as-built UI already uses (neutral ramp = zinc).
 */

:root {
  /* Backgrounds / surfaces (depth = stepping up in lightness, not shadow) */
  --pow-bg-canvas: #0A0A0A;   /* app background; PWA theme_color */
  --pow-bg-surface: #18181B;  /* zinc-900 — cards, panels */
  --pow-bg-raised: #27272A;   /* zinc-800 — controls, chips, hover */
  --pow-bg-inset: #09090B;    /* zinc-950 — rare deep wells */

  /* Borders */
  --pow-border-subtle: #27272A;   /* zinc-800 — default hairline */
  --pow-border-default: #3F3F46;  /* zinc-700 */
  --pow-border-strong: #52525B;   /* zinc-600 — emphasis */

  /* Text */
  --pow-text-primary: #FFFFFF;
  --pow-text-secondary: #A1A1AA;  /* zinc-400 */
  --pow-text-muted: #71717A;      /* zinc-500 */
  --pow-text-subtle: #52525B;     /* zinc-600 — disabled */
  --pow-text-inverted: #000000;   /* on white surfaces */

  /* Accent / error (one canonical red, told apart by treatment) */
  --pow-accent-red: #DC2626;          /* red-600 — accent fills/edges + destructive */
  --pow-accent-red-strong: #B91C1C;   /* red-700 — hover/pressed */
  --pow-accent-red-text: #F87171;     /* red-400 — red text on dark */
  --pow-accent-red-border: #991B1B;   /* red-800 — outlines */
  --pow-accent-red-wash: rgba(127, 29, 29, 0.30); /* red-900/30 — banners/hover */

  /* Other semantic state */
  --pow-success: #34D399;       /* emerald-400 */
  --pow-success-fill: #059669;  /* emerald-600 */
  --pow-warning: #FBBF24;       /* amber-400 */
  --pow-warning-edge: #78350F;  /* amber-900 */
  --pow-info: #60A5FA;          /* blue-400 */
  --pow-info-wash: #172554;     /* blue-950 */

  /* Primary action = white, not a hue */
  --pow-action-primary-bg: #FFFFFF;
  --pow-action-primary-text: #000000;
  --pow-action-primary-hover-bg: #E4E4E7;     /* zinc-200 */
  --pow-action-primary-disabled-bg: #3F3F46;  /* zinc-700 */
  --pow-action-primary-disabled-text: #71717A;/* zinc-500 */

  /* Typography */
  --pow-font-display: var(--font-display), 'Bebas Neue', sans-serif;
  --pow-font-body: var(--font-sans), 'Space Grotesk', system-ui, sans-serif;
  --pow-tracking-wider: 0.05em;

  /* Radius (two-tier) */
  --pow-radius-control: 4px;     /* buttons, inputs, chips */
  --pow-radius-container: 8px;   /* cards, panels, modals */
  --pow-radius-full: 9999px;     /* pills, avatars */

  /* Layout (mirrors globals.css; the app already defines these) */
  --pow-sidebar-width: 240px;
  --pow-nav-height: 64px;
  --pow-bottom-nav-height: 64px;
}