version: "1.0"
name: "Y2K Gloss"

colors:
  background: "#E8ECFF → #FCE7FF"
  surface: "rgba(255,255,255,0.86)"
  text-primary: "#241B4B"
  text-secondary: "#6B63A8"
  border: "rgba(124,92,255,0.24)"
  accent-1: "#7C5CFF"
  accent-2: "#FF7BD5"
  accent-3: "#8CE7FF"
  shadow: "rgba(124,92,255,0.18)"

typography:
  headline-lg:
    family: "Space Grotesk"
    weight: 700
    size: "48px"
    line-height: "1.08"
    letter-spacing: "-0.03em"
  headline-sm:
    family: "Space Grotesk"
    weight: 700
    size: "24px"
    line-height: "1.25"
  body-md:
    family: "Inter"
    weight: 400
    size: "16px"
    line-height: "1.6"
  label-md:
    family: "Inter"
    weight: 600
    size: "13px"
    text-transform: "uppercase"
    letter-spacing: "0.05em"

rounded:
  sm: "16px"
  md: "24px"
  lg: "32px"

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

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

components:
  button-primary:
    background: "linear-gradient(135deg, #A78BFA 0%, #7C5CFF 100%)"
    color: "#FFFFFF"
    border: "1px solid rgba(255,255,255,0.55)"
    border-radius: "999px"
    box-shadow: "0 10px 24px rgba(124,92,255,0.24)"
    padding: "12px 22px"

  gloss-card:
    background: "rgba(255,255,255,0.86)"
    border: "1px solid rgba(124,92,255,0.24)"
    border-radius: "24px"
    box-shadow: "0 18px 40px rgba(124,92,255,0.18)"
    padding: "24px"

rationale:
  - Lean into shine, translucency, and toy-like optimism without making the layout feel childish.
  - Use gradients and glow on accents, then keep information modules calm and legible.