123 lines
3.8 KiB
CSS
123 lines
3.8 KiB
CSS
/* ═══════════════════════════════════════════════════════════ */
|
||
/* 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> */
|
||
|
||
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;
|
||
}
|
||
}
|