fix(#3397): use existing design tokens in Astro docs

[bdfranck]

Before (the change)

The Astro layouts and components for our v2 Docs used custom design tokens that overwrote some existing ones.

After (the change)

The Astro layouts and components for our v2 Docs uses existing design tokens.

Make sure that you've checked the boxes below before you submit the PR

• I have read and followed the setup steps
• I have created necessary unit tests
• I have tested the functionality in both React and Angular.

Steps needed to test

[netlify]

✅ Deploy Preview for goa-design-2 ready!

Name	Link
🔨 Latest commit	9ffaf97
🔍 Latest deploy log	https://app.netlify.com/projects/goa-design-2/deploys/69af46efb7b99d0008f11c9a
😎 Deploy Preview	https://deploy-preview-3515--goa-design-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Copilot]

Pull request overview

Updates the v2 docs’ Astro base layout to stop redefining GoA design-token CSS variables inline and instead rely on the shared design token styles already imported into the layout.

Changes:

• Removed the custom :root design token overrides from BaseLayout.astro.
• Switched global base styles (body/headings/links/focus) to reference existing GoA design tokens.

[twjeffery]

Looks good @bdfranck . A few things I noticed that we should address:

1. Other files still use the removed custom properties

Most of the removed :root properties were duplicates of real V2 tokens (--goa-color-text-secondary, --goa-space-*, etc.) so those will keep working fine. But a few were not real V2 tokens, and other files still reference them:

• ExampleCard.astro uses --goa-color-border, --goa-color-background-light, --goa-color-brand, --goa-radius-s/m
• ComponentSandbox.tsx uses --goa-color-border, --goa-color-brand, --goa-radius-m (these have inline fallbacks so they won't break visually, but still worth migrating)
• GuidanceGrid.astro uses --goa-color-background-light, --goa-radius-m

We should either keep those properties in :root for now, or update those files too. We can create a separate issue for migrating them if we want to keep this PR focused.

2. Inline code loses its background

code background went from --goa-color-background-light (#f5f5f5, light grey) to --goa-color-greyscale-white (#fff). Since the page background is also white, inline code blocks won't have any visual distinction. Maybe something like --goa-color-greyscale-100 to keep the contrast?

3. Mobile header hardcoded values

font-size: 18px, margin-left: -8px, background: white. Since we're already in this file, these should move to tokens too.

[bdfranck]

@twjeffery I've amended my commit with changes that address you above three comments.

[vanessatran-ddi]

I have some comments about using a token instead of hard-code values

[twjeffery]

@bdfranck Looks good, thanks for migrating the other files too. All the token names check out.

[bdfranck]

@vanessatran-ddi I've replaced the instances you mentioned and did a find and replace of similar ones.