Sage & Slate Editorial

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#ECEEE2"
    foreground: "#1C1E19"
    card: "#F5F5EF"
    card-foreground: "#1C1E19"
    popover: "#F5F5EF"
    popover-foreground: "#1C1E19"
    primary: "#4A8649"
    primary-foreground: "#000000"
    secondary: "#4774AC"
    secondary-foreground: "#FFFFFF"
    muted: "#E4E6DA"
    muted-foreground: "#585C50"
    accent: "#CDBE7E"
    accent-foreground: "#2D2C1A"
    destructive: "#C94040"
    destructive-foreground: "#FFFFFF"
    border: "#D3D5C8"
    input: "#D3D5C8"
    ring: "#4A8649"
    success: "#4A8649"
    success-foreground: "#000000"
    warning: "#B08A38"
    warning-foreground: "#000000"
    chart-1: "#4A8649"
    chart-2: "#4774AC"
    chart-3: "#CDBE7E"
    chart-4: "#7AA87A"
    chart-5: "#3D4227"
  palette:
    - { name: "sage-background", hex: "#eceee2", role: "surface" }
    - { name: "card-warm-white", hex: "#f5f5ef", role: "surface" }
    - { name: "off-white", hex: "#f3f3f3", role: "surface" }
    - { name: "sage-soft", hex: "#eef0e5", role: "surface" }
    - { name: "sage-pale", hex: "#eff0eb", role: "surface" }
    - { name: "light-neutral", hex: "#dededd", role: "surface" }
    - { name: "dark-ink", hex: "#1c1e19", role: "ink" }
    - { name: "medium-ink", hex: "#585c50", role: "ink" }
    - { name: "forest-green", hex: "#4a8649", role: "brand" }
    - { name: "dark-forest", hex: "#35471c", role: "brand" }
    - { name: "dark-olive", hex: "#3d4227", role: "brand" }
    - { name: "sage-green-mid", hex: "#3e6136", role: "brand" }
    - { name: "slate-blue", hex: "#4774ac", role: "accent" }
    - { name: "muted-blue", hex: "#5782ad", role: "accent" }
    - { name: "deep-blue", hex: "#35699f", role: "accent" }
    - { name: "light-blue-grey", hex: "#a2bccb", role: "accent" }
    - { name: "warm-wheat", hex: "#cdbe7e", role: "accent" }
    - { name: "light-grey", hex: "#d1d8dd", role: "neutral" }
    - { name: "border-sage", hex: "#d3d5c8", role: "border" }

/* Generated by Identity Forge design kits */
@import url("https://fonts.googleapis.com/css2?family=Plus%20Jakarta%20Sans:wght@400;500;600;700&family=DM%20Sans:wght@400;500;700&family=Space%20Mono:wght@400;700&display=swap");

:root {
  --radius: 1.25rem;
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-sans: 'DM Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --background: 70 26% 91%;
  --foreground: 84 9% 11%;
  --card: 60 23% 95%;
  --card-foreground: 84 9% 11%;
  --popover: 60 23% 95%;
  --popover-foreground: 84 9% 11%;
  --primary: 119 29% 41%;
  --primary-foreground: 0 0% 0%;
  --secondary: 213 42% 48%;
  --secondary-foreground: 0 0% 100%;
  --muted: 70 19% 88%;
  --muted-foreground: 80 7% 34%;
  --accent: 49 44% 65%;
  --accent-foreground: 57 27% 14%;
  --destructive: 0 56% 52%;
  --destructive-foreground: 0 0% 100%;
  --border: 69 13% 81%;
  --input: 69 13% 81%;
  --ring: 119 29% 41%;
  --success: 119 29% 41%;
  --success-foreground: 0 0% 0%;
  --warning: 41 52% 45%;
  --warning-foreground: 0 0% 0%;
  --chart-1: 119 29% 41%;
  --chart-2: 213 42% 48%;
  --chart-3: 49 44% 65%;
  --chart-4: 120 21% 57%;
  --chart-5: 71 26% 21%;
  --shadow-sm: 0 1px 4px rgba(28,30,25,0.06);
  --shadow-md: 0 4px 16px rgba(28,30,25,0.08);
  --shadow-lg: 0 8px 28px rgba(28,30,25,0.10);
  --shadow-xl: 0 16px 48px rgba(28,30,25,0.13);
  --gradient-hero: linear-gradient(160deg, #eceee2 0%, #e4e8d8 100%);
  --gradient-brand: linear-gradient(135deg, #4a8649 0%, #35699f 100%);
  --gradient-subtle: linear-gradient(180deg, #f5f5ef 0%, #eceee2 100%);
  --duration: 200ms;
  --duration-slow: 400ms;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --font-weight-heading: 700;
  --font-weight-body: 400;
  --button-radius: 0.5rem;
  --card-radius: 1.5rem;
  --input-radius: 0.5rem;
  --badge-radius: 9999px;
  --border-width: 1px;
  --card-border-width: 0;
  --input-border-width: 1px;
  --button-border-width: 0;
  --badge-border-width: 0;
  --heading-transform: none;