/* Werklist Design Tokens — v1.0.0 · 2026-04-21
 * Generated from WERKLIST_DESIGN_SYSTEM.md
 * Owner: brand@werklist.com
 *
 * Drop this into your root CSS (imported before any component styles).
 * For Tailwind v4, mirror the values inside @theme.
 */

:root {
  /* Brand */
  --brand-blue: #1863DC;
  --brand-blue-dark: #0E4AA8;
  --hero-blue: #030585;

  /* Neutrals */
  --white: #FFFFFF;
  --off-white: #F4F4F4;
  --gray-50: #FAFAFA;
  --gray-100: #F4F4F5;
  --gray-200: #E5E5E5;
  --gray-300: #D1D1D5;
  --gray-400: #A0A0A8;
  --gray-500: #52525B;
  --gray-600: #404048;
  --gray-700: #27272A;
  --gray-800: #1D2327;
  --gray-900: #000000;

  /* Accent */
  --tan-hover: #F7F7F5;
  --tan-cta: #F0F0EE;
  --dot-separator: #C4C4C8;
  --dot-empty: #D4D4D4;
  --near-black-navy: #0B0E1A;

  /* Semantic */
  --semantic-success: #2EBB4E;
  --semantic-success-deep: #1F8C37;
  --semantic-warning: #D9950F;
  --semantic-error: #B91C3A;
  --semantic-info: #1863DC;
  --semantic-live: #4ADE80;

  /* Radii */
  --radius-image: 2px;
  --radius-checkbox: 3px;
  --radius-card-tight: 4px;
  --radius-card: 6px;
  --radius-input: 6px;
  --radius-button: 8px;
  --radius-cta: 10px;
  --radius-panel: 12px;
  --radius-pill: 9999px;

  /* Motion */
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-default: 200ms;
  --duration-slow: 300ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-entrance: cubic-bezier(0.0, 0.0, 0.2, 1);

  /* Typography */
  --font-sans: 'Satoshi', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-feature: "ss01", "cv01", "cv11";
}