/* services/shared/static/css/tokens.css */
:root {
  /* ── Palette ── */
  --bg-page: #FBF7F1;
  --bg-surface: #FFFFFF;
  --bg-subtle: #F3EDE4;
  --bg-hover: #EBE5DC;

  --ink: #2C2825;
  --ink-2: #6B645B;
  --ink-3: #A9A29A;
  --ink-4: #CFC9C1;

  /* ── Accent (app overrides this in app.css) ── */
  --accent: #5B8DB8;
  --accent-hover: #4A7CA7;

  /* ── Dot palette ── */
  --dot-red: #E07052;
  --dot-blue: #5B8DB8;
  --dot-green: #6EA86E;
  --dot-yellow: #E8C44A;
  --dot-purple: #9775fa;
  --dot-pink: #D88B9A;

  /* ── Semantic ── */
  --success: #6EA86E;
  --danger: #E07052;
  --warning: #E8C44A;

  /* ── Spacing ── */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp: 16px;
  --sp-lg: 28px;
  --sp-xl: 44px;

  /* ── Radii ── */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(44, 40, 37, 0.06);
  --shadow-md: 0 4px 12px rgba(44, 40, 37, 0.08);
  --shadow-lg: 0 8px 24px rgba(44, 40, 37, 0.12);

  /* ── Typography ── */
  --font: 'Nunito', sans-serif;
  --font-size-sm: 12px;
  --font-size: 14px;
  --font-size-lg: 16px;

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast: 0.12s;
  --duration: 0.2s;
  --duration-slow: 0.35s;

  /* ── Breakpoints (values for @media — can't use var() in queries) ── */
  /* 768px — sidebar collapses */
  /* 480px — single column grid */

  /* ── Card grid ── */
  --card-min-w: 160px;

  /* ── Sidebar ── */
  --sidebar-w: 230px;
}