UPC Renewables

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#F3EFEE"
    foreground: "#1A1816"
    card: "#FEFEFE"
    card-foreground: "#1A1816"
    popover: "#FEFEFE"
    popover-foreground: "#1A1816"
    primary: "#E99147"
    primary-foreground: "#1A1816"
    secondary: "#545D36"
    secondary-foreground: "#F3EFEE"
    muted: "#ECEAE9"
    muted-foreground: "#545760"
    accent: "#243C5C"
    accent-foreground: "#F3EFEE"
    destructive: "#B91C1C"
    destructive-foreground: "#FFFFFF"
    border: "#E0DCD9"
    input: "#E0DCD9"
    ring: "#E99147"
    success: "#166534"
    success-foreground: "#FFFFFF"
    warning: "#D97706"
    warning-foreground: "#1A1816"
    chart-1: "#E99147"
    chart-2: "#243C5C"
    chart-3: "#74B4D4"
    chart-4: "#545D36"
    chart-5: "#928F53"
  palette:
    - { name: "cream-canvas", hex: "#f3efee", role: "background" }
    - { name: "pure-white", hex: "#fefefe", role: "surface" }
    - { name: "warm-white", hex: "#f6f2f1", role: "surface" }
    - { name: "soft-bone", hex: "#e8e5e3", role: "border" }
    - { name: "parchment", hex: "#eceae9", role: "muted-surface" }
    - { name: "ivory-fog", hex: "#faf6f4", role: "surface" }
    - { name: "amber-gold", hex: "#e99147", role: "primary-accent" }
    - { name: "deep-amber", hex: "#df9551", role: "accent" }
    - { name: "navy-deep", hex: "#243c5c", role: "dark-accent" }
    - { name: "sky-azure", hex: "#74b4d4", role: "secondary-accent" }
    - { name: "muted-sage", hex: "#928f53", role: "accent" }
    - { name: "forest-olive", hex: "#545d36", role: "secondary" }
    - { name: "earth-shadow", hex: "#2b351f", role: "dark-tone" }
    - { name: "slate-teal", hex: "#64797b", role: "muted-accent" }
    - { name: "cool-gray", hex: "#6d6f7c", role: "muted-foreground" }
    - { name: "periwinkle", hex: "#94a4c4", role: "light-accent" }
    - { name: "charcoal-warm", hex: "#1a1816", role: "foreground" }
    - { name: "chart-amber", hex: "#e99147", role: "data-viz" }
    - { name: "chart-navy", hex: "#243c5c", role: "data-viz" }

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

:root {
  --radius: 0.75rem;
  --font-heading: 'Playfair Display', serif;
  --font-sans: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --background: 12 17% 94%;
  --foreground: 30 8% 9%;
  --card: 0 0% 100%;
  --card-foreground: 30 8% 9%;
  --popover: 0 0% 100%;
  --popover-foreground: 30 8% 9%;
  --primary: 27 79% 60%;
  --primary-foreground: 30 8% 9%;
  --secondary: 74 27% 29%;
  --secondary-foreground: 12 17% 94%;
  --muted: 20 7% 92%;
  --muted-foreground: 225 7% 35%;
  --accent: 214 44% 25%;
  --accent-foreground: 12 17% 94%;
  --destructive: 0 74% 42%;
  --destructive-foreground: 0 0% 100%;
  --border: 26 10% 86%;
  --input: 26 10% 86%;
  --ring: 27 79% 60%;
  --success: 143 64% 24%;
  --success-foreground: 0 0% 100%;
  --warning: 32 95% 44%;
  --warning-foreground: 30 8% 9%;
  --chart-1: 27 79% 60%;
  --chart-2: 214 44% 25%;
  --chart-3: 200 53% 64%;
  --chart-4: 74 27% 29%;
  --chart-5: 57 28% 45%;
  --shadow-sm: 0 1px 2px rgba(26,24,22,0.05);
  --shadow-md: 0 2px 8px rgba(26,24,22,0.07);
  --shadow-lg: 0 4px 16px rgba(26,24,22,0.09);
  --shadow-xl: 0 8px 32px rgba(26,24,22,0.11);
  --gradient-hero: linear-gradient(180deg, #fefefe 0%, #f3efee 100%);
  --gradient-brand: linear-gradient(135deg, #e99147 0%, #df9551 100%);
  --gradient-subtle: linear-gradient(180deg, #f3efee 0%, #eceae9 100%);
  --duration: 220ms;
  --duration-slow: 440ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --tracking-tight: -0.02em;
  --tracking-normal: 0.01em;
  --font-weight-heading: 400;
  --font-weight-body: 400;
  --button-radius: 9999px;
  --card-radius: 0.5rem;
  --input-radius: 0.375rem;
  --badge-radius: 9999px;
  --border-width: 1px;
  --card-border-width: 0;
  --input-border-width: 1px;
  --button-border-width: 0;
  --badge-border-width: 1px;
  --heading-transform: none;