Quiet Matter

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#EEF3F1"
    foreground: "#0F2018"
    card: "#F7FAF8"
    card-foreground: "#0F2018"
    popover: "#F7FAF8"
    popover-foreground: "#0F2018"
    primary: "#1A3D27"
    primary-foreground: "#F0F8F4"
    secondary: "#C8DDD8"
    secondary-foreground: "#1A3D27"
    muted: "#DCE8E4"
    muted-foreground: "#3E5A4F"
    accent: "#50BB43"
    accent-foreground: "#0C1C0A"
    destructive: "#C53030"
    destructive-foreground: "#FFFFFF"
    border: "#B8CCC8"
    input: "#B8CCC8"
    ring: "#1A3D27"
    success: "#2A6B3E"
    success-foreground: "#F0F8F2"
    warning: "#8B6914"
    warning-foreground: "#FFFFFF"
    chart-1: "#50BB43"
    chart-2: "#1A3D27"
    chart-3: "#76A62D"
    chart-4: "#6D8D7B"
    chart-5: "#A7C3BD"
  palette:
    - { name: "fog-sage", hex: "#e4ebe9", role: "surface" }
    - { name: "mist-sage", hex: "#c2d6d5", role: "surface" }
    - { name: "pale-aqua-sage", hex: "#d4e3e3", role: "surface" }
    - { name: "light-seafoam", hex: "#bcd1d2", role: "surface" }
    - { name: "sage-whisper", hex: "#dce7e7", role: "surface" }
    - { name: "warm-white", hex: "#f4f3ee", role: "surface" }
    - { name: "vivid-moss", hex: "#50bb43", role: "accent" }
    - { name: "deep-forest", hex: "#0c1c0a", role: "ink" }
    - { name: "light-sage-green", hex: "#dde8c2", role: "surface" }
    - { name: "sage-green", hex: "#6d8d7b", role: "muted" }
    - { name: "dark-forest", hex: "#31573d", role: "secondary" }
    - { name: "pale-sage-muted", hex: "#a7c3bd", role: "muted" }
    - { name: "atmospheric-sage", hex: "#a2beb9", role: "surface" }
    - { name: "moss-yellow-green", hex: "#76a62d", role: "accent" }
    - { name: "mid-forest-sage", hex: "#678d72", role: "muted" }
    - { name: "bark-warm-dark", hex: "#38352c", role: "ink" }
    - { name: "forest-ink", hex: "#1a3d27", role: "primary" }
    - { name: "page-sage", hex: "#eef3f1", role: "background" }
    - { name: "deep-moss-bg", hex: "#0c1c0e", role: "background-dark" }

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

:root {
  --radius: 0.625rem;
  --font-heading: 'Barlow Condensed', sans-serif;
  --font-sans: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --background: 156 17% 94%;
  --foreground: 152 36% 9%;
  --card: 140 23% 97%;
  --card-foreground: 152 36% 9%;
  --popover: 140 23% 97%;
  --popover-foreground: 152 36% 9%;
  --primary: 142 40% 17%;
  --primary-foreground: 150 36% 96%;
  --secondary: 166 24% 83%;
  --secondary-foreground: 142 40% 17%;
  --muted: 160 21% 89%;
  --muted-foreground: 156 18% 30%;
  --accent: 114 47% 50%;
  --accent-foreground: 113 47% 7%;
  --destructive: 0 61% 48%;
  --destructive-foreground: 0 0% 100%;
  --border: 168 16% 76%;
  --input: 168 16% 76%;
  --ring: 142 40% 17%;
  --success: 138 44% 29%;
  --success-foreground: 135 36% 96%;
  --warning: 43 75% 31%;
  --warning-foreground: 0 0% 100%;
  --chart-1: 114 47% 50%;
  --chart-2: 142 40% 17%;
  --chart-3: 84 57% 41%;
  --chart-4: 146 13% 49%;
  --chart-5: 167 19% 71%;
  --shadow-sm: 0 1px 2px rgba(15,32,24,0.06);
  --shadow-md: 0 2px 8px rgba(15,32,24,0.10);
  --shadow-lg: 0 4px 16px rgba(15,32,24,0.14);
  --shadow-xl: 0 8px 32px rgba(15,32,24,0.18);
  --gradient-hero: linear-gradient(to bottom, rgba(12,28,14,0.0) 0%, rgba(12,28,14,0.45) 100%);
  --gradient-brand: linear-gradient(135deg, #1a3d27 0%, #31573d 60%, #50bb43 100%);
  --gradient-subtle: linear-gradient(180deg, #eef3f1 0%, #dce8e4 100%);
  --duration: 220ms;
  --duration-slow: 480ms;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --font-weight-heading: 800;
  --font-weight-body: 400;
  --button-radius: 9999px;
  --card-radius: 0.375rem;
  --input-radius: 0.375rem;
  --badge-radius: 9999px;
  --border-width: 1px;
  --card-border-width: 1px;
  --input-border-width: 1px;
  --button-border-width: 1px;
  --badge-border-width: 1px;
  --heading-transform: uppercase;