/* ============================================
* Design Tokens - Pottery E-Commerce
* Authoritative values from Design Agent output
* ============================================ */
/*
* Born - Self-hosted serif for headings
*
* TODO: Convert Born.otf to WOFF2 for production.
* Use fonttools or an online converter, then update
* the src path to Born.woff2 with format('woff2').
* The OTF declaration below is for development only.
*/
@font-face {
font-family: 'Born';
src: url('/Assets/fonts/Born/Born.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/*
* DM Sans - Body text, UI, form inputs
* Weights: 400 (body), 500 (medium/labels), 600 (semibold), 700 (bold)
*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400;1,9..40,500&display=swap');
/*
* Font Loading Strategy Reference
* --------------------------------
* Born (self-hosted):
* - Preload WOFF2 in :
*
* - font-display: swap (declared above)
* - Currently using OTF for development; convert to WOFF2 for production
*
* DM Sans (Google Fonts):
* - Preconnect in :
*
*
* - Loaded via @import above (or via stylesheet in HTML for better performance)
* - font-display: swap (included in Google Fonts URL parameter)
*/
:root {
/* --- Colour Tokens --- */
/* Primary - Terracotta */
--color-primary: #B86E4A;
--color-primary-dark: #935838;
--color-primary-light: #D4956F;
/* Secondary - Sage */
--color-secondary: #7A8F72;
--color-secondary-dark: #546B47;
--color-accent: #A8B8A0;
/* Text */
--color-text: #2D2A26;
--color-text-muted: #746A62;
/* Surfaces */
--color-background: #F5EDE3;
--color-surface: #FDFBF8;
/* Borders */
--color-border: #D9D0C7;
--color-border-strong: #8E8478;
/* Functional */
--color-error: #B83A3A;
--color-error-dark: #943030;
--color-success: #3D6B4A;
/* Text on images */
--color-text-on-image: #F5EDE3;
/* Overlays */
--color-overlay: rgba(45, 42, 38, 0.4);
--color-sold-overlay: rgba(45, 42, 38, 0.55);
--color-backdrop-strong: rgba(45, 42, 38, 0.94);
/* --- Shadow Tokens --- */
--shadow-sm: 0 1px 3px rgba(45, 42, 38, 0.08);
--shadow-md: 0 4px 12px rgba(45, 42, 38, 0.1);
--shadow-lg: 0 8px 24px rgba(45, 42, 38, 0.12);
--shadow-xl: 0 16px 48px rgba(45, 42, 38, 0.16);
/* --- Border Radius Tokens --- */
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 6px;
--radius-full: 9999px;
/* --- Spacing Tokens --- */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--space-32: 8rem;
/* --- Z-Index Tokens --- */
--z-base: 0;
--z-dropdown: 10;
--z-sticky: 20;
--z-overlay: 40;
--z-modal: 100;
--z-toast: 1000;
--z-lightbox: 1100;
/* --- Typography Tokens --- */
/* Font families */
--font-heading: 'Born', 'Cormorant', Georgia, serif;
--font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
/* Font sizes - responsive scale */
--font-size-hero: clamp(3rem, 5vw, 4.5rem);
--font-size-h1: clamp(2.25rem, 4vw, 3.5rem);
--font-size-h2: clamp(1.75rem, 3vw, 2.5rem);
--font-size-h3: clamp(1.25rem, 2vw, 1.75rem);
--font-size-body-lg: 1.125rem;
--font-size-body: 1rem;
--font-size-small: 0.875rem;
--font-size-xs: 0.75rem;
/* Line heights */
--leading-tight: 1.1;
--leading-heading: 1.2;
--leading-body: 1.6;
--leading-small: 1.4;
/* Letter spacing */
--tracking-tight: -0.02em;
--tracking-normal: 0em;
--tracking-wide: 0.05em;
--tracking-wider: 0.1em;
/* Font weights */
--weight-normal: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/* --- Animation Tokens --- */
/* Durations */
--duration-fast: 150ms;
--duration-base: 300ms;
--duration-slow: 600ms;
--duration-image: 400ms;
/* Easings */
--easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--easing-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--easing-out: cubic-bezier(0.0, 0.0, 0.2, 1);
--easing-in: cubic-bezier(0.4, 0.0, 1, 1);
--easing-ease: ease;
/* Parallax */
--parallax-ratio: 0.15;
/* --- Container --- */
--container-max: 1200px;
--container-padding: var(--space-6);
}