update stories to impliment badge

docs/stories/story-12.2-core-css-theme-update.md

@@ -37,6 +37,18 @@
 | `--color-accent` | `#A5C87A` | Secondary light olive |
 | `--color-accent-light` | `#C5D9A5` | Pale olive for subtle backgrounds |
 
+### AC2.1: Logo Badge Styling
+
+**Given** the logo has a beige background that contrasts with olive green headers/footers
+**When** I add the logo badge styling
+**Then** the following CSS class is defined:
+
+| Class | Properties |
+|-------|------------|
+| `.logo-badge` | `border: 2px solid #1A1A1A; box-shadow: 4px 4px 6px rgba(26, 26, 26, 0.5);` |
+
+This creates a "seal/stamp" effect for the logo on olive green backgrounds, making the beige background look intentional rather than mismatched.
+
 ### AC3: Maintain Backward Compatibility Aliases
 
 **Given** existing components may use old color names
@@ -134,6 +146,16 @@ Use WebAIM Contrast Checker to verify:
 
 **Note:** If Off-White on Olive Green doesn't meet 4.5:1, use Deep Black text on olive backgrounds instead.
 
+### Logo Badge Styling
+
+```css
+/* Badge styling for logo on olive backgrounds */
+.logo-badge {
+  border: 2px solid var(--color-text);
+  box-shadow: 4px 4px 6px rgba(26, 26, 26, 0.5);
+}
+```
+
 ### CSS Theme Block Example
 
 ```css
@@ -170,6 +192,7 @@ Use WebAIM Contrast Checker to verify:
 
 - [ ] Update `@theme` block with new olive green values
 - [ ] Add olive green variants (hover, dark, light)
+- [ ] Add `.logo-badge` class with border and shadow
 - [ ] Update backward-compatible aliases
 - [ ] Update `.btn-primary` styles
 - [ ] Update `.btn-secondary` styles