Casa Esquina

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#F1EAA4"
    foreground: "#330101"
    card: "#FDFDFD"
    card-foreground: "#330101"
    popover: "#FDFDFD"
    popover-foreground: "#330101"
    primary: "#CB251B"
    primary-foreground: "#FDFDFD"
    secondary: "#EDE5B0"
    secondary-foreground: "#330101"
    muted: "#E8E2A8"
    muted-foreground: "#6B3028"
    accent: "#E6CC2C"
    accent-foreground: "#330101"
    destructive: "#940405"
    destructive-foreground: "#FDFDFD"
    border: "#C4B890"
    input: "#D8D1A0"
    ring: "#CB251B"
    success: "#2D6B1A"
    success-foreground: "#FDFDFD"
    warning: "#CE8837"
    warning-foreground: "#330101"
    chart-1: "#CB251B"
    chart-2: "#E6CC2C"
    chart-3: "#CE8837"
    chart-4: "#3D0705"
    chart-5: "#4A8A2A"
  palette:
    - { name: "brand-red", hex: "#cb251b", role: "primary" }
    - { name: "medium-red", hex: "#b02c22", role: "surface-red" }
    - { name: "scored-red", hex: "#cd2619", role: "surface-accent" }
    - { name: "deep-maroon", hex: "#330101", role: "background-dark" }
    - { name: "dark-maroon", hex: "#3d0705", role: "background-shell" }
    - { name: "danger-red", hex: "#940405", role: "destructive" }
    - { name: "pale-cream", hex: "#f1eaa4", role: "background-light" }
    - { name: "warm-white", hex: "#fdfdf2", role: "card-light" }
    - { name: "off-white", hex: "#fdfdfd", role: "card-surface" }
    - { name: "golden-yellow", hex: "#e6cc2c", role: "accent" }
    - { name: "amber-orange", hex: "#ce8837", role: "warning" }
    - { name: "muted-rose", hex: "#9a7162", role: "muted" }
    - { name: "light-sand", hex: "#cabda1", role: "muted-light" }
    - { name: "dark-muted", hex: "#453a2b", role: "muted-dark" }
    - { name: "data-green", hex: "#4a8a2a", role: "data-viz" }
    - { name: "data-olive", hex: "#6ab040", role: "data-viz" }
typography:
  heading: { family: "Archivo Black", weights: [400] }
  body: { family: "Barlow", weights: [400, 500, 600, 700] }

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

:root {
  --radius: 12px;
  --font-heading: 'Archivo Black', sans-serif;
  --font-sans: 'Barlow', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --background: 55 73% 79%;
  --foreground: 0 96% 10%;
  --card: 0 0% 99%;
  --card-foreground: 0 96% 10%;
  --popover: 0 0% 99%;
  --popover-foreground: 0 96% 10%;
  --primary: 3 77% 45%;
  --primary-foreground: 0 0% 99%;
  --secondary: 52 63% 81%;
  --secondary-foreground: 0 96% 10%;
  --muted: 54 58% 78%;
  --muted-foreground: 7 46% 29%;
  --accent: 52 79% 54%;
  --accent-foreground: 0 96% 10%;
  --destructive: 360 95% 30%;
  --destructive-foreground: 0 0% 99%;
  --border: 46 31% 67%;
  --input: 52 42% 74%;
  --ring: 3 77% 45%;
  --success: 106 61% 26%;
  --success-foreground: 0 0% 99%;
  --warning: 32 61% 51%;
  --warning-foreground: 0 96% 10%;
  --chart-1: 3 77% 45%;
  --chart-2: 52 79% 54%;
  --chart-3: 32 61% 51%;
  --chart-4: 2 85% 13%;
  --chart-5: 100 53% 35%;
  --shadow-sm: 0 1px 2px rgba(51,1,1,0.15);
  --shadow-md: 0 2px 8px rgba(51,1,1,0.20);
  --shadow-lg: 0 4px 16px rgba(51,1,1,0.25);
  --shadow-xl: 0 8px 32px rgba(51,1,1,0.30);
  --gradient-hero: linear-gradient(135deg, #cb251b 0%, #940405 100%);
  --gradient-brand: linear-gradient(180deg, #f1eaa4 0%, #e6cc2c 100%);
  --gradient-subtle: linear-gradient(180deg, #fdfdfd 0%, #f1eaa4 100%);
  --duration: 180ms;
  --duration-slow: 400ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --tracking-tight: -0.02em;
  --tracking-normal: 0.08em;
  --font-weight-heading: 900;
  --font-weight-body: 400;
  --button-radius: 6px;
  --card-radius: 12px;
  --input-radius: 4px;
  --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;