/* ========================================================================== Quinsai Health — Design System Tokens (v1.0) 10x Team Design System · 2026-06-21 Import in after the Google Fonts . Pairs with tailwind-extend.js. ========================================================================== */ :root { /* --- Brand colours --- */ --color-primary: #0E5F6B; --color-primary-light: #4C9AA3; --color-primary-dark: #0B4D57; --color-secondary: #1F4D52; --color-accent: #B45309; /* CTA */ --color-accent-dark: #92400E; /* CTA hover */ --color-accent-light: #F59E0B; --color-accent-tint: #FBF1E3; /* --- Primary scale --- */ --primary-50:#E6F2F3; --primary-100:#CCE5E7; --primary-200:#99CBCF; --primary-300:#66B0B7; --primary-400:#2E8C97; --primary-500:#0E7C87; --primary-600:#0E5F6B; --primary-700:#0B4D57; --primary-800:#093C44; --primary-900:#062B31; /* --- Neutrals (warm) --- */ --color-white: #FFFFFF; --color-background: #FBFAF7; --color-surface: #FFFFFF; --color-surface-cream:#F2F0EA; --color-border: #E6E2D9; --color-text: #16302F; --color-text-secondary:#3F5557; --color-text-muted: #5E6F70; --neutral-50:#FAF9F6; --neutral-100:#F2F0EA; --neutral-200:#E6E2D9; --neutral-300:#D2CCBF; --neutral-400:#ABA597; --neutral-500:#837C6E; --neutral-600:#635C50; --neutral-700:#4A453C; --neutral-800:#322F29; --neutral-900:#1F1D19; --neutral-950:#121110; /* --- Semantic --- */ --color-success:#15803D; --color-warning:#CA8A04; --color-error:#B91C1C; --color-info:#0E7490; /* --- Typography --- */ --font-heading: 'Fraunces', 'Source Serif 4', Georgia, serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; --text-xs:.8125rem; --text-sm:.9375rem; --text-base:1.0625rem; --text-lg:1.1875rem; --text-xl:clamp(1.25rem,2vw,1.5rem); --text-2xl:clamp(1.5rem,3vw,2rem); --text-3xl:clamp(1.875rem,4vw,2.625rem); --text-4xl:clamp(2.25rem,5vw,3.375rem); --text-5xl:clamp(2.75rem,6vw,4.25rem); --leading-display:1.08; --leading-tight:1.18; --leading-normal:1.6; --leading-lead:1.55; --tracking-display:-0.025em; --tracking-tight:-0.015em; --tracking-label:0.08em; /* --- Spacing (4px base / 8pt grid) --- */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px; --space-32:128px; /* --- Containers --- */ --container:1200px; --container-wide:1440px; --content-width:720px; --gutter:16px; /* --- Radius (calm, not bubbly) --- */ --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px; --radius-full:9999px; /* --- Shadows (soft, warm-tinted) --- */ --shadow-sm: 0 1px 2px rgba(31,29,25,.05); --shadow-md: 0 2px 4px rgba(31,29,25,.05), 0 4px 12px rgba(31,29,25,.06); --shadow-lg: 0 8px 24px rgba(31,29,25,.10); --shadow-xl: 0 16px 48px rgba(31,29,25,.14); /* --- Transitions --- */ --transition-fast:150ms ease; --transition-base:250ms ease; --transition-slow:350ms ease; } @media (min-width:768px){ :root{ --gutter:24px; } } @media (min-width:1024px){ :root{ --gutter:32px; } } /* --- Base element defaults (optional; Tailwind utilities can override) --- */ body{ font-family:var(--font-body); font-size:var(--text-base); line-height:var(--leading-normal); color:var(--color-text); background:var(--color-background); -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ font-family:var(--font-heading); line-height:var(--leading-tight); letter-spacing:var(--tracking-tight); color:var(--color-text); } h1{ font-size:var(--text-4xl); } h2{ font-size:var(--text-3xl); } h3{ font-size:var(--text-2xl); } h4{ font-size:var(--text-xl); } .hero-title{ font-size:var(--text-5xl); line-height:var(--leading-display); letter-spacing:var(--tracking-display); } a{ color:var(--color-primary); } .text-muted{ color:var(--color-text-muted); } /* --- CTA button --- */ .btn-cta{ display:inline-flex; align-items:center; gap:.5rem; background:var(--color-accent); color:#fff; font-weight:600; padding:var(--space-4) var(--space-8); border-radius:var(--radius-md); box-shadow:var(--shadow-md); transition:transform var(--transition-base), background var(--transition-base); } .btn-cta:hover{ background:var(--color-accent-dark); transform:translateY(-2px); } .btn-secondary{ display:inline-flex; align-items:center; gap:.5rem; background:transparent; color:var(--color-primary); font-weight:600; padding:var(--space-4) var(--space-8); border:1.5px solid var(--color-primary); border-radius:var(--radius-md); transition:background var(--transition-base); } .btn-secondary:hover{ background:var(--primary-50); } /* --- Card --- */ .card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); transition:transform var(--transition-base), box-shadow var(--transition-base); } .card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); } /* --- Stat callout --- */ .stat-number{ font-family:var(--font-heading); font-weight:700; font-size:var(--text-4xl); color:var(--color-primary); line-height:1; } .stat-label{ font-size:var(--text-sm); color:var(--color-text-muted); } /* --- Scroll reveal --- */ .animate-on-scroll{ opacity:0; transform:translateY(20px); transition:opacity .5s ease, transform .5s ease; } .animate-on-scroll.visible{ opacity:1; transform:translateY(0); } @media (prefers-reduced-motion:reduce){ .animate-on-scroll{ opacity:1; transform:none; transition:none; } .btn-cta:hover,.card:hover{ transform:none; } }