🎨 Palette: Add global focus-visible styles

[alvin000009238]

💡 What: Added global :focus-visible outline styles for interactive elements in base.css.
🎯 Why: Improves keyboard accessibility by ensuring interactive elements have a clear focus indicator, making it easier for keyboard users to navigate the app.
📸 Before/After: Interactive elements like buttons and links now show a prominent primary-colored outline when focused via keyboard.
♿ Accessibility: Addresses WCAG 2.4.7 Focus Visible criteria, ensuring all interactive elements have a visible focus indicator.

---

PR created automatically by Jules for task 7477388226419049651 started by @alvin000009238

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[gemini-code-assist]

Code Review

This pull request introduces global :focus-visible styles to frontend/styles/base.css to improve accessibility. The feedback suggests using the existing --color-focus-ring design token instead of --color-primary to maintain consistency across the application and warns about potential clipping issues with outline-offset in certain containers.

[gemini-code-assist]

The design system already defines a --color-focus-ring token in tokens.css (lines 86 and 139). To maintain consistency and ensure that focus styles are managed through established design tokens, consider using var(--color-focus-ring) instead of var(--color-primary). If the current value of --color-focus-ring is too subtle, it should be updated in the tokens file to match the desired prominence. Additionally, be aware that a positive outline-offset can cause the focus indicator to be clipped in containers with overflow: hidden; ensure that parent containers have sufficient padding or consider a smaller offset for the global default.

Suggested change

	:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
	}
	:focus-visible {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 2px;
	}

[Copilot]

Pull request overview

Adds a global :focus-visible outline style to improve keyboard focus visibility across the frontend theme (“Palette”), aiming to better meet WCAG 2.4.7 (Focus Visible).

Changes:

• Introduced a global :focus-visible rule in base.css using the primary color outline + offset.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Because base.css is imported near the top of frontend/style.css (before modal.css, dashboard.css, etc.), later component styles can override this global :focus-visible rule. For example, frontend/styles/modal.css sets .tooltip-icon { outline: none; }, which will prevent this focus indicator from appearing unless this rule comes later in the cascade or has higher specificity. Consider moving the global focus-visible rule to a later-imported stylesheet (e.g., utilities.css) or adjusting the selector/specificity so it reliably applies app-wide.

Suggested change

	:focus-visible {
	:root :focus-visible {

[Copilot]

Formatting in this new block doesn’t match the existing style in base.css, which uses blank lines between selectors and between declarations. Aligning the spacing/indentation here will keep the stylesheet consistent and easier to scan.

Suggested change

	:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
	:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;