/* ================================================================ Sergio Decoration — Design Tokens v33 Generated from brand-guidelines.md + design-system.md Three layers: Primitive → Semantic → Component v33: Cormorant Garamond display · Plus Jakarta Sans body Background warmed to #FAFAF7 for editorial cream feel ================================================================ */ :root { /* ============================================================ LAYER 1 — PRIMITIVES (raw values, never used by components) ============================================================ */ /* v50: REVERTED to LIGHT COOL-GREY palette (v37 baseline) — derived from cool minimalist apartment reference. Polished concrete floor, light grey walls, black architectural accents, cool tonal range. */ --gray-1000: #1F1F1E; /* primary text + matte black accents (track lights, dining) */ --gray-900: #2E2E2C; /* slight lift from pure black */ --gray-800: #4A4A48; /* secondary text */ --gray-600: #6E6E6C; /* tertiary text, captions */ --gray-400: #9C9C9A; /* dividers, mid-grey rug tone */ --gray-300: #B5B5B2; /* polished concrete floor base */ --gray-200: #D4D4D2; /* sofa fabric mid-grey */ --gray-100: #E8E8E5; /* light walls / soft surfaces */ --gray-50: #F2F2EF; /* primary BG — softest cool white */ /* Single green accent (sage cactus) — used very sparingly */ --warm-700: #4F6B45; --warm-500: #6B8E5A; /* Geometry primitives */ --unit-1: 4px; --unit-2: 8px; --unit-3: 12px; --unit-4: 16px; --unit-5: 24px; --unit-6: 32px; --unit-7: 48px; --unit-8: 64px; --unit-9: 96px; --unit-10: 128px; /* Easing primitives */ --ease: cubic-bezier(.22, 1, .36, 1); --ease-expo: cubic-bezier(.19, 1, .22, 1); /* ============================================================ LAYER 2 — SEMANTIC (purpose aliases, used by components) ============================================================ */ /* v37: LIGHT MODE — back to ink-on-bg semantics. Cool grey minimalism — text reads matte black on near-white concrete BG. */ --ink: var(--gray-1000); /* primary text — matte black #1F1F1E */ --ink-2: var(--gray-800); /* secondary text */ --ink-3: var(--gray-600); /* tertiary text, captions */ --ink-4: var(--gray-400); /* dividers */ --bg: var(--gray-50); /* primary BG — softest cool white #F2F2EF */ --bg-soft: var(--gray-100); /* secondary surface — light wall tone */ --bg-deep: var(--gray-200); /* sofa-grey accent surfaces */ --accent: var(--warm-500); /* sage cactus green — single accent */ --accent-deep:var(--warm-700); /* Typography — v36: Outfit (Migra-equivalent wide geometric thin sans). Pairs with Fraunces for italic accents in classical-meets-modern tension. */ --font-display: 'Outfit', 'Inter Tight', ui-sans-serif, system-ui, sans-serif; --font-italic: 'Fraunces', 'Cormorant Garamond', Georgia, serif; --font-body: 'Outfit', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* OpenType feature settings */ --font-features-display: "ss01" 1, "dlig" 1, "liga" 1, "kern" 1; --font-features-body: "ss01" 1, "liga" 1, "kern" 1; --font-features-mono: "tnum" 1, "zero" 1, "ss02" 1; /* Type scale */ --fs-display-xl: clamp(48px, 6.5vw, 96px); --fs-display-l: clamp(38px, 4.6vw, 72px); /* v33: raised ceiling */ --fs-display-m: clamp(28px, 3vw, 44px); --fs-body-l: 18px; --fs-body: 16px; --fs-caption: 13px; --fs-label: 11px; /* Spacing — purpose */ --space-1: var(--unit-1); --space-2: var(--unit-2); --space-3: var(--unit-3); --space-4: var(--unit-4); --space-5: var(--unit-5); --space-6: var(--unit-6); --space-7: var(--unit-7); --space-8: var(--unit-8); --space-9: var(--unit-9); --space-10:var(--unit-10); /* Radius */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill:999px; /* v37: Box shadows — soft cool greys for light mode, with subtle depth */ --shadow-1: 0 1px 2px rgba(31,31,30,.06); --shadow-2: 0 2px 8px rgba(31,31,30,.10); --shadow-3: 0 8px 24px rgba(31,31,30,.12); --shadow-4: 0 16px 40px rgba(31,31,30,.14), 0 4px 12px rgba(31,31,30,.08); --shadow-5: 0 32px 80px rgba(31,31,30,.18), 0 8px 24px rgba(31,31,30,.12); /* TEXT-SHADOW for light mode — 3-layer depth (close + middle + ambient) */ --text-shadow-deep: 0 1px 2px rgba(31,31,30,.10), 0 8px 16px rgba(31,31,30,.18), 0 24px 40px rgba(31,31,30,.16); --text-shadow-mid: 0 1px 2px rgba(31,31,30,.08), 0 4px 12px rgba(31,31,30,.14), 0 14px 28px rgba(31,31,30,.10); --text-shadow-soft: 0 1px 2px rgba(31,31,30,.08), 0 2px 6px rgba(31,31,30,.10), 0 6px 14px rgba(31,31,30,.08); /* Motion */ --motion-instant: 100ms; --motion-fast: 250ms; --motion-base: 400ms; --motion-slow: 800ms; --motion-cinematic: 1200ms; /* Z-index */ --z-content: 1; --z-elevated: 10; --z-sticky: 20; --z-overlay: 40; --z-header: 80; --z-modal: 100; --z-loader: 200; /* Accessibility */ --focus-ring: 2px solid var(--ink); --focus-offset: 4px; --touch-min: 44px; --touch-gap: 8px; /* ============================================================ LAYER 3 — COMPONENT (only this component uses it) ============================================================ */ /* Button (primary CTA) */ --button-bg-default: var(--bg); --button-bg-hover: var(--bg); --button-bg-active: var(--bg-soft); --button-text-default: var(--ink); --button-text-hover: var(--accent); --button-text-active: var(--accent-deep); --button-border: 1px solid var(--ink); --button-border-hover: 1px solid var(--accent); --button-shadow: var(--shadow-3); --button-shadow-hover: var(--shadow-4); --button-radius: var(--radius-pill); --button-min-height: var(--touch-min); --button-padding-x: 22px; --button-letter-spacing:0.36em; /* Heading */ --heading-color: var(--ink); --heading-shadow: var(--shadow-3); --heading-line-height: 0.98; --heading-letter-spacing:-0.025em; /* Body */ --body-color: var(--ink-2); --body-shadow: var(--shadow-1); --body-line-height: 1.7; --body-max-width: 460px; } @media (prefers-reduced-motion: reduce) { :root { --motion-instant: 0.01ms; --motion-fast: 0.01ms; --motion-base: 0.01ms; --motion-slow: 0.01ms; --motion-cinematic: 0.01ms; } }