/* ═══════════════════════════════════════════════════════════ */ /* stylesheet.css – Structural framework */ /* Uses variables from globals.css (Single Source of Truth) */ /* Generated by website-prototype-generator */ /* ═══════════════════════════════════════════════════════════ */ @import "tailwindcss"; /* ── Tailwind v4 Theme ───────────────────────────────── */ @theme { /* Colors */ --color-primary: #000000; --color-secondary: #FFFFFF; --color-accent: #d6d6d6; --color-neutral: #F5F5F5; --color-background: #FFFFFF; --color-foreground: #000000; --color-muted: #B0B0B0; --color-muted-foreground: #ffffff; --color-border: #E0E0E0; --color-success: #4CAF50; --color-warning: #FF9800; --color-error: #F44336; /* Fonts */ --font-heading: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; /* Typography Scale – override Tailwind defaults to match design tokens */ --text-xl: 1.5rem; --text-xl--line-height: 2rem; --text-2xl: 1.75rem; --text-2xl--line-height: 2.25rem; --text-3xl: 2rem; --text-3xl--line-height: 2.5rem; --text-4xl: 2.5rem; --text-4xl--line-height: 2.75rem; --text-5xl: 3rem; --text-5xl--line-height: 1.1; --text-6xl: 3.75rem; --text-6xl--line-height: 1.1; } /* ── Font Override (connect next/font to CSS vars) ──── */ /* --font-inter is injected by next/font/google on */ html { --font-heading: var(--font-inter, 'Inter', sans-serif); --font-body: var(--font-inter, 'Inter', sans-serif); } /* ── Base Resets ───────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } 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: inherit; text-decoration: none; } /* ── 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); } /* ── Reduced Motion ─────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }