// Civic Modern — Design tokens for the GovPilot design system.
// Based on 04D · Figtree · System direction.

const tokens = {
  // Color
  color: {
    // Canvas + surfaces
    bg:         '#FFFFFF',
    paper:      '#FAFAF8',
    surfaceHi:  '#F4F3EF',
    surfaceLo:  '#FCFCFA',

    // Lines
    hair:       '#E8E6E0',
    strong:     '#D6D3CC',

    // Text
    text:       '#111113',
    body:       '#3A3A3D',
    muted:      '#6B6B70',
    dim:        '#9A9A9E',

    // Primary action
    action:     '#D63600',
    actionHi:   '#B02C00',
    actionSoft: '#FFF1EC',
    actionEdge: '#F9D7C7',

    // Support
    bp:         '#2B6CB0',   // Blueprint (info)
    bpLight:    '#EEF4FA',
    ok:         '#1F9D55',
    okLight:    '#EAF7EF',
    warn:       '#B5800C',
    warnLight:  '#FBF4E2',
    err:        '#B42318',
    errLight:   '#FEECEB',
  },

  font: {
    sans: "'Figtree', -apple-system, sans-serif",
    mono: "'IBM Plex Mono', ui-monospace, monospace",
  },

  // Type scale (px)
  size: {
    displayXL: 72,
    display:   56,
    h1:        40,
    h2:        32,
    h3:        24,
    h4:        19,
    body:      16,
    bodySm:    13,
    caption:   12,
    micro:     11,
  },

  // Radii
  radius: {
    xs: 4,
    sm: 6,
    md: 8,
    lg: 10,
    xl: 12,
    pill: 999,
  },

  // Spacing scale (4px base)
  space: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96],

  // Shadows (low, deliberate)
  shadow: {
    raised: '0 1px 0 rgba(0,0,0,0.02)',
    card:   '0 2px 0 rgba(0,0,0,0.02), 0 12px 32px -12px rgba(0,0,0,0.12)',
    pop:    '0 12px 40px -8px rgba(0,0,0,0.18)',
  },
};

window.tokens = tokens;