Redesign: Scandi Warm Forest visual theme

[Copilot]

Full visual redesign of the Soc Ops Social Bingo app using a Scandinavian hygge-inspired aesthetic — warm birch cream backgrounds, deep forest green accents, Lora serif headings, and earthy terracotta/parchment tones throughout.

CSS (app.css + index.html)

• Added :root palette with 13 semantic CSS variables (--color-bg, --color-accent, --color-marked-*, --color-winning-*, etc.)
• Loaded Lora (400/700) and Source Sans 3 (300/400/600) via Google Fonts; set as default body font at weight 300
• 30+ new utility classes: bg-linen (with subtle diagonal grain texture), bg-surface, bg-sage, semantic text-*/border-* variants, font-heading, rounded-2xl, shadow-md
• Added fadeSlideUp and fadeIn keyframe animations with .delay-1/2/3 stagger helpers

Components

• StartScreen — Staggered fadeSlideUp entrance, Lora h1, parchment instruction card with border-calm + shadow-md, sage green CTA
• GameScreen — bg-linen full-screen layout, bg-surface header with border-calm, pine-wash bingo banner with ✦ marker replacing emoji
• BingoBoard — gap-1 → gap-2
• BingoSquare — All state classes migrated to semantic tokens; free space uses font-heading; checkmark text-green-600 → text-sage
• BingoModal — Parchment card, Lora heading, animate-fade-in replaces bounce, rounded-2xl throughout

// BingoSquare.GetCssClasses() — before vs after
// before: "bg-amber-200 border-amber-400 text-amber-900"
// after:  "bg-winning-calm border-winning text-winning"

Original prompt

Redesign: Scandinavian Calm — Variation 2: Scandi Warm Forest

Perform a full visual redesign of the Soc Ops Social Bingo app using a Scandi Warm Forest aesthetic. This is the warmest, richest interpretation: inspired by Norwegian cabin hygge, birch forest floors, and hand-thrown ceramic mugs. Deep forest greens, warm birch wood tones, and terracotta details. Think of a cosy cabin in Telemark with candlelight and timber walls.

---

Design Direction

Feeling: Hygge warmth. Rich but never garish. Earthy, grounded, human. The board feels like carved wood tiles.

Palette (CSS variables — define in :root in app.css):

--color-bg: #EDE8DF           // warm birch cream
--color-surface: #F7F3EC      // soft parchment
--color-border: #D4C9B7       // warm tan border
--color-text: #2C2016         // deep warm brown-black
--color-text-muted: #7A6B56   // warm mid-brown
--color-accent: #3E6B4E       // deep forest green
--color-accent-hover: #325840
--color-marked-bg: #CFDFD3    // soft pine wash
--color-marked-border: #7DAF8A
--color-marked-text: #254D34
--color-winning-bg: #F0E2CA   // warm birch gold
--color-winning-border: #C8996A
--color-winning-text: #7A3E12

Typography:

• Heading font: Lora (serif, weights 400 and 700) — warmth and craftsmanship
• Body font: Source Sans 3 (weight 300 and 400) — readable, friendly
• Load both via Google Fonts
• h1, h2, headings: Lora
• Body, button text, square labels: Source Sans 3
• No letter-spacing on body; headings use modest letter-spacing: 0.04em
• Buttons use Source Sans 3, weight 600, comfortable letter-spacing: 0.06em

Key style principles:

• Visible warmth: borders are visible but friendly, not hairline
• Cards have a gentle box-shadow: 0 2px 8px rgba(44, 32, 22, 0.08) for depth
• Rounded corners lean rounder: border-radius: 1rem (rounded-2xl) for cards, border-radius: 0.75rem for squares
• A subtle CSS noise/grain on the background is welcome: use a CSS background-image: url("data:image/svg+xml,...") noise pattern in .bg-linen to add texture without images (or a subtle repeating linear-gradient diagonal pattern that evokes grain)
• Mark checkmark should feel like a stamp: thicker ✓ or ✔

---

Files to change

1. SocOps/wwwroot/index.html

• Add Google Fonts link before app.css:

  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;700&family=Source+Sans+3:wght@300;400;600&display=swap" rel="stylesheet" />

• Update theme-color meta to #3E6B4E

2. SocOps/wwwroot/css/app.css

• Change body:

  body {
      font-family: 'Source Sans 3', sans-serif;
      font-weight: 300;
      -webkit-tap-highlight-color: transparent;
  }

• Add all CSS custom properties to :root
• Add semantic utility classes (do NOT remove existing ones):
  • .bg-linen → background-color: var(--color-bg) with optional subtle grain texture via background-image
  • .bg-surface → background-color: var(--color-surface)
  • .bg-sage → background-color: var(--color-accent)
  • .bg-marked-calm → background-color: var(--color-marked-bg)
  • .bg-winning-calm → background-color: var(--color-winning-bg)
  • .text-primary → color: var(--color-text)
  • .text-muted → color: var(--color-text-muted)
  • .text-sage → color: var(--color-accent)
  • .text-marked → color: var(--color-marked-text)
  • .text-winning → color: var(--color-winning-text)
  • .border-calm → border-color: var(--color-border)
  • .border-marked-calm → border-color: var(--color-marked-border)
  • .border-winning → border-color: var(--color-winning-border)
  • .rounded-2xl → border-radius: 1rem
  • .gap-2 → gap: 0.5rem
  • .tracking-widest → letter-spacing: 0.15em
  • .tracking-wide → letter-spacing: 0.06em
  • .font-light → font-weight: 300
  • .font-heading → font-family: 'Lora', serif
  • .max-w-lg → max-width: 32rem
  • .text-2xl → font-size: 1.5rem; line-height: 2rem
  • .text-base → font-size: 1rem; line-height: 1.5rem
  • .mt-2 through .mt-8 → margin-top equivalents
  • .py-6 → padding-top: 1.5rem; padding-bottom: 1.5rem
  • .uppercase → text-transform: uppercase
  • .shadow-md → box-shadow: 0 2px 8px rgba(44, 32, 22, 0.08)
• Add animations:

  @keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-slide-up { animation: fadeSlideUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .delay-1 { animation-delay: 0.1s; }
  .delay-2 { animation-delay: 0.22s; }
  .delay-3 { animation-delay: 0.36s; }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: scale(0.96) translateY(6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
  }
  .animate-fade-in { anim...

---

📍 Connect Copilot coding agent with Jira, Azure Boards or Linear to delegate work to Copilot in one click without leaving your project management tool.