{
  "$description": "Renovaré design tokens. Single source of truth; CSS, Tailwind, JSON and Markdown outputs are generated from this file. Format: W3C Design Tokens (DTCG). Color names and numbering decided 2026-10-03 (neutral numbering revised 2026-10-04 to match renovare.org) (see docs/design-system-audit.md).",
  "color": {
    "$type": "color",
    "primary": {
      "$description": "Evergreen. Green represents growth and life. Lead with 500; use tints and deep shades for backgrounds and dark sections.",
      "100": { "$value": "#E8F5EF", "$description": "Tint for soft backgrounds.", "$extensions": { "org.renovare": { "name": "Primary 100", "role": "Tinted surface" } } },
      "200": { "$value": "#BCE2D1", "$description": "Soft tint for borders and panels on light; light text on dark green. Perceptual midpoint of 100 and 300.", "$extensions": { "org.renovare": { "name": "Primary 200", "role": "Soft tint" } } },
      "300": { "$value": "#8FCFB4", "$description": "Accents and text on dark green.", "$extensions": { "org.renovare": { "name": "Primary 300", "role": "Accent on dark" } } },
      "400": { "$value": "#19AD6E", "$description": "Bright green. Replaces 500 on dark backgrounds; hover, focus, selection. Too light for text on light backgrounds (2.6:1).", "$extensions": { "org.renovare": { "name": "Primary 400", "core": 2, "role": "Bright accent / on dark", "legacy": ["500 / dark"] } } },
      "500": { "$value": "#106E46", "$description": "Core brand green. Default for brand color, buttons and links on light backgrounds.", "$extensions": { "org.renovare": { "name": "Primary 500", "core": 1, "role": "Core brand", "legacy": ["500 / light"] } } },
      "600": { "$value": "#0D5738", "$description": "Hover / pressed state for 500.", "$extensions": { "org.renovare": { "name": "Primary 600", "role": "Pressed" } } },
      "700": { "$value": "#18412F", "$description": "Deep field for dark sections, footer and newsletter panels.", "$extensions": { "org.renovare": { "name": "Primary 700", "core": 3, "role": "Dark surface" } } },
      "800": { "$value": "#0F3724", "$description": "Dark hero band.", "$extensions": { "org.renovare": { "name": "Primary 800", "role": "Darker surface" } } },
      "900": { "$value": "#041D13", "$description": "Near-black green; button borders.", "$extensions": { "org.renovare": { "name": "Primary 900", "role": "Near-black" } } }
    },
    "neutral": {
      "$description": "Warm gray. Neutrals carry most pages: off-white backgrounds, hairline borders, near-black text. They should feel almost invisible.",
      "white": { "$value": "#FFFFFF", "$description": "Cards and panels on the page background.", "$extensions": { "org.renovare": { "name": "White", "role": "Card surface", "legacy": ["Neutral 100 (palette sheet)"] } } },
      "100": { "$value": "#FAF7F5", "$description": "Lighter band / raised surface.", "$extensions": { "org.renovare": { "name": "Neutral 100", "role": "Raised surface", "legacy": ["Neutral 200 (palette sheet)"] } } },
      "200": { "$value": "#F2F0ED", "$description": "Default page background.", "$extensions": { "org.renovare": { "name": "Neutral 200", "core": 4, "role": "Page background", "legacy": ["Neutral BG (palette sheet)"] } } },
      "300": { "$value": "#E7E4E0", "$description": "Hairline borders, CTA panels.", "$extensions": { "org.renovare": { "name": "Neutral 300", "role": "Border" } } },
      "400": { "$value": "#CFCAC5", "$description": "Strong borders, rules.", "$extensions": { "org.renovare": { "name": "Neutral 400", "role": "Strong border" } } },
      "500": { "$value": "#A6A09A", "$description": "Disabled and decorative only; not for text.", "$extensions": { "org.renovare": { "name": "Neutral 500", "role": "Decorative" } } },
      "600": { "$value": "#7D7771", "$description": "Muted text at large sizes. Fails AA for body text on the page background (3.9:1).", "$extensions": { "org.renovare": { "name": "Neutral 600", "role": "Muted text (large)" } } },
      "700": { "$value": "#4D4741", "$description": "Secondary text.", "$extensions": { "org.renovare": { "name": "Neutral 700", "role": "Secondary text" } } },
      "800": { "$value": "#2B2722", "$description": "Body text.", "$extensions": { "org.renovare": { "name": "Neutral 800", "core": 5, "role": "Body text" } } },
      "900": { "$value": "#080605", "$description": "Headings, near-black.", "$extensions": { "org.renovare": { "name": "Neutral 900", "role": "Heading text" } } }
    },
    "accent": {
      "$description": "Secondary accents. Decorative only; they carry no meaning. Use sparingly, in the rotation order, for panels, icon tiles and bands. Light accents (ochre, amber, teal, periwinkle) work as fills or with dark text, never as text on white.",
      "$extensions": { "org.renovare": { "rotation": ["navy", "plum", "teal", "amber"] } },
      "ochre": { "$value": "#D1A84C", "$extensions": { "org.renovare": { "name": "Ochre", "role": "Accent fill", "legacy": ["Yellow 1", "yellow (site)", "--gold"] } } },
      "rust": { "$value": "#993E17", "$extensions": { "org.renovare": { "name": "Rust", "role": "Accent fill", "legacy": ["Yellow 2", "yellow-dark (site)", "--gold-deep"] } } },
      "amber": { "$value": "#CC7829", "$extensions": { "org.renovare": { "name": "Amber", "role": "Accent fill", "legacy": ["Orange 1", "orange (site)"] } } },
      "brick": { "$value": "#A43939", "$description": "The only accent with a meaning: errors. Avoid it for decoration.", "$extensions": { "org.renovare": { "name": "Brick", "role": "Errors", "legacy": ["Orange 2", "orange-dark (site)", "--orange-deep"] } } },
      "teal": { "$value": "#558E99", "$extensions": { "org.renovare": { "name": "Teal", "role": "Accent fill", "legacy": ["Blue 1", "blue (site)"] } } },
      "navy": { "$value": "#334657", "$extensions": { "org.renovare": { "name": "Navy", "role": "Accent fill; blue band", "legacy": ["Blue 2", "blue-dark (site)"] } } },
      "periwinkle": { "$value": "#6E8ACC", "$extensions": { "org.renovare": { "name": "Periwinkle", "role": "Accent fill", "legacy": ["Purple 1", "Purple 100", "purple-lighter (site)", "--purple (_ds)"] } } },
      "plum": { "$value": "#592E46", "$extensions": { "org.renovare": { "name": "Plum", "role": "Accent fill; purple band", "legacy": ["Purple 2", "Purple 300", "purple (site)", "--purple-deep (_ds)"] } } }
    },
    "text": {
      "$description": "Semantic aliases. Reference these in components.",
      "body": { "$value": "{color.neutral.800}" },
      "heading": { "$value": "{color.neutral.900}" },
      "secondary": { "$value": "{color.neutral.700}" },
      "brand": { "$value": "{color.primary.500}" },
      "on-dark": { "$value": "{color.neutral.white}" },
      "error": { "$value": "{color.accent.brick}" }
    },
    "surface": {
      "page": { "$value": "{color.neutral.200}" },
      "card": { "$value": "{color.neutral.white}" },
      "raised": { "$value": "{color.neutral.100}" },
      "panel": { "$value": "{color.neutral.300}" },
      "dark": { "$value": "{color.primary.700}" },
      "darker": { "$value": "{color.primary.800}" },
      "brand": { "$value": "{color.primary.500}" }
    },
    "border": {
      "default": { "$value": "{color.neutral.300}" },
      "strong": { "$value": "{color.neutral.400}" },
      "brand": { "$value": "{color.primary.700}" }
    },
    "action": {
      "default": { "$value": "{color.primary.500}" },
      "hover": { "$value": "{color.primary.600}", "$description": "Primary button hover. White text stays at ~8.5:1. (Replaces the bright Primary 400 hover, which dropped white text to 2.9:1.)" },
      "pressed": { "$value": "{color.primary.700}" }
    }
  },
  "font": {
    "family": {
      "$type": "fontFamily",
      "display": { "$value": ["kepler-3-display-variable", "Georgia", "Times New Roman", "serif"], "$description": "Kepler Display: headlines, pull quotes, big moments. Adobe Fonts kit piw5axu." },
      "serif": { "$value": ["kepler-3-variable", "Georgia", "Times New Roman", "serif"], "$description": "Kepler (text optical size): long-form prose, letters, blockquotes. Adobe Fonts kit piw5axu." },
      "sans": { "$value": ["dm-sans", "DM Sans", "Helvetica Neue", "Helvetica", "Arial", "sans-serif"], "$description": "DM Sans: body, UI, labels, captions. Adobe Fonts kit piw5axu (also free on Google Fonts as \"DM Sans\")." },
      "fallback-serif": { "$value": ["Lora", "Georgia", "serif"], "$description": "Official stand-in for both Kepler faces where Kepler isn't available: Google Docs/Slides, Adobe Express, email. Headings Lora 500, body Lora 400." }
    },
    "weight": {
      "$type": "fontWeight",
      "regular": { "$value": 400 },
      "medium": { "$value": 500, "$description": "DM Sans 500 must be in the Adobe Fonts kit to render correctly." },
      "semibold": { "$value": 600, "$description": "DM Sans 600 must be in the Adobe Fonts kit to render correctly." },
      "bold": { "$value": 700, "$description": "DM Sans only. Kepler Display headings use regular (400) and semibold (600)." },
      "prose": { "$value": 360, "$description": "Kepler text weight for long-form prose (variable font)." }
    },
    "size": {
      "$type": "dimension",
      "$description": "renovare.org sets the root font size to 18px, so 1rem = 18px. Values are Tailwind's text-* steps at that root.",
      "2xs": { "$value": "0.625rem", "$description": "11.25px; micro meta" },
      "xs": { "$value": "0.75rem", "$description": "13.5px; eyebrow / meta" },
      "sm": { "$value": "0.875rem", "$description": "15.75px" },
      "base": { "$value": "1rem", "$description": "18px; body" },
      "lg": { "$value": "1.125rem", "$description": "20.25px; buttons" },
      "xl": { "$value": "1.25rem", "$description": "22.5px" },
      "2xl": { "$value": "1.5rem", "$description": "27px" },
      "3xl": { "$value": "1.875rem", "$description": "33.75px" },
      "4xl": { "$value": "2.25rem", "$description": "40.5px; h1 on mobile" },
      "5xl": { "$value": "3rem", "$description": "54px" },
      "6xl": { "$value": "3.75rem", "$description": "67.5px" },
      "7xl": { "$value": "4.5rem", "$description": "81px" },
      "8xl": { "$value": "6rem", "$description": "108px; h1 at xl" }
    },
    "leading": {
      "$type": "number",
      "none": { "$value": 1 },
      "tight": { "$value": 1.25 },
      "snug": { "$value": 1.375 },
      "normal": { "$value": 1.5 },
      "relaxed": { "$value": 1.625 }
    },
    "tracking": {
      "$type": "dimension",
      "normal": { "$value": "0em" },
      "wide": { "$value": "0.025em" },
      "wider": { "$value": "0.05em", "$description": "Eyebrow / meta caps" }
    }
  },
  "radius": {
    "$type": "dimension",
    "$description": "Soft, not pill. rem at an 18px root.",
    "sm": { "$value": "0.125rem", "$description": "2.25px" },
    "default": { "$value": "0.25rem", "$description": "4.5px; buttons, cards, inputs" },
    "md": { "$value": "0.375rem", "$description": "6.75px; badges, media tiles, podcast covers" },
    "lg": { "$value": "0.5rem", "$description": "9px. Retired: use md for small surfaces, xl for panels.", "$deprecated": "Use radius.md or radius.xl." },
    "xl": { "$value": "0.75rem", "$description": "13.5px; CTA panels" },
    "full": { "$value": "9999px", "$description": "Avatars, pills" }
  },
  "shadow": {
    "$description": "Layered, low-contrast. sm–xl are warm-tinted; 3xl–5xl are directional (light from upper right) for photo tiles and media.",
    "sm": { "$value": "0px 2px 2px 0px rgba(88, 70, 80, 0.01), 0px 1px 2px 0px rgba(88, 70, 80, 0.05), 0px 1px 1px 0px rgba(88, 70, 80, 0.09), 0px 0px 1px 0px rgba(88, 70, 80, 0.1)" },
    "md": { "$value": "0px 14px 5px 0px rgba(88, 70, 80, 0.01), 0px 8px 5px 0px rgba(88, 70, 80, 0.04), 0px 3px 3px 0px rgba(88, 70, 80, 0.07), 0px 0px 2px 0px rgba(88, 70, 80, 0.08)" },
    "lg": { "$value": "0px 39px 16px 0px rgba(88, 70, 80, 0.01), 0px 22px 13px 0px rgba(88, 70, 80, 0.04), 0px 10px 10px 0px rgba(88, 70, 80, 0.07), 0px 1px 5px 0px rgba(88, 70, 80, 0.08)" },
    "xl": { "$value": "0px 277px 111px 0px rgba(88, 70, 80, 0.01), 0px 156px 94px 0px rgba(88, 70, 80, 0.04), 0px 69px 69px 0px rgba(88, 70, 80, 0.07), 0px 17px 38px 0px rgba(88, 70, 80, 0.08)" },
    "3xl": { "$value": "-60px 75px 25px 0px rgba(0, 5, 20, 0.00), -22.5px 30px 15px 0px rgba(0, 5, 20, 0.01), -15px 22.5px 22.5px 0px rgba(0, 5, 20, 0.10), -7.5px 11.25px 15px 0px rgba(0, 5, 20, 0.17), -3px 4.5px 12.75px 0px rgba(0, 5, 20, 0.20)" },
    "4xl": { "$value": "-80px 100px 34px 0px rgba(0, 5, 20, 0.00), -30px 40px 20px 0px rgba(0, 5, 20, 0.01), -20px 30px 30px 0px rgba(0, 5, 20, 0.10), -10px 15px 20px 0px rgba(0, 5, 20, 0.17), -4px 6px 17px 0px rgba(0, 5, 20, 0.20)" },
    "5xl": { "$value": "-119.111px 148.889px 50.622px 0px rgba(0, 5, 20, 0.00), -44.667px 59.556px 29.778px 0px rgba(0, 5, 20, 0.01), -29.778px 44.667px 44.667px 0px rgba(0, 5, 20, 0.10), -14.889px 22.333px 29.778px 0px rgba(0, 5, 20, 0.17), -5.956px 8.933px 25.311px 0px rgba(0, 5, 20, 0.20)" }
  },
  "motion": {
    "duration": {
      "$type": "duration",
      "default": { "$value": "300ms", "$description": "Site default for transitions." },
      "button": { "$value": "200ms", "$description": "Button fill grow and underline wipe." }
    },
    "easing": {
      "$type": "cubicBezier",
      "default": { "$value": [0.455, 0.03, 0.515, 0.955], "$description": "In-out quad; site default." },
      "in-out-circ": { "$value": [0.785, 0.135, 0.15, 0.86], "$description": "Underline wipes, video hover." },
      "out-expo": { "$value": [0.19, 1, 0.22, 1] }
    },
    "hover-scale": {
      "$type": "number",
      "button": { "$value": 1.1, "$description": "Primary/secondary button fill grows on hover." },
      "media": { "$value": 1.05, "$description": "Images zoom inside cards on hover." }
    }
  },
  "layout": {
    "$type": "dimension",
    "container": { "$value": "1536px", "$description": ".fluid-container max width" },
    "gutter": { "$value": "2rem", "$description": "Side padding below lg (36px)" },
    "gutter-lg": { "$value": "3rem", "$description": "Side padding at lg and up (54px)" },
    "prose": { "$value": "42rem", "$description": "Readable measure, max-w-2xl" }
  }
}