/* GENERATED FILE — do not edit. Edit index.js and run `npm run build`. */

/* ────────────────────────────────────────────────────────────────────────────
   Waukesha Makerspace design tokens.

   Three blocks:
   1. BRAND (--brand-*) — fixed colors from marketing/brand/brand-guidelines.md.
      Reach for these only when you mean the literal color regardless of theme.
   2. SEMANTIC — themable, role-based (surface, foreground, primary, link, …).
      Components should use these by default; they flip for dark mode.
   3. SHADCN BRIDGE: --radius plus aliases (--background, --card, --popover,
      --muted, --destructive, --input, and their foregrounds) onto the
      semantic tokens, so vendored shadcn components theme with no extra CSS.
      shadcn names like --primary, --accent, --border, --ring resolve
      natively; --accent is the subtle hover background, per shadcn.

   Dark mode resolution order:
   - `.dark` / `.light` class on <html> wins (set pre-paint by the
     theme-init script exported from '@waukeshamakerspace/design-tokens/theme-init').
   - With no class present, the OS preference applies via media query.
   ──────────────────────────────────────────────────────────────────────── */

:root {
  --brand-burnt-orange: #e8600a;
  --brand-charcoal: #2b2b2b;
  --brand-golden-yellow: #f5a623;
  --brand-warm-white: #f7f3ee;

  --surface: #ffffff;
  --surface-muted: var(--brand-warm-white);
  --surface-raised: #ffffff;
  --surface-inverse: var(--brand-charcoal);
  --foreground: var(--brand-charcoal);
  --foreground-muted: #6b6b6b;
  --foreground-subtle: #9a9a9a;
  --foreground-inverse: var(--brand-warm-white);
  --border: #e5e5e5;
  --border-strong: #c5c5c5;
  --primary: var(--brand-burnt-orange);
  --primary-hover: #c0500a;
  --primary-foreground: var(--brand-warm-white);
  --secondary: var(--brand-charcoal);
  --secondary-hover: #1a1a1a;
  --secondary-foreground: var(--brand-warm-white);
  --accent: var(--brand-warm-white);
  --accent-foreground: var(--brand-charcoal);
  --link: var(--brand-burnt-orange);
  --link-hover: #c0500a;
  --ring: var(--brand-burnt-orange);
  --warning: var(--brand-golden-yellow);
  --warning-foreground: var(--brand-charcoal);
  --success: #16a34a;
  --success-foreground: #ffffff;
  --danger: #dc2626;
  --danger-foreground: #ffffff;

  /* Radius base, theme-agnostic. css/tailwind.css derives the
     --radius-sm/md/lg/xl scale from it; override --radius app-side to
     re-skin corner rounding globally. */
  --radius: 0.625rem;

  /* shadcn bridge: aliases onto semantic tokens. Declared once; the var()
     targets flip per theme on :root, so no dark copies are needed. Subtree
     overrides must target the alias name (--card), not the token behind it. */
  --background: var(--surface);
  --card: var(--surface-raised);
  --card-foreground: var(--foreground);
  --popover: var(--surface-raised);
  --popover-foreground: var(--foreground);
  --muted: var(--surface-muted);
  --muted-foreground: var(--foreground-muted);
  --destructive: var(--danger);
  --destructive-foreground: var(--danger-foreground);
  --input: var(--border-strong);
}

/* Dark theme — explicit class */
:root.dark {
  --surface: #161616;
  --surface-muted: #232323;
  --surface-raised: #2a2a2a;
  --surface-inverse: var(--brand-warm-white);
  --foreground: var(--brand-warm-white);
  --foreground-muted: #a8a8a8;
  --foreground-subtle: #707070;
  --foreground-inverse: var(--brand-charcoal);
  --border: #3a3a3a;
  --border-strong: #5a5a5a;
  --primary: #ff7a2e;
  --primary-hover: #ff9050;
  --primary-foreground: var(--brand-warm-white);
  --secondary: var(--brand-warm-white);
  --secondary-hover: #ffffff;
  --secondary-foreground: var(--brand-charcoal);
  --accent: #3a3a3a;
  --accent-foreground: var(--brand-warm-white);
  --link: #ff7a2e;
  --link-hover: #ff9050;
  --ring: #ff7a2e;
  --warning: var(--brand-golden-yellow);
  --warning-foreground: var(--brand-charcoal);
  --success: #22c55e;
  --success-foreground: #ffffff;
  --danger: #ef4444;
  --danger-foreground: #ffffff;
}

/* Dark theme — OS preference, when no explicit class overrides it */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --surface: #161616;
    --surface-muted: #232323;
    --surface-raised: #2a2a2a;
    --surface-inverse: var(--brand-warm-white);
    --foreground: var(--brand-warm-white);
    --foreground-muted: #a8a8a8;
    --foreground-subtle: #707070;
    --foreground-inverse: var(--brand-charcoal);
    --border: #3a3a3a;
    --border-strong: #5a5a5a;
    --primary: #ff7a2e;
    --primary-hover: #ff9050;
    --primary-foreground: var(--brand-warm-white);
    --secondary: var(--brand-warm-white);
    --secondary-hover: #ffffff;
    --secondary-foreground: var(--brand-charcoal);
    --accent: #3a3a3a;
    --accent-foreground: var(--brand-warm-white);
    --link: #ff7a2e;
    --link-hover: #ff9050;
    --ring: #ff7a2e;
    --warning: var(--brand-golden-yellow);
    --warning-foreground: var(--brand-charcoal);
    --success: #22c55e;
    --success-foreground: #ffffff;
    --danger: #ef4444;
    --danger-foreground: #ffffff;
  }
}