/**
 * FamilySync Design System — TypeScript Token Object (Phase 2, D-01/D-02)
 *
 * Mirrors apps/pwa/src/styles/tokens.css. Used by components that need token
 * values in inline-style props (e.g., dynamic CSS-in-JS, canvas, SVG).
 *
 * Keep names aligned with the CSS custom property names (camelCase of the CSS
 * var name after `--`).
 */

export const tokens = {
  // ── Surface / Border / Text ──────────────────────────────────────────────

  colorSurface: '#FFFFFF',
  colorSurfaceDim: '#F7F7F8',
  colorSurfaceRaised: '#FFFFFF',

  colorBorder: '#E2E4E9',
  colorBorderSubtle: '#ECEEF2',

  colorTextPrimary: '#111318',
  colorTextSecondary: '#6B7280',
  colorTextMuted: '#9CA3AF',

  colorFocusRing: '#4A90D9',
  colorOverlay: 'rgba(0, 0, 0, 0.32)',

  // ── Calendar Colors ───────────────────────────────────────────────────────

  colorMember0: '#4A90D9',
  colorMember1: '#50C878',
  colorMember2: '#F5A623',
  colorMember3: '#9B59B6',
  colorMember4: '#E67E22',
  colorMember5: '#1ABC9C',

  colorSharedFamily: '#F25C7A',
  colorDestructive: '#DC2626',

  // ── Spacing Scale ─────────────────────────────────────────────────────────

  space1: '4px',
  space2: '8px',
  space3: '12px',
  space4: '16px',
  space6: '24px',
  space8: '32px',
  space12: '48px',

  // ── Typography ────────────────────────────────────────────────────────────

  fontFamilyBase: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',

  textBodySize: '15px',
  textBodyWeight: 400,
  textBodyLineHeight: 1.5,

  textLabelSize: '13px',
  textLabelWeight: 400,
  textLabelLineHeight: 1.4,

  textHeadingSize: '18px',
  textHeadingWeight: 600,
  textHeadingLineHeight: 1.25,

  textDisplaySize: '24px',
  textDisplayWeight: 600,
  textDisplayLineHeight: 1.2,

  // ── Breakpoints ───────────────────────────────────────────────────────────

  bpPhone: '0px',
  bpTablet: '768px',
  bpDesktop: '1280px',
} as const

export type Tokens = typeof tokens