Initialize client project from skeleton

Client: Sport
Generated: 2026-01-29T15:31:44.504Z

theme/stylesheet.css

@@ -1,53 +1,70 @@
-/*
- * Stylesheet
- *
- * Project-specific styles go here.
- * This file is imported by globals.css.
- *
- * Structure:
- * 1. Component Styles
- * 2. Layout Styles
- * 3. Page-specific Styles
- * 4. Utility Classes
- * 5. Animations
- */
+/* ═══════════════════════════════════════════════════════════ */
+/*  stylesheet.css – Structural framework                    */
+/*  Uses variables from globals.css (Single Source of Truth)  */
+/*  Generated by website-prototype-generator                 */
+/* ═══════════════════════════════════════════════════════════ */
 
-/* ==========================================================================
-   1. Component Styles
-   ========================================================================== */
+@import "tailwindcss";
 
-/* Components are added per project */
+/* ── Base Resets ───────────────────────────────────── */
 
-/* ==========================================================================
-   2. Layout Styles
-   ========================================================================== */
-
-/* Layout styles are added per project */
-
-/* ==========================================================================
-   3. Page-specific Styles
-   ========================================================================== */
-
-/* Page styles are added per project */
-
-/* ==========================================================================
-   4. Utility Classes
-   ========================================================================== */
-
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
   padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
 }
 
-/* ==========================================================================
-   5. Animations
-   ========================================================================== */
+html {
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 
-/* Animations are added per project */
+body {
+  font-family: var(--font-body);
+  font-weight: var(--font-body-weight);
+  color: var(--color-foreground);
+  background-color: var(--color-background);
+  line-height: var(--text-base-line-height);
+  font-size: var(--text-base);
+}
+
+/* ── Headings ─────────────────────────────────────── */
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-heading);
+  font-weight: var(--font-heading-weight);
+}
+
+/* ── Links ───────────────────────────────────────── */
+
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+/* ── Images ──────────────────────────────────────── */
+
+img, video, svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+/* ── Focus ───────────────────────────────────────── */
+
+:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* ── Selection ──────────────────────────────────── */
+
+::selection {
+  background-color: var(--color-primary);
+  color: var(--color-background);
+}