Verdant Finance

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#C1C4B1"
    foreground: "#1E2116"
    card: "#CDD0BE"
    card-foreground: "#1E2116"
    popover: "#CACDB9"
    popover-foreground: "#1E2116"
    primary: "#DEC956"
    primary-foreground: "#1A1E14"
    secondary: "#525A4B"
    secondary-foreground: "#D4D7C5"
    muted: "#B1B5A2"
    muted-foreground: "#000000"
    accent: "#5E6857"
    accent-foreground: "#F5F6EE"
    destructive: "#C0392B"
    destructive-foreground: "#FFFFFF"
    border: "#A4A796"
    input: "#A4A796"
    ring: "#DEC956"
    success: "#3D8C5A"
    success-foreground: "#000000"
    warning: "#D4A017"
    warning-foreground: "#1A1E14"
    chart-1: "#DEC956"
    chart-2: "#6F7A69"
    chart-3: "#525A4B"
    chart-4: "#A8AB99"
    chart-5: "#C09A30"
  palette:
    - { name: "yellow-brand", hex: "#dec956", role: "primary" }
    - { name: "yellow-vibrant", hex: "#dbcb54", role: "accent" }
    - { name: "yellow-light", hex: "#ccbb57", role: "accent-tint" }
    - { name: "yellow-deep", hex: "#c09a30", role: "accent-dark" }
    - { name: "yellow-dark-gold", hex: "#6d6317", role: "dark-accent" }
    - { name: "sage-lightest", hex: "#cdd0be", role: "card" }
    - { name: "sage-app-bg", hex: "#c1c4b1", role: "background" }
    - { name: "sage-mid-light", hex: "#b1b5a2", role: "muted" }
    - { name: "sage-presentation", hex: "#abaf9e", role: "surface-variant" }
    - { name: "sage-border", hex: "#a4a796", role: "border" }
    - { name: "sage-scored", hex: "#979973", role: "muted-accent" }
    - { name: "olive-icon", hex: "#6f7a69", role: "accent" }
    - { name: "olive-deep", hex: "#545c4f", role: "secondary" }
    - { name: "olive-darker", hex: "#525a4b", role: "secondary-alt" }
    - { name: "ink-near-black", hex: "#1e2116", role: "foreground" }
    - { name: "ink-mid", hex: "#484e42", role: "muted-foreground" }
    - { name: "ink-dim", hex: "#8a8f7a", role: "placeholder" }
    - { name: "cream", hex: "#f5f6ee", role: "on-dark-surface" }
    - { name: "sage-on-secondary", hex: "#d4d7c5", role: "on-secondary" }

/* 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=JetBrains%20Mono:wght@400;500;700&display=swap");

:root {
  --radius: 1.25rem;
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-sans: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --background: 69 14% 73%;
  --foreground: 76 20% 11%;
  --card: 70 16% 78%;
  --card-foreground: 76 20% 11%;
  --popover: 69 17% 76%;
  --popover-foreground: 76 20% 11%;
  --primary: 51 67% 60%;
  --primary-foreground: 84 20% 10%;
  --secondary: 92 9% 32%;
  --secondary-foreground: 70 18% 81%;
  --muted: 73 11% 67%;
  --muted-foreground: 0 0% 0%;
  --accent: 95 9% 37%;
  --accent-foreground: 67 31% 95%;
  --destructive: 6 63% 46%;
  --destructive-foreground: 0 0% 100%;
  --border: 71 9% 62%;
  --input: 71 9% 62%;
  --ring: 51 67% 60%;
  --success: 142 39% 39%;
  --success-foreground: 0 0% 0%;
  --warning: 43 80% 46%;
  --warning-foreground: 84 20% 10%;
  --chart-1: 51 67% 60%;
  --chart-2: 99 7% 45%;
  --chart-3: 92 9% 32%;
  --chart-4: 70 10% 64%;
  --chart-5: 44 60% 47%;
  --shadow-sm: 0 1px 3px rgba(30,33,22,0.07);
  --shadow-md: 0 4px 12px rgba(30,33,22,0.10);
  --shadow-lg: 0 8px 24px rgba(30,33,22,0.12);
  --shadow-xl: 0 16px 48px rgba(30,33,22,0.14);
  --gradient-hero: linear-gradient(135deg, #dec956 0%, #c9b548 100%);
  --gradient-brand: linear-gradient(180deg, #c1c4b1 0%, #abaf9e 100%);
  --gradient-subtle: linear-gradient(180deg, #cdd0be 0%, #c1c4b1 100%);
  --duration: 200ms;
  --duration-slow: 400ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --font-weight-heading: 700;
  --font-weight-body: 400;
  --button-radius: 9999px;
  --card-radius: 0.875rem;
  --input-radius: 0.5rem;
  --badge-radius: 9999px;
  --border-width: 1px;
  --card-border-width: 1px;
  --input-border-width: 1px;
  --button-border-width: 1px;
  --badge-border-width: 1px;
  --heading-transform: none;