Strelka Grid

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#F3F3F3"
    foreground: "#1A1A1A"
    card: "#FFFFFF"
    card-foreground: "#1A1A1A"
    popover: "#FFFFFF"
    popover-foreground: "#1A1A1A"
    primary: "#3BBC8F"
    primary-foreground: "#0A1F16"
    secondary: "#ECB6C3"
    secondary-foreground: "#1A1A1A"
    muted: "#E6E6E6"
    muted-foreground: "#555555"
    accent: "#F4B7C7"
    accent-foreground: "#1A1A1A"
    destructive: "#C0392B"
    destructive-foreground: "#FFFFFF"
    border: "#C8C8C8"
    input: "#E8E8E8"
    ring: "#3BBC8F"
    success: "#3BBC8F"
    success-foreground: "#0A1F16"
    warning: "#E8891A"
    warning-foreground: "#1A1A1A"
    chart-1: "#3BBC8F"
    chart-2: "#ECB6C3"
    chart-3: "#275C44"
    chart-4: "#A2A2A2"
    chart-5: "#F0A030"
  palette:
    - { name: "mint-teal", hex: "#3bbc8f", role: "primary" }
    - { name: "sage-teal", hex: "#46b48d", role: "surface-band" }
    - { name: "muted-teal", hex: "#54b393", role: "muted" }
    - { name: "dark-forest", hex: "#275c44", role: "dark-variant" }
    - { name: "dark-muted-teal", hex: "#384942", role: "dark-variant" }
    - { name: "light-mint", hex: "#60dcad", role: "data-viz" }
    - { name: "dusty-rose", hex: "#ecb6c3", role: "secondary" }
    - { name: "light-rose", hex: "#f4b7c7", role: "accent" }
    - { name: "muted-rose", hex: "#dbacbc", role: "muted" }
    - { name: "scored-pink", hex: "#fcb9cb", role: "data-viz" }
    - { name: "near-white", hex: "#f3f3f3", role: "background" }
    - { name: "off-white", hex: "#f0f0f0", role: "surface" }
    - { name: "light-border", hex: "#c8c8c8", role: "border" }
    - { name: "near-black", hex: "#1a1a1a", role: "foreground" }
    - { name: "dark-green-ink", hex: "#0a1f16", role: "foreground-on-primary" }
    - { name: "mid-gray", hex: "#a2a2a2", role: "muted" }
    - { name: "dim-gray", hex: "#555555", role: "muted-foreground" }
    - { name: "amber", hex: "#e8891a", role: "warning" }
    - { name: "amber-light", hex: "#f0a030", role: "warning-dark" }

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

:root {
  --radius: 0rem;
  --font-heading: 'Barlow', sans-serif;
  --font-sans: 'Barlow', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --background: 0 0% 95%;
  --foreground: 0 0% 10%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 10%;
  --primary: 159 52% 48%;
  --primary-foreground: 154 51% 8%;
  --secondary: 346 59% 82%;
  --secondary-foreground: 0 0% 10%;
  --muted: 0 0% 90%;
  --muted-foreground: 0 0% 33%;
  --accent: 344 73% 84%;
  --accent-foreground: 0 0% 10%;
  --destructive: 6 63% 46%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 78%;
  --input: 0 0% 91%;
  --ring: 159 52% 48%;
  --success: 159 52% 48%;
  --success-foreground: 154 51% 8%;
  --warning: 32 82% 51%;
  --warning-foreground: 0 0% 10%;
  --chart-1: 159 52% 48%;
  --chart-2: 346 59% 82%;
  --chart-3: 153 40% 26%;
  --chart-4: 0 0% 64%;
  --chart-5: 35 86% 56%;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --gradient-hero: linear-gradient(180deg, #3bbc8f 0%, #2fa07a 100%);
  --gradient-brand: linear-gradient(180deg, #ecb6c3 0%, #e0a3b2 100%);
  --gradient-subtle: linear-gradient(180deg, #f3f3f3 0%, #e6e6e6 100%);
  --duration: 150ms;
  --duration-slow: 280ms;
  --ease: cubic-bezier(0.0, 0.0, 0.2, 1);
  --tracking-tight: 0em;
  --tracking-normal: 0.04em;
  --font-weight-heading: 700;
  --font-weight-body: 400;
  --button-radius: 0rem;
  --card-radius: 0rem;
  --input-radius: 0rem;
  --badge-radius: 0rem;
  --border-width: 1px;
  --card-border-width: 1px;
  --input-border-width: 1px;
  --button-border-width: 1px;
  --badge-border-width: 1px;
  --heading-transform: uppercase;