{
  "$description": "Southleft design tokens — the actual token layer this site runs on. DTCG format. Generated at build time from src/styles/global.css, so it cannot drift from production. Yes, we practice what we pitch.",
  "color": {
    "red": {
      "400": {
        "$type": "color",
        "$value": "#f4795c"
      },
      "500": {
        "$type": "color",
        "$value": "#f05735"
      },
      "600": {
        "$type": "color",
        "$value": "#d84424"
      },
      "700": {
        "$type": "color",
        "$value": "#b23015"
      }
    },
    "blue": {
      "400": {
        "$type": "color",
        "$value": "#2e8bbd"
      },
      "500": {
        "$type": "color",
        "$value": "#006699"
      },
      "600": {
        "$type": "color",
        "$value": "#00527a"
      },
      "900": {
        "$type": "color",
        "$value": "#062a3a"
      }
    },
    "paper": {
      "0": {
        "$type": "color",
        "$value": "#fdfcfa"
      },
      "50": {
        "$type": "color",
        "$value": "#faf9f8"
      },
      "100": {
        "$type": "color",
        "$value": "#f3f1eb"
      },
      "200": {
        "$type": "color",
        "$value": "#e2e0da"
      },
      "300": {
        "$type": "color",
        "$value": "#cfc9bc"
      },
      "400": {
        "$type": "color",
        "$value": "#a49981"
      },
      "450": {
        "$type": "color",
        "$value": "#948a70"
      },
      "500": {
        "$type": "color",
        "$value": "#857a63"
      },
      "600": {
        "$type": "color",
        "$value": "#5f5747"
      }
    },
    "ink": {
      "600": {
        "$type": "color",
        "$value": "#4a453a"
      },
      "700": {
        "$type": "color",
        "$value": "#322e26"
      },
      "800": {
        "$type": "color",
        "$value": "#232019"
      },
      "900": {
        "$type": "color",
        "$value": "#181714"
      },
      "950": {
        "$type": "color",
        "$value": "#100f0d"
      }
    },
    "status": {
      "success": {
        "$type": "color",
        "$value": "#36b370"
      },
      "success-strong": {
        "$type": "color",
        "$value": "#008842"
      },
      "warning": {
        "$type": "color",
        "$value": "#ffab00"
      },
      "info": {
        "$type": "color",
        "$value": "#00b8d9"
      },
      "error": {
        "$type": "color",
        "$value": "#cb4324"
      }
    }
  },
  "semantic": {
    "$description": "Mode-level aliases. Registered via @property, so theme changes crossfade.",
    "dark": {
      "bg": {
        "$type": "color",
        "$value": "{color.ink.900}"
      },
      "bg-raised": {
        "$type": "color",
        "$value": "{color.ink.800}"
      },
      "bg-sunken": {
        "$type": "color",
        "$value": "{color.ink.950}"
      },
      "bg-well": {
        "$type": "color",
        "$value": "{color.ink.700}"
      },
      "fg": {
        "$type": "color",
        "$value": "{color.paper.50}"
      },
      "fg-muted": {
        "$type": "color",
        "$value": "{color.paper.400}"
      },
      "fg-subtle": {
        "$type": "color",
        "$value": "{color.paper.450}"
      },
      "accent": {
        "$type": "color",
        "$value": "{color.red.500}"
      },
      "accent-hover": {
        "$type": "color",
        "$value": "{color.red.400}"
      },
      "link": {
        "$type": "color",
        "$value": "{color.blue.400}"
      },
      "border": {
        "$type": "color",
        "$value": "{color.ink.600}"
      },
      "border-faint": {
        "$type": "color",
        "$value": "color-mix(in srgb, var(--sl-color-ink-600) 55%, transparent)",
        "$description": "Derived at runtime via color-mix"
      },
      "grid-line": {
        "$type": "color",
        "$value": "color-mix(in srgb, var(--sl-color-ink-600) 45%, transparent)",
        "$description": "Derived at runtime via color-mix"
      }
    },
    "light": {
      "bg": {
        "$type": "color",
        "$value": "{color.paper.100}"
      },
      "bg-raised": {
        "$type": "color",
        "$value": "{color.paper.0}"
      },
      "bg-sunken": {
        "$type": "color",
        "$value": "{color.paper.200}"
      },
      "bg-well": {
        "$type": "color",
        "$value": "{color.paper.200}"
      },
      "fg": {
        "$type": "color",
        "$value": "{color.ink.900}"
      },
      "fg-muted": {
        "$type": "color",
        "$value": "{color.paper.600}"
      },
      "fg-subtle": {
        "$type": "color",
        "$value": "{color.paper.600}"
      },
      "accent": {
        "$type": "color",
        "$value": "{color.red.700}"
      },
      "accent-hover": {
        "$type": "color",
        "$value": "{color.red.600}"
      },
      "link": {
        "$type": "color",
        "$value": "{color.blue.600}"
      },
      "border": {
        "$type": "color",
        "$value": "{color.paper.300}"
      },
      "border-faint": {
        "$type": "color",
        "$value": "color-mix(in srgb, var(--sl-color-paper-300) 60%, transparent)",
        "$description": "Derived at runtime via color-mix"
      },
      "grid-line": {
        "$type": "color",
        "$value": "color-mix(in srgb, var(--sl-color-paper-300) 55%, transparent)",
        "$description": "Derived at runtime via color-mix"
      }
    }
  },
  "font": {
    "display": {
      "$type": "fontFamily",
      "$value": [
        "Agrandir",
        "IBM Plex Sans",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "IBM Plex Sans",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "IBM Plex Mono",
        "Menlo",
        "monospace"
      ]
    }
  },
  "text": {
    "$description": "Fluid type scale — clamp() expressions, expressed as-is.",
    "display": {
      "$type": "dimension",
      "$value": "clamp(3rem, 1.5rem + 6.5vw, 7rem)"
    },
    "h1": {
      "$type": "dimension",
      "$value": "clamp(2.5rem, 1.6rem + 3.8vw, 4.5rem)"
    },
    "h2": {
      "$type": "dimension",
      "$value": "clamp(2rem, 1.5rem + 2vw, 3rem)"
    },
    "h3": {
      "$type": "dimension",
      "$value": "clamp(1.5rem, 1.3rem + 0.9vw, 2rem)"
    },
    "h4": {
      "$type": "dimension",
      "$value": "1.5rem"
    },
    "lead": {
      "$type": "dimension",
      "$value": "clamp(1.125rem, 1rem + 0.6vw, 1.375rem)"
    },
    "body": {
      "$type": "dimension",
      "$value": "1rem"
    },
    "sm": {
      "$type": "dimension",
      "$value": "0.875rem"
    },
    "caption": {
      "$type": "dimension",
      "$value": "0.75rem"
    },
    "kicker": {
      "$type": "dimension",
      "$value": "0.8125rem"
    },
    "code": {
      "$type": "dimension",
      "$value": "0.9375rem"
    }
  },
  "space": {
    "factor": {
      "$type": "number",
      "$value": 1,
      "$description": "Global density multiplier — themeable"
    },
    "section-gap": {
      "$type": "dimension",
      "$value": "calc(clamp(6rem, 8vw, 10rem) * var(--sl-space-factor))"
    }
  },
  "layout": {
    "max": {
      "$type": "dimension",
      "$value": "1360px"
    },
    "prose": {
      "$type": "dimension",
      "$value": "720px"
    }
  },
  "radius": {
    "xs": {
      "$type": "dimension",
      "$value": "2px"
    },
    "sm": {
      "$type": "dimension",
      "$value": "3px"
    },
    "md": {
      "$type": "dimension",
      "$value": "4px"
    },
    "lg": {
      "$type": "dimension",
      "$value": "6px"
    },
    "full": {
      "$type": "dimension",
      "$value": "999px"
    }
  },
  "border": {
    "width": {
      "$type": "dimension",
      "$value": "1px",
      "$description": "Structural border weight — themeable (brutalist themes run 2px)"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": "0 1px 2px rgb(16 15 13 / 0.08)"
    },
    "md": {
      "$type": "shadow",
      "$value": "0 4px 16px rgb(16 15 13 / 0.12)"
    },
    "lg": {
      "$type": "shadow",
      "$value": "0 16px 48px rgb(16 15 13 / 0.18)"
    }
  },
  "elevation": {
    "card": {
      "$type": "shadow",
      "$value": "none",
      "$description": "Card elevation — themeable (slabs, cartoon drops, soft diffusion)"
    },
    "button": {
      "$type": "shadow",
      "$value": "none",
      "$description": "Button elevation — themeable"
    }
  },
  "motion": {
    "ease-out": {
      "$type": "cubicBezier",
      "$value": [
        0.22,
        1,
        0.36,
        1
      ]
    },
    "ease-in-out": {
      "$type": "cubicBezier",
      "$value": [
        0.65,
        0,
        0.35,
        1
      ]
    },
    "duration-fast": {
      "$type": "duration",
      "$value": "150ms"
    },
    "duration-base": {
      "$type": "duration",
      "$value": "300ms"
    },
    "duration-slow": {
      "$type": "duration",
      "$value": "600ms"
    }
  },
  "misc": {
    "artifacts": {
      "$type": "number",
      "$value": 1,
      "$description": "Hero glyph-field density: 1 murmur, 0.45 sparse, 0 silent — themeable"
    }
  },
  "themeable": {
    "$description": "Hooks the generative theme console sets at runtime (southleft.com — palette icon in the header). Every one is a live custom property the site consumes; defaults shown are the brand values. Derived themes are WCAG-AA-solved before they apply.",
    "font-display": {
      "$type": "fontFamily",
      "$value": [
        "Agrandir",
        "IBM Plex Sans",
        "sans-serif"
      ],
      "$description": "Display face — themes swap system stacks or load from a web-font catalog"
    },
    "display-weight": {
      "$type": "fontWeight",
      "$value": 600
    },
    "display-tracking": {
      "$type": "dimension",
      "$value": "-0.01em"
    },
    "display-case": {
      "$type": "string",
      "$value": "none",
      "$description": "'none' | 'uppercase'"
    },
    "on-accent": {
      "$type": "color",
      "$value": "#100f0d",
      "$description": "Text on solid accent surfaces — contrast-solved per theme"
    },
    "accent-solid": {
      "$type": "color",
      "$value": "#f05735",
      "$description": "Solid accent for primary buttons"
    },
    "border-faint-alpha": {
      "$type": "string",
      "$value": "55%",
      "$description": "Opacity of hairline borders — 100% reads harsh, 40% hushed"
    },
    "texture": {
      "$type": "string",
      "$value": "grid lines",
      "$description": "Hero background field: grid | tight-grid | dots | none"
    },
    "grid-size": {
      "$type": "dimension",
      "$value": "72px",
      "$description": "Background grid cell size"
    },
    "grid-alpha": {
      "$type": "string",
      "$value": "45%",
      "$description": "Background grid intensity"
    },
    "underline-style": {
      "$type": "string",
      "$value": "solid",
      "$description": "Prose link underline style (playful themes run wavy)"
    }
  }
}