{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "$description": "SuperCat Design System tokens. Mirrors ds/tokens/*.css. Mechanical export — edit the CSS files first, then regenerate. Format follows the W3C Design Tokens draft (https://tr.designtokens.org/format/).",
  "$version": "0.4",
  "$updated": "2026-05-13",

  "color": {
    "paper": {
      "1": { "$value": "#F5F2EC", "$type": "color", "$description": "Canvas / page surface (light)" },
      "2": { "$value": "#EDE9E1", "$type": "color", "$description": "Hero panel tint (light)" },
      "3": { "$value": "#E5E0D6", "$type": "color", "$description": "Sunken / well (light)" }
    },
    "ink": {
      "1": { "$value": "#1A1614", "$type": "color", "$description": "Primary text (light)" },
      "2": { "$value": "#3D3532", "$type": "color", "$description": "Strong text" },
      "3": { "$value": "#5C5450", "$type": "color", "$description": "Body text" },
      "4": { "$value": "#8A857D", "$type": "color", "$description": "Muted text" },
      "5": { "$value": "#B5B0A9", "$type": "color", "$description": "Faint text" }
    },
    "line": {
      "default": { "$value": "rgba(26, 22, 20, 0.10)", "$type": "color" },
      "soft":    { "$value": "rgba(26, 22, 20, 0.06)", "$type": "color" }
    },
    "crimson": {
      "base":   { "$value": "#7A1218", "$type": "color", "$description": "Brand primary" },
      "dark":   { "$value": "#5C1215", "$type": "color" },
      "light":  { "$value": "#F2E2E2", "$type": "color" }
    },
    "gold": {
      "base":  { "$value": "#B97727", "$type": "color" },
      "light": { "$value": "#F5EDD8", "$type": "color" }
    },
    "clay":  { "$value": "#9B7C60", "$type": "color" },
    "white": { "$value": "#FFFFFF", "$type": "color" },
    "black": { "$value": "#000000", "$type": "color" }
  },

  "color-dark": {
    "$description": "Values applied under [data-theme=dark].",
    "paper": {
      "1": { "$value": "#131211", "$type": "color" },
      "2": { "$value": "#1F1E1C", "$type": "color" },
      "3": { "$value": "#2B2A27", "$type": "color" }
    },
    "ink": {
      "1": { "$value": "#EBE6D7", "$type": "color", "$description": "Warm off-white — cream-paper feel rather than neutral gray" },
      "2": { "$value": "#CFCABC", "$type": "color" },
      "3": { "$value": "#A8A398", "$type": "color" },
      "4": { "$value": "#74706A", "$type": "color" },
      "5": { "$value": "#454340", "$type": "color" }
    },
    "line": {
      "default": { "$value": "rgba(235, 230, 215, 0.12)", "$type": "color" },
      "soft":    { "$value": "rgba(235, 230, 215, 0.06)", "$type": "color" }
    },
    "crimson": {
      "base":  { "$value": "#8C2A2F", "$type": "color", "$description": "Lifted brand crimson for dark surfaces" },
      "dark":  { "$value": "#6E1F23", "$type": "color" },
      "light": { "$value": "rgba(140, 42, 47, 0.20)", "$type": "color" }
    }
  },

  "semantic": {
    "$description": "Meaning-bearing aliases. Components consume these, NOT the primitives above.",
    "surface": {
      "page":    { "$value": "{color.paper.1}",  "$type": "color" },
      "1":       { "$value": "{color.paper.1}",  "$type": "color" },
      "2":       { "$value": "{color.paper.2}",  "$type": "color" },
      "3":       { "$value": "{color.paper.3}",  "$type": "color" },
      "card":    { "$value": "{color.white}",    "$type": "color", "$description": "Light theme: white. Dark theme: paper-2." },
      "overlay": { "$value": "rgba(26, 22, 20, 0.45)", "$type": "color" }
    },
    "text": {
      "primary":     { "$value": "{color.ink.1}", "$type": "color" },
      "strong":      { "$value": "{color.ink.2}", "$type": "color" },
      "body":        { "$value": "{color.ink.3}", "$type": "color" },
      "muted":       { "$value": "{color.ink.4}", "$type": "color" },
      "faint":       { "$value": "{color.ink.5}", "$type": "color" },
      "on-crimson":  { "$value": "#F5F2EC",       "$type": "color", "$description": "Matches --color-paper-1. 'Paper on crimson' — same in both themes so labels stay cohesive with the page canvas." },
      "crimson":     { "$value": "{color.crimson.base}", "$type": "color", "$description": "Light: brand crimson. Dark: #B83A3F (lifted for AA contrast)." },
      "link":        { "$value": "{color.ink.1}", "$type": "color" },
      "link-hover":  { "$value": "{color.crimson.base}", "$type": "color" }
    },
    "border": {
      "subtle":  { "$value": "{color.line.soft}", "$type": "color" },
      "default": { "$value": "{color.line.default}", "$type": "color" },
      "strong":  { "$value": "{color.ink.2}", "$type": "color" }
    },
    "action": {
      "primary":       { "$value": "{color.crimson.base}", "$type": "color" },
      "primary-hover": { "$value": "{color.crimson.dark}", "$type": "color" },
      "primary-tint":  { "$value": "{color.crimson.light}", "$type": "color" }
    },
    "status": {
      "success":      { "$value": "#2D6A4F", "$type": "color" },
      "warning":      { "$value": "{color.gold.base}", "$type": "color" },
      "danger":       { "$value": "{color.crimson.base}", "$type": "color" },
      "danger-tint":  { "$value": "{color.crimson.light}", "$type": "color" },
      "info":         { "$value": "#2B5F87", "$type": "color" }
    }
  },

  "font": {
    "sans":  { "$value": "Geist, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", "$type": "fontFamily" },
    "mono":  { "$value": "'Geist Mono', 'SF Mono', 'JetBrains Mono', 'Courier New', monospace", "$type": "fontFamily" },
    "serif": { "$value": "'Source Serif Pro', Georgia, serif", "$type": "fontFamily" }
  },

  "text": {
    "$description": "Type size scale (px). Use clamp() in components for fluid headings.",
    "2xs":  { "$value": "10px", "$type": "dimension" },
    "xs":   { "$value": "11px", "$type": "dimension" },
    "sm":   { "$value": "13px", "$type": "dimension" },
    "base": { "$value": "15px", "$type": "dimension", "$description": "Default body" },
    "md":   { "$value": "16px", "$type": "dimension" },
    "lg":   { "$value": "18px", "$type": "dimension" },
    "xl":   { "$value": "22px", "$type": "dimension" },
    "2xl":  { "$value": "28px", "$type": "dimension" },
    "3xl":  { "$value": "36px", "$type": "dimension" },
    "4xl":  { "$value": "48px", "$type": "dimension" },
    "5xl":  { "$value": "64px", "$type": "dimension" },
    "6xl":  { "$value": "84px", "$type": "dimension" }
  },

  "leading": {
    "tight":   { "$value": 1.05, "$type": "number" },
    "snug":    { "$value": 1.15, "$type": "number" },
    "normal":  { "$value": 1.45, "$type": "number" },
    "relaxed": { "$value": 1.55, "$type": "number" },
    "loose":   { "$value": 1.7,  "$type": "number" }
  },

  "weight": {
    "light":    { "$value": 300, "$type": "fontWeight" },
    "regular":  { "$value": 400, "$type": "fontWeight" },
    "medium":   { "$value": 500, "$type": "fontWeight" },
    "semibold": { "$value": 600, "$type": "fontWeight" },
    "bold":     { "$value": 700, "$type": "fontWeight" },
    "black":    { "$value": 800, "$type": "fontWeight" }
  },

  "tracking": {
    "tightest": { "$value": "-0.04em",  "$type": "dimension", "$description": "Display" },
    "tighter":  { "$value": "-0.035em", "$type": "dimension", "$description": "H1/H2" },
    "tight":    { "$value": "-0.025em", "$type": "dimension", "$description": "H3/H4" },
    "snug":     { "$value": "-0.015em", "$type": "dimension", "$description": "Body lg" },
    "normal":   { "$value": "0",        "$type": "dimension" },
    "wide":     { "$value": "0.05em",   "$type": "dimension" },
    "wider":    { "$value": "0.12em",   "$type": "dimension", "$description": "Eyebrow" },
    "widest":   { "$value": "0.16em",   "$type": "dimension", "$description": "Mono caps" }
  },

  "space": {
    "$description": "4-px base scale. Numeric suffix = multiplier (space-4 = 16px).",
    "0":  { "$value": "0",     "$type": "dimension" },
    "1":  { "$value": "4px",   "$type": "dimension" },
    "2":  { "$value": "8px",   "$type": "dimension" },
    "3":  { "$value": "12px",  "$type": "dimension" },
    "4":  { "$value": "16px",  "$type": "dimension" },
    "5":  { "$value": "20px",  "$type": "dimension" },
    "6":  { "$value": "24px",  "$type": "dimension" },
    "7":  { "$value": "28px",  "$type": "dimension" },
    "8":  { "$value": "32px",  "$type": "dimension" },
    "9":  { "$value": "36px",  "$type": "dimension" },
    "10": { "$value": "40px",  "$type": "dimension" },
    "12": { "$value": "48px",  "$type": "dimension" },
    "14": { "$value": "56px",  "$type": "dimension" },
    "16": { "$value": "64px",  "$type": "dimension" },
    "20": { "$value": "80px",  "$type": "dimension" },
    "24": { "$value": "96px",  "$type": "dimension" },
    "28": { "$value": "112px", "$type": "dimension" },
    "32": { "$value": "128px", "$type": "dimension" },
    "40": { "$value": "160px", "$type": "dimension" },
    "48": { "$value": "192px", "$type": "dimension" }
  },

  "container": {
    "max":    { "$value": "1240px", "$type": "dimension" },
    "narrow": { "$value": "880px",  "$type": "dimension" },
    "wide":   { "$value": "1480px", "$type": "dimension" }
  },

  "gutter":     { "$value": "clamp(20px, 4vw, 56px)",  "$type": "dimension" },
  "section-y":  { "$value": "clamp(48px, 6vw, 80px)",  "$type": "dimension" },
  "chapter-y":  { "$value": "clamp(72px, 9vw, 128px)", "$type": "dimension" },

  "radius": {
    "none": { "$value": "0",     "$type": "dimension" },
    "xs":   { "$value": "2px",   "$type": "dimension", "$description": "Checkbox chip, tiny ticks" },
    "sm":   { "$value": "4px",   "$type": "dimension", "$description": "Sub-buttons, internal chips" },
    "md":   { "$value": "8px",   "$type": "dimension", "$description": "★ Benchmark — buttons, inputs, every interactive control" },
    "lg":   { "$value": "12px",  "$type": "dimension", "$description": "Cards, tiles, popovers" },
    "xl":   { "$value": "16px",  "$type": "dimension", "$description": "Modals, large panels" },
    "2xl":  { "$value": "20px",  "$type": "dimension" },
    "3xl":  { "$value": "28px",  "$type": "dimension" },
    "pill": { "$value": "999px", "$type": "dimension" },
    "full": { "$value": "9999px", "$type": "dimension" }
  },

  "shadow": {
    "none": { "$value": "none", "$type": "shadow" },
    "1":    { "$value": "0 1px 2px rgba(26, 22, 20, 0.04), 0 1px 1px rgba(26, 22, 20, 0.03)", "$type": "shadow" },
    "2":    { "$value": "0 2px 8px rgba(26, 22, 20, 0.06), 0 1px 2px rgba(26, 22, 20, 0.04)", "$type": "shadow" },
    "3":    { "$value": "0 8px 24px rgba(26, 22, 20, 0.08), 0 2px 6px rgba(26, 22, 20, 0.05)", "$type": "shadow" },
    "4":    { "$value": "0 20px 50px rgba(26, 22, 20, 0.12), 0 6px 16px rgba(26, 22, 20, 0.06)", "$type": "shadow" },
    "5":    { "$value": "0 32px 80px rgba(26, 22, 20, 0.18), 0 12px 24px rgba(26, 22, 20, 0.08)", "$type": "shadow" },
    "inset":       { "$value": "inset 0 1px 2px rgba(26, 22, 20, 0.06)", "$type": "shadow" },
    "focus":       { "$value": "0 0 0 3px rgba(122, 18, 24, 0.18)",      "$type": "shadow" },
    "focus-soft":  { "$value": "0 0 0 3px rgba(122, 18, 24, 0.10)",      "$type": "shadow" }
  },

  "duration": {
    "instant": { "$value": "0ms",   "$type": "duration" },
    "fast":    { "$value": "120ms", "$type": "duration", "$description": "Hover, ripple" },
    "base":    { "$value": "200ms", "$type": "duration", "$description": "Default UI" },
    "medium":  { "$value": "320ms", "$type": "duration", "$description": "Drawer, sheet" },
    "slow":    { "$value": "520ms", "$type": "duration", "$description": "Page-scale" },
    "slower":  { "$value": "800ms", "$type": "duration", "$description": "Hero reveal" }
  },

  "ease": {
    "linear":  { "$value": "linear",                              "$type": "cubicBezier" },
    "out":     { "$value": "cubic-bezier(0.22, 1, 0.36, 1)",      "$type": "cubicBezier", "$description": "Decelerate — default for most UI" },
    "in":      { "$value": "cubic-bezier(0.42, 0, 0.84, 0)",      "$type": "cubicBezier", "$description": "Accelerate — exits" },
    "in-out":  { "$value": "cubic-bezier(0.65, 0, 0.35, 1)",      "$type": "cubicBezier", "$description": "Symmetric — size changes" },
    "spring":  { "$value": "cubic-bezier(0.34, 1.56, 0.64, 1)",   "$type": "cubicBezier", "$description": "Playful overshoot" },
    "emph":    { "$value": "cubic-bezier(0.2, 0.8, 0.2, 1.0)",    "$type": "cubicBezier" }
  }
}