Edit Klarna tokens

{
  "color": {
    "background": {
      "primary": {
        "$value": "#3d2656",
        "$type": "color",
        "$description": "Main page background, hero section deep purple"
      },
      "secondary": {
        "$value": "#2d1e42",
        "$type": "color",
        "$description": "Darker variant for depth and contrast"
      }
    },
    "surface": {
      "primary": {
        "$value": "#ffffff",
        "$type": "color",
        "$description": "Card surfaces, phone UI, light backgrounds"
      }
    },
    "text": {
      "primary": {
        "$value": "#ffffff",
        "$type": "color",
        "$description": "Main headings and primary text on dark backgrounds"
      },
      "secondary": {
        "$value": "rgba(255, 255, 255, 0.85)",
        "$type": "color",
        "$description": "Body text and descriptions on dark backgrounds"
      },
      "tertiary": {
        "$value": "rgba(255, 255, 255, 0.6)",
        "$type": "color",
        "$description": "Muted text, labels, and subtle content"
      },
      "inverse": {
        "$value": "#1a1a1a",
        "$type": "color",
        "$description": "Text on light backgrounds and surfaces"
      }
    },
    "brand": {
      "pink": {
        "$value": "#ffb3d9",
        "$type": "color",
        "$description": "Primary brand color, CTA buttons, Klarna branding"
      },
      "pink-hover": {
        "$value": "#ff99cc",
        "$type": "color",
        "$description": "Hover state for pink brand elements"
      }
    },
    "neutral": {
      "100": {
        "$value": "#f5f5f5",
        "$type": "color",
        "$description": "Light backgrounds, secondary elements"
      },
      "200": {
        "$value": "#e8e8e8",
        "$type": "color",
        "$description": "Borders, dividers, secondary buttons"
      },
      "900": {
        "$value": "#1a1a1a",
        "$type": "color",
        "$description": "Dark button backgrounds, inverse text"
      }
    },
    "link": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Navigation and inline link color"
    }
  },
  "font": {
    "family": {
      "primary": {
        "$value": "\"Klarna Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
        "$type": "fontFamily",
        "$description": "Primary font stack for all text"
      },
      "mono": {
        "$value": "\"SF Mono\", \"Roboto Mono\", monospace",
        "$type": "fontFamily",
        "$description": "Monospace font for code and technical content"
      }
    },
    "size": {
      "display-xl": {
        "$value": "80px",
        "$type": "dimension",
        "$description": "Extra large display size for hero headlines"
      },
      "display-lg": {
        "$value": "64px",
        "$type": "dimension",
        "$description": "Large display size for section headlines"
      },
      "heading-1": {
        "$value": "48px",
        "$type": "dimension",
        "$description": "Page title size"
      },
      "heading-2": {
        "$value": "36px",
        "$type": "dimension",
        "$description": "Section heading size"
      },
      "heading-3": {
        "$value": "24px",
        "$type": "dimension",
        "$description": "Subsection heading size"
      },
      "body-lg": {
        "$value": "20px",
        "$type": "dimension",
        "$description": "Large body text and subtitles"
      },
      "body-base": {
        "$value": "16px",
        "$type": "dimension",
        "$description": "Default body text size"
      },
      "body-sm": {
        "$value": "14px",
        "$type": "dimension",
        "$description": "Small text and captions"
      },
      "stat-number": {
        "$value": "72px",
        "$type": "dimension",
        "$description": "Large statistics and numbers"
      },
      "stat-label": {
        "$value": "18px",
        "$type": "dimension",
        "$description": "Stat descriptions and labels"
      }
    },
    "lineHeight": {
      "display-xl": {
        "$value": "88px",
        "$type": "dimension",
        "$description": "Line height for display-xl"
      },
      "display-lg": {
        "$value": "72px",
        "$type": "dimension",
        "$description": "Line height for display-lg"
      },
      "heading-1": {
        "$value": "56px",
        "$type": "dimension",
        "$description": "Line height for heading-1"
      },
      "heading-2": {
        "$value": "44px",
        "$type": "dimension",
        "$description": "Line height for heading-2"
      },
      "heading-3": {
        "$value": "32px",
        "$type": "dimension",
        "$description": "Line height for heading-3"
      },
      "body-lg": {
        "$value": "32px",
        "$type": "dimension",
        "$description": "Line height for body-lg"
      },
      "body-base": {
        "$value": "24px",
        "$type": "dimension",
        "$description": "Line height for body-base"
      },
      "body-sm": {
        "$value": "20px",
        "$type": "dimension",
        "$description": "Line height for body-sm"
      },
      "stat-number": {
        "$value": "80px",
        "$type": "dimension",
        "$description": "Line height for stat-number"
      },
      "stat-label": {
        "$value": "24px",
        "$type": "dimension",
        "$description": "Line height for stat-label"
      }
    },
    "weight": {
      "regular": {
        "$value": "400",
        "$type": "fontWeight",
        "$description": "Regular font weight for body text"
      },
      "medium": {
        "$value": "500",
        "$type": "fontWeight",
        "$description": "Medium weight for emphasis"
      },
      "semibold": {
        "$value": "600",
        "$type": "fontWeight",
        "$description": "Semibold for subheadings"
      },
      "bold": {
        "$value": "700",
        "$type": "fontWeight",
        "$description": "Bold for headings and emphasis"
      }
    }
  },
  "spacing": {
    "2": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Tight spacing for icon gaps"
    },
    "3": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Small gaps between elements"
    },
    "4": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Button padding vertical, standard gaps"
    },
    "5": {
      "$value": "20px",
      "$type": "dimension",
      "$description": "Medium spacing between components"
    },
    "6": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Large gaps between elements"
    },
    "8": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "Section spacing, stat groups"
    },
    "10": {
      "$value": "40px",
      "$type": "dimension",
      "$description": "Large section padding"
    },
    "12": {
      "$value": "48px",
      "$type": "dimension",
      "$description": "Extra large spacing"
    },
    "16": {
      "$value": "64px",
      "$type": "dimension",
      "$description": "Hero section padding"
    },
    "20": {
      "$value": "80px",
      "$type": "dimension",
      "$description": "Page section padding"
    },
    "24": {
      "$value": "96px",
      "$type": "dimension",
      "$description": "Major section dividers"
    }
  },
  "radius": {
    "sm": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Small elements and tags"
    },
    "md": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Cards and input fields"
    },
    "lg": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Large cards"
    },
    "xl": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Prominent card elements"
    },
    "2xl": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Phone screens and modals"
    },
    "full": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Fully rounded pills and buttons"
    }
  },
  "shadow": {
    "sm": {
      "$value": "0 1px 2px rgba(0, 0, 0, 0.05)",
      "$type": "shadow",
      "$description": "Subtle elevation for small elements"
    },
    "md": {
      "$value": "0 4px 6px rgba(0, 0, 0, 0.1)",
      "$type": "shadow",
      "$description": "Cards and dropdown shadows"
    },
    "lg": {
      "$value": "0 10px 15px rgba(0, 0, 0, 0.15)",
      "$type": "shadow",
      "$description": "Modal and popover shadows"
    },
    "xl": {
      "$value": "0 20px 25px rgba(0, 0, 0, 0.15)",
      "$type": "shadow",
      "$description": "Hero elements and phone mockup"
    }
  },
  "border": {
    "width": {
      "default": {
        "$value": "1px",
        "$type": "dimension",
        "$description": "Default border width"
      },
      "thick": {
        "$value": "2px",
        "$type": "dimension",
        "$description": "Emphasis and active states"
      }
    },
    "color": {
      "dark": {
        "$value": "rgba(255, 255, 255, 0.1)",
        "$type": "color",
        "$description": "Borders on dark backgrounds"
      },
      "light": {
        "$value": "#e8e8e8",
        "$type": "color",
        "$description": "Borders on light backgrounds"
      }
    }
  }
}