version: "1.0"
name: "Renault Performance"

colors:
  background: "#FFFFFF"
  surface: "#FFFFFF"
  text-primary: "#000000"
  text-secondary: "#666666"
  border: "#000000"
  accent-1: "#FFED00"
  accent-2: "#111111"
  accent-3: "#F7F7F7"
  shadow: "none"

typography:
  headline-lg:
    family: "Space Grotesk"
    weight: 700
    size: "56px"
    line-height: "0.98"
    letter-spacing: "-0.02em"
  headline-sm:
    family: "Space Grotesk"
    weight: 700
    size: "24px"
    line-height: "1.0"
  body-md:
    family: "Inter"
    weight: 400
    size: "16px"
    line-height: "1.5"
  label-md:
    family: "Space Grotesk"
    weight: 700
    size: "12px"
    text-transform: "uppercase"
    letter-spacing: "0.04em"

rounded:
  sm: "2px"
  md: "4px"
  lg: "4px"

spacing:
  xs: "8px"
  sm: "16px"
  md: "24px"
  lg: "40px"

border-width:
  sm: "1px"
  md: "1px"
  lg: "2px"

components:
  button-primary:
    background: "#FFED00"
    color: "#000000"
    border: "none"
    border-radius: "2px"
    box-shadow: "none"
    padding: "14px 24px"
    text-transform: "uppercase"
    hover:
      background: "#E6D200"

  card-surface:
    background: "#FFFFFF"
    border: "1px solid #000000"
    border-radius: "0px"
    box-shadow: "none"
    padding: "24px"

rationale:
  - Use yellow only as a high-attention signal.
  - Keep modules squared-off, precise, and photography-forward.
  - Let contrast and hierarchy feel engineered rather than decorative.