{
  "$description": "Koder Design tokens (W3C DTCG). Import into Penpot → Tokens, or Figma via the Tokens Studio plugin. Source: tools/design-gen/assets/css/base.css.",
  "dark": {
    "accent": {
      "$value": "#8ab4ff",
      "$type": "color"
    },
    "accent-on": {
      "$value": "#0d0f12",
      "$type": "color"
    },
    "bg": {
      "$value": "#0d0f12",
      "$type": "color"
    },
    "border": {
      "$value": "#2a2f37",
      "$type": "color"
    },
    "focus": {
      "$value": "#b8d1ff",
      "$type": "color"
    },
    "shadow-1": {
      "$value": "0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4)"
    },
    "surface": {
      "$value": "#14171c",
      "$type": "color"
    },
    "surface-2": {
      "$value": "#1c2027",
      "$type": "color"
    },
    "text": {
      "$value": "#f1f1f4",
      "$type": "color"
    },
    "text-muted": {
      "$value": "#b9bcc4",
      "$type": "color"
    }
  },
  "light": {
    "accent": {
      "$value": "#1f3a93",
      "$type": "color"
    },
    "accent-on": {
      "$value": "#ffffff",
      "$type": "color"
    },
    "bg": {
      "$value": "#ffffff",
      "$type": "color"
    },
    "border": {
      "$value": "#d4d4d9",
      "$type": "color"
    },
    "focus": {
      "$value": "#0f3bd6",
      "$type": "color"
    },
    "fs-base": {
      "$value": "16px",
      "$type": "dimension"
    },
    "radius-lg": {
      "$value": "16px",
      "$type": "dimension"
    },
    "radius-md": {
      "$value": "10px",
      "$type": "dimension"
    },
    "radius-sm": {
      "$value": "6px",
      "$type": "dimension"
    },
    "shadow-1": {
      "$value": "0 1px 2px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06)"
    },
    "surface": {
      "$value": "#f5f5f7",
      "$type": "color"
    },
    "surface-2": {
      "$value": "#eaeaee",
      "$type": "color"
    },
    "text": {
      "$value": "#161616",
      "$type": "color"
    },
    "text-muted": {
      "$value": "#4b4b4b",
      "$type": "color"
    }
  }
}