:root { /* ============================================================ */ /* COLOR — Japandi-quiet */ /* Warm paper backgrounds, warm near-black ink, wood as the */ /* single accent, sage as a secondary highlight. NEVER use */ /* pure #000, pure gray, or default Inter blue. */ /* ============================================================ */ --color-paper: hsl(38, 30%, 97%); --color-paper-2: hsl(36, 24%, 94%); --color-paper-3: hsl(34, 18%, 89%); --color-ink: hsl(28, 14%, 14%); --color-ink-soft: hsl(28, 10%, 28%); --color-ink-mute: hsl(28, 8%, 46%); --color-wood: hsl(28, 38%, 42%); --color-wood-soft: hsl(28, 40%, 62%); --color-wood-tint: hsl(28, 50%, 94%); --color-wood-deep: hsl(28, 42%, 30%); --color-sage: hsl(110, 14%, 38%); --color-sage-soft: hsl(110, 14%, 60%); --color-sage-tint: hsl(110, 18%, 92%); --color-line: hsla(28, 30%, 14%, 0.08); --color-line-strong: hsla(28, 30%, 14%, 0.16); --color-success: hsl(140, 38%, 36%); --color-error: hsl(0, 55%, 46%); /* Legacy aliases so the inherited thesync base.css / layout.css */ /* keep working unchanged. Map their navy/teal slots to our */ /* Japandi semantics. */ --color-navy-950: var(--color-ink); --color-navy-900: var(--color-ink); --color-navy-800: var(--color-ink-soft); --color-navy-700: var(--color-ink-soft); --color-navy-600: var(--color-ink-mute); --color-navy-500: var(--color-ink-mute); --color-teal-700: var(--color-wood-deep); --color-teal-600: var(--color-wood); --color-teal-500: var(--color-wood); --color-teal-400: var(--color-wood-soft); --color-teal-100: var(--color-wood-tint); --color-teal-50: var(--color-wood-tint); --color-copper-700: var(--color-wood-deep); --color-copper-600: var(--color-wood); --color-copper-500: var(--color-wood); --color-copper-400: var(--color-wood-soft); --color-copper-100: var(--color-wood-tint); --color-copper-50: var(--color-wood-tint); --color-mist: var(--color-paper-3); --color-mist-soft: var(--color-paper-2); --color-white: hsl(0, 0%, 100%); --color-black: var(--color-ink); /* ============================================================ */ /* TYPOGRAPHY — Fraunces + Inter Tight + JetBrains Mono */ /* Distinct trio that breaks the Inter/Roboto AI-slop baseline. */ /* ============================================================ */ --font-display: 'Fraunces', 'Source Serif 4', 'Iowan Old Style', Georgia, serif; --font-body: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; --text-xs: clamp(0.75rem, 0.72rem + 0.1vw, 0.8rem); --text-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.95rem); --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --text-lg: clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem); --text-xl: clamp(1.25rem, 1.18rem + 0.4vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.4rem + 0.6vw, 1.875rem); --text-3xl: clamp(1.875rem, 1.7rem + 1vw, 2.5rem); --text-4xl: clamp(2.25rem, 2rem + 1.5vw, 3.25rem); --text-5xl: clamp(2.75rem, 2.3rem + 2.5vw, 4.5rem); --text-6xl: clamp(3.25rem, 2.6rem + 3.5vw, 5.75rem); --text-7xl: clamp(3.75rem, 2.8rem + 5vw, 7rem); --leading-tight: 1.08; --leading-snug: 1.2; --leading-normal: 1.55; --leading-relaxed: 1.75; --tracking-tighter: -0.035em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.14em; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ============================================================ */ /* SPACE / LAYOUT */ /* ============================================================ */ --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; --space-40: 10rem; --section-padding: clamp(4.5rem, 9vw, 9rem); --section-padding-sm: clamp(3rem, 6vw, 5.5rem); --container-sm: 640px; --container-md: 768px; --container-lg: 1040px; --container-xl: 1240px; --container-2xl: 1440px; --container-padding: clamp(1.25rem, 4vw, 2.5rem); --radius-xs: 0.25rem; --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-3xl: 2rem; --radius-full: 9999px; --border-thin: 1px; --border-medium: 1.5px; --shadow-xs: 0 1px 2px hsla(28, 40%, 14%, 0.04); --shadow-sm: 0 1px 3px hsla(28, 40%, 14%, 0.05), 0 1px 2px hsla(28, 40%, 14%, 0.04); --shadow-md: 0 4px 12px hsla(28, 40%, 14%, 0.06), 0 2px 4px hsla(28, 40%, 14%, 0.04); --shadow-lg: 0 14px 30px hsla(28, 40%, 14%, 0.07), 0 6px 10px hsla(28, 40%, 14%, 0.04); --shadow-xl: 0 24px 48px hsla(28, 40%, 14%, 0.09), 0 10px 16px hsla(28, 40%, 14%, 0.04); --shadow-inset: inset 0 1px 0 hsla(0, 0%, 100%, 0.6); /* ============================================================ */ /* MOTION — calm, never bouncy. cubic-bezier(0.22, 1, 0.36, 1) */ /* is the only easing we use in production styles. */ /* ============================================================ */ --ease-default: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 160ms; --duration-normal: 280ms; --duration-slow: 480ms; --duration-slower: 720ms; --z-behind: -1; --z-default: 0; --z-raised: 1; --z-sticky: 50; --z-dropdown: 60; --z-overlay: 80; --z-modal: 90; --z-toast: 100; --z-max: 9999; }