{
  "$comment": "Generated from src/design/tokens.json. CSS twin: /design/tokens.css",
  "meta": {
    "name": "adampang.com design system",
    "version": "2.0.0",
    "description": "Clean card-based minimal. Light-first, near-white surfaces, one blue primary, five accent hues that each own a section.",
    "source": "src/design/tokens.json",
    "note": "Single source of truth. tailwind.config.ts, /design, /design/tokens.json and /design/tokens.css are all generated from this file. Never hardcode a hex anywhere else."
  },
  "color": {
    "surface": {
      "bg": {
        "cssVar": "--color-bg",
        "light": "#fafafa",
        "dark": "#0a0a0a",
        "lightRgb": "250 250 250",
        "darkRgb": "10 10 10",
        "role": "page background base"
      },
      "bg-mid": {
        "cssVar": "--color-bg-mid",
        "light": "#f0f4ff",
        "dark": "#0d0d14",
        "lightRgb": "240 244 255",
        "darkRgb": "13 13 20",
        "role": "page gradient midpoint"
      },
      "bg-end": {
        "cssVar": "--color-bg-end",
        "light": "#e8ecf8",
        "dark": "#0a0f1a",
        "lightRgb": "232 236 248",
        "darkRgb": "10 15 26",
        "role": "page gradient end"
      },
      "card": {
        "cssVar": "--color-card",
        "light": "#ffffff",
        "dark": "#141414",
        "lightRgb": "255 255 255",
        "darkRgb": "20 20 20",
        "role": "raised card surface"
      },
      "sunken": {
        "cssVar": "--color-sunken",
        "light": "#f1f5f9",
        "dark": "#1c1c1f",
        "lightRgb": "241 245 249",
        "darkRgb": "28 28 31",
        "role": "inset wells, code blocks"
      },
      "line": {
        "cssVar": "--color-line",
        "light": "#e2e8f0",
        "dark": "#27272a",
        "lightRgb": "226 232 240",
        "darkRgb": "39 39 42",
        "role": "hairlines, card borders"
      }
    },
    "content": {
      "fg": {
        "cssVar": "--color-fg",
        "light": "#1a1a1a",
        "dark": "#fafafa",
        "lightRgb": "26 26 26",
        "darkRgb": "250 250 250",
        "role": "primary text"
      },
      "muted": {
        "cssVar": "--color-muted",
        "light": "#5b6674",
        "dark": "#a1a1aa",
        "lightRgb": "91 102 116",
        "darkRgb": "161 161 170",
        "role": "secondary text, captions"
      },
      "faint": {
        "cssVar": "--color-faint",
        "light": "#626b78",
        "dark": "#8b8b93",
        "lightRgb": "98 107 120",
        "darkRgb": "139 139 147",
        "role": "tertiary text, metadata"
      }
    },
    "brand": {
      "accent": {
        "cssVar": "--color-accent",
        "light": "#2563eb",
        "dark": "#60a5fa",
        "lightRgb": "37 99 235",
        "darkRgb": "96 165 250",
        "role": "links, CTAs, focus ring"
      },
      "accent-ink": {
        "cssVar": "--color-accent-ink",
        "light": "#1d4ed8",
        "dark": "#93c5fd",
        "lightRgb": "29 78 216",
        "darkRgb": "147 197 253",
        "role": "accent text on light surfaces (AA-safe)"
      },
      "on-accent": {
        "cssVar": "--color-on-accent",
        "light": "#ffffff",
        "dark": "#0a0a0a",
        "lightRgb": "255 255 255",
        "darkRgb": "10 10 10",
        "role": "label sitting on an accent fill"
      }
    },
    "section": {
      "sights": {
        "cssVar": "--color-sights",
        "light": "#f59e0b",
        "dark": "#fbbf24",
        "lightRgb": "245 158 11",
        "darkRgb": "251 191 36",
        "role": "sights section accent. Fills and dots only."
      },
      "sounds": {
        "cssVar": "--color-sounds",
        "light": "#38bdf8",
        "dark": "#7dd3fc",
        "lightRgb": "56 189 248",
        "darkRgb": "125 211 252",
        "role": "sounds section accent. Fills and dots only."
      },
      "curiosity": {
        "cssVar": "--color-curiosity",
        "light": "#34d399",
        "dark": "#6ee7b7",
        "lightRgb": "52 211 153",
        "darkRgb": "110 231 183",
        "role": "curiosity section accent, live status. Fills and dots only."
      },
      "creativity": {
        "cssVar": "--color-creativity",
        "light": "#c084fc",
        "dark": "#d8b4fe",
        "lightRgb": "192 132 252",
        "darkRgb": "216 180 254",
        "role": "creativity section accent. Fills and dots only."
      },
      "alert": {
        "cssVar": "--color-alert",
        "light": "#ef4444",
        "dark": "#f87171",
        "lightRgb": "239 68 68",
        "darkRgb": "248 113 113",
        "role": "destructive fill"
      },
      "sights-ink": {
        "cssVar": "--color-sights-ink",
        "light": "#935f07",
        "dark": "#fbbf24",
        "lightRgb": "147 95 7",
        "darkRgb": "251 191 36",
        "role": "sights TEXT on its own tint (AA-safe)"
      },
      "sounds-ink": {
        "cssVar": "--color-sounds-ink",
        "light": "#227195",
        "dark": "#7dd3fc",
        "lightRgb": "34 113 149",
        "darkRgb": "125 211 252",
        "role": "sounds TEXT on its own tint (AA-safe)"
      },
      "curiosity-ink": {
        "cssVar": "--color-curiosity-ink",
        "light": "#1e7857",
        "dark": "#6ee7b7",
        "lightRgb": "30 120 87",
        "darkRgb": "110 231 183",
        "role": "curiosity TEXT on its own tint (AA-safe)"
      },
      "creativity-ink": {
        "cssVar": "--color-creativity-ink",
        "light": "#7f57a6",
        "dark": "#d8b4fe",
        "lightRgb": "127 87 166",
        "darkRgb": "216 180 254",
        "role": "creativity TEXT on its own tint (AA-safe)"
      },
      "alert-ink": {
        "cssVar": "--color-alert-ink",
        "light": "#c81e1e",
        "dark": "#fca5a5",
        "lightRgb": "200 30 30",
        "darkRgb": "252 165 165",
        "role": "destructive TEXT (AA-safe on card)"
      }
    }
  },
  "ramp": {
    "note": "Tints of brand.accent. Components use 600 for hover fills. Not mode-aware; these are fixed steps.",
    "accent": {
      "50": "#eff6ff",
      "100": "#dbeafe",
      "200": "#bfdbfe",
      "300": "#93c5fd",
      "400": "#60a5fa",
      "500": "#3b82f6",
      "600": "#2563eb",
      "700": "#1d4ed8",
      "800": "#1e40af",
      "900": "#1e3a8a"
    }
  },
  "type": {
    "family": {
      "display": {
        "value": "var(--font-display), system-ui, sans-serif",
        "role": "Space Grotesk 700. Headings."
      },
      "body": {
        "value": "var(--font-body), system-ui, sans-serif",
        "role": "Lato 300/400/700. Prose."
      },
      "mono": {
        "value": "var(--font-mono), ui-monospace, monospace",
        "role": "JetBrains Mono. Numerals, labels."
      }
    },
    "scale": {
      "caption": {
        "size": "0.75rem",
        "leading": "1.4",
        "role": "12px. Metadata, footnotes."
      },
      "label": {
        "size": "0.8125rem",
        "leading": "1.4",
        "role": "13px. Eyebrows, nav."
      },
      "body": {
        "size": "1rem",
        "leading": "1.65",
        "role": "16px. Default prose."
      },
      "lead": {
        "size": "1.125rem",
        "leading": "1.6",
        "role": "18px. Intro paragraphs."
      },
      "h3": {
        "size": "1.5rem",
        "leading": "1.2",
        "role": "24px. Card titles."
      },
      "h2": {
        "size": "1.875rem",
        "leading": "1.15",
        "role": "30px. Section titles."
      },
      "h1": {
        "size": "2.25rem",
        "leading": "0.95",
        "role": "36px. Page title. 3rem at sm+."
      }
    },
    "tracking": {
      "tightest": {
        "value": "-0.02em",
        "role": "display headings"
      },
      "tighter": {
        "value": "-0.01em",
        "role": "subheads"
      },
      "label": {
        "value": "0.12em",
        "role": "uppercase eyebrows"
      },
      "wide": {
        "value": "0.22em",
        "role": "uppercase kickers"
      }
    }
  },
  "space": {
    "1": {
      "value": "0.25rem",
      "role": "4px. Icon gap."
    },
    "2": {
      "value": "0.5rem",
      "role": "8px. Inline gap."
    },
    "3": {
      "value": "0.75rem",
      "role": "12px. Tight stack."
    },
    "4": {
      "value": "1rem",
      "role": "16px. Default stack."
    },
    "5": {
      "value": "1.25rem",
      "role": "20px. Card padding, mobile gutter."
    },
    "6": {
      "value": "1.5rem",
      "role": "24px. Card padding at sm+."
    },
    "8": {
      "value": "2rem",
      "role": "32px. Between subsections."
    },
    "10": {
      "value": "2.5rem",
      "role": "40px. Between sections."
    },
    "14": {
      "value": "3.5rem",
      "role": "56px. Page top/bottom at sm+."
    }
  },
  "radius": {
    "sm": {
      "value": "8px",
      "role": "badges, small chips"
    },
    "md": {
      "value": "12px",
      "role": "inputs, small cards"
    },
    "lg": {
      "value": "16px",
      "role": "cards. The default container."
    },
    "full": {
      "value": "9999px",
      "role": "buttons, pills, avatars"
    }
  },
  "shadow": {
    "card": {
      "value": "0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04)",
      "role": "resting card"
    },
    "card-md": {
      "value": "0 4px 6px rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.03)",
      "role": "hover lift"
    },
    "card-lg": {
      "value": "0 10px 25px rgba(0,0,0,.06), 0 4px 10px rgba(0,0,0,.04)",
      "role": "modal, popover"
    }
  },
  "motion": {
    "ease": {
      "value": "cubic-bezier(0.16, 1, 0.3, 1)",
      "role": "the one easing curve"
    },
    "duration-micro": {
      "value": "200ms",
      "role": "hover, color change"
    },
    "duration-state": {
      "value": "400ms",
      "role": "state transition"
    },
    "duration-reveal": {
      "value": "700ms",
      "role": "scroll reveal"
    },
    "lift": {
      "value": "-2px",
      "role": "hover translateY"
    }
  }
}