C.Lab Warm Organic

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#FAF7F5"
    foreground: "#1A1612"
    card: "#F5EFE9"
    card-foreground: "#1A1612"
    popover: "#FAF7F5"
    popover-foreground: "#1A1612"
    primary: "#1C1C1A"
    primary-foreground: "#FAF7F5"
    secondary: "#ECE4DB"
    secondary-foreground: "#3A2E28"
    muted: "#F0E6DE"
    muted-foreground: "#6E5A52"
    accent: "#FD7C15"
    accent-foreground: "#1A1612"
    destructive: "#A84E33"
    destructive-foreground: "#FFFFFF"
    border: "#DDD2CB"
    input: "#EDE5DE"
    ring: "#FD7C15"
    success: "#4A7A3C"
    success-foreground: "#FFFFFF"
    warning: "#F5A623"
    warning-foreground: "#1A1612"
    chart-1: "#FD7C15"
    chart-2: "#A84E33"
    chart-3: "#7A9E64"
    chart-4: "#C9A87C"
    chart-5: "#6C4738"
  palette:
    - { name: "warm-white", hex: "#faf7f5", role: "background-light" }
    - { name: "cream", hex: "#f5efe9", role: "card-surface-light" }
    - { name: "linen", hex: "#ede5de", role: "input-fill" }
    - { name: "sand", hex: "#ddd2cb", role: "border" }
    - { name: "blush-sand", hex: "#e8ddd6", role: "secondary-surface" }
    - { name: "rose-ash", hex: "#cabab1", role: "muted-light" }
    - { name: "warm-near-black", hex: "#1a1612", role: "foreground-light" }
    - { name: "card-dark", hex: "#1e1e1e", role: "promotional-surface" }
    - { name: "charcoal-warm", hex: "#242018", role: "card-surface-dark" }
    - { name: "espresso", hex: "#362e26", role: "secondary-surface-dark" }
    - { name: "bark", hex: "#6c4738", role: "dark-muted" }
    - { name: "warm-mid", hex: "#9d8373", role: "muted-text" }
    - { name: "mocha", hex: "#6e5a52", role: "muted-text-light" }
    - { name: "brand-orange", hex: "#fd7c15", role: "accent-orb" }
    - { name: "orange-glow", hex: "#f4ae74", role: "gradient-mid" }
    - { name: "orange-pale", hex: "#fde8d8", role: "gradient-edge" }
    - { name: "vibrant-rust", hex: "#c17d48", role: "data-viz" }
    - { name: "terracotta", hex: "#a84e33", role: "destructive" }
    - { name: "sage", hex: "#7a9e64", role: "success" }

/* 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.5rem;
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-sans: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --background: 24 33% 97%;
  --foreground: 30 18% 9%;
  --card: 30 38% 94%;
  --card-foreground: 30 18% 9%;
  --popover: 24 33% 97%;
  --popover-foreground: 30 18% 9%;
  --primary: 60 4% 11%;
  --primary-foreground: 24 33% 97%;
  --secondary: 32 31% 89%;
  --secondary-foreground: 20 18% 19%;
  --muted: 27 37% 91%;
  --muted-foreground: 17 15% 38%;
  --accent: 27 98% 54%;
  --accent-foreground: 30 18% 9%;
  --destructive: 14 53% 43%;
  --destructive-foreground: 0 0% 100%;
  --border: 23 21% 83%;
  --input: 28 29% 90%;
  --ring: 27 98% 54%;
  --success: 106 34% 36%;
  --success-foreground: 0 0% 100%;
  --warning: 37 91% 55%;
  --warning-foreground: 30 18% 9%;
  --chart-1: 27 98% 54%;
  --chart-2: 14 53% 43%;
  --chart-3: 97 23% 51%;
  --chart-4: 34 42% 64%;
  --chart-5: 17 32% 32%;
  --shadow-sm: 0 1px 4px rgba(26,18,12,0.06);
  --shadow-md: 0 4px 20px rgba(26,18,12,0.09);
  --shadow-lg: 0 8px 40px rgba(26,18,12,0.11);
  --shadow-xl: 0 20px 72px rgba(26,18,12,0.14);
  --gradient-hero: radial-gradient(ellipse 55% 55% at 65% 55%, #fd7c15 0%, #f4ae74 38%, #fde8d8 62%, transparent 80%);
  --gradient-brand: linear-gradient(140deg, #f5efe9 0%, #fde8d8 50%, #fd7c15 100%);
  --gradient-subtle: linear-gradient(180deg, #faf7f5 0%, #f0e6de 100%);
  --duration: 220ms;
  --duration-slow: 420ms;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --font-weight-heading: 300;
  --font-weight-body: 400;
  --button-radius: 9999px;
  --card-radius: 1.75rem;
  --input-radius: 9999px;
  --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;