Superdry Editorial Amber

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#F0F0F0"
    foreground: "#0D0D0D"
    card: "#FEDA9C"
    card-foreground: "#1A0F06"
    popover: "#FFFFFF"
    popover-foreground: "#0D0D0D"
    primary: "#D43A0F"
    primary-foreground: "#FFFFFF"
    secondary: "#E5E4E4"
    secondary-foreground: "#1A1A1A"
    muted: "#EDEDED"
    muted-foreground: "#554B4E"
    accent: "#F0BC42"
    accent-foreground: "#1A0F06"
    destructive: "#BA1A1A"
    destructive-foreground: "#FFFFFF"
    border: "#C9B890"
    input: "#FFFFFF"
    ring: "#D43A0F"
    success: "#2D6A4F"
    success-foreground: "#FFFFFF"
    warning: "#F0BC42"
    warning-foreground: "#1A0F06"
    chart-1: "#D43A0F"
    chart-2: "#F0BC42"
    chart-3: "#647CAC"
    chart-4: "#2D6A4F"
    chart-5: "#C9BE96"
  palette:
    - { name: "amber-sand", hex: "#feda9c", role: "surface" }
    - { name: "black-ink", hex: "#010101", role: "ink" }
    - { name: "light-gray", hex: "#f0f0f0", role: "surface" }
    - { name: "pale-gray", hex: "#ededed", role: "surface" }
    - { name: "white", hex: "#fefefe", role: "surface" }
    - { name: "border-gray", hex: "#e5e4e4", role: "border" }
    - { name: "orange-red", hex: "#d43a0f", role: "primary" }
    - { name: "deep-orange", hex: "#7b2108", role: "primary-dark" }
    - { name: "golden-amber", hex: "#f0bc42", role: "accent" }
    - { name: "light-amber", hex: "#fcdc9c", role: "accent-light" }
    - { name: "slate-blue", hex: "#647cac", role: "data-viz" }
    - { name: "dark-warmgray", hex: "#3f342d", role: "neutral-dark" }
    - { name: "warm-mist", hex: "#c9be96", role: "border" }
    - { name: "lavender-gray", hex: "#c8c6d2", role: "neutral-cool" }
    - { name: "charcoal-warm", hex: "#554b4e", role: "muted-foreground" }
    - { name: "forest-green", hex: "#2d6a4f", role: "success" }
    - { name: "mint-green", hex: "#52b788", role: "success-dark" }
typography:
  heading: { family: "Archivo Black", weights: [400] }

/* 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: 0.625rem;
  --font-heading: 'Archivo Black', sans-serif;
  --font-sans: 'Barlow', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --background: 0 0% 94%;
  --foreground: 0 0% 5%;
  --card: 38 98% 80%;
  --card-foreground: 27 63% 6%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 5%;
  --primary: 13 87% 45%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 2% 90%;
  --secondary-foreground: 0 0% 10%;
  --muted: 0 0% 93%;
  --muted-foreground: 342 6% 31%;
  --accent: 42 85% 60%;
  --accent-foreground: 27 63% 6%;
  --destructive: 0 75% 42%;
  --destructive-foreground: 0 0% 100%;
  --border: 42 35% 68%;
  --input: 0 0% 100%;
  --ring: 13 87% 45%;
  --success: 153 40% 30%;
  --success-foreground: 0 0% 100%;
  --warning: 42 85% 60%;
  --warning-foreground: 27 63% 6%;
  --chart-1: 13 87% 45%;
  --chart-2: 42 85% 60%;
  --chart-3: 220 30% 53%;
  --chart-4: 153 40% 30%;
  --chart-5: 47 32% 69%;
  --shadow-sm: 0 1px 2px rgba(10,8,0,0.06);
  --shadow-md: 0 2px 8px rgba(10,8,0,0.08);
  --shadow-lg: 0 4px 16px rgba(10,8,0,0.10);
  --shadow-xl: 0 8px 32px rgba(10,8,0,0.12);
  --gradient-hero: linear-gradient(135deg, #feda9c 0%, #f0bc42 100%);
  --gradient-brand: linear-gradient(135deg, #d43a0f 0%, #f0bc42 100%);
  --gradient-subtle: linear-gradient(180deg, #f0f0f0 0%, #fafafa 100%);
  --duration: 150ms;
  --duration-slow: 350ms;
  --ease: cubic-bezier(0.4,0,0.2,1);
  --tracking-tight: -0.02em;
  --tracking-normal: 0.02em;
  --font-weight-heading: 900;
  --font-weight-body: 400;
  --button-radius: 9999px;
  --card-radius: 0.375rem;
  --input-radius: 9999px;
  --badge-radius: 9999px;
  --border-width: 1px;
  --card-border-width: 1px;
  --input-border-width: 1px;
  --button-border-width: 0;
  --badge-border-width: 0;
  --heading-transform: uppercase;