/* * Sacred Composition Tokens — Amari's Sanctuary * * Proportioning system based on the golden ratio and Fibonacci sequence. * These are craft principles — harmonious spacing and typography that feel * natural because they follow the same mathematics as growth in nature. * * Usage: link this file in any page's , then reference tokens as * var(--space-8) or var(--text-lg) in that page's inline styles. */ :root { /* ── Golden ratio constants ── */ --phi: 1.618; --phi-inverse: 0.618; /* ── Fibonacci spacing scale (rem) ── Each value is the sum of the two before it. 3, 5, 8, 13, 21, 34, 55, 89 → mapped to rem */ --space-3: 0.1875rem; /* 3px — finest breathing room */ --space-5: 0.3125rem; /* 5px — tight inner padding */ --space-8: 0.5rem; /* 8px — compact spacing */ --space-13: 0.8125rem; /* 13px — standard small gap */ --space-21: 1.3125rem; /* 21px — comfortable spacing */ --space-34: 2.125rem; /* 34px — section breathing room */ --space-55: 3.4375rem; /* 55px — generous section gap */ --space-89: 5.5625rem; /* 89px — major section separation */ /* ── Golden type scale ── Each step = previous * 1.236 (fourth root of phi for tighter steps) and key steps land on phi multiples */ --text-xs: 0.75rem; /* 12px — small labels, captions */ --text-sm: 0.875rem; /* 14px — secondary text, notes */ --text-base: 1rem; /* 16px — body text */ --text-md: 1.236rem; /* ~20px — emphasis, subheads */ --text-lg: 1.618rem; /* ~26px — section titles */ --text-xl: 2rem; /* 32px — page headings */ --text-2xl: 2.618rem; /* ~42px — hero titles */ --text-3xl: 4.236rem; /* ~68px — display/splash */ /* ── Golden line heights ── */ --leading-tight: 1.382; /* headings */ --leading-prose: 1.618; /* body text — the golden line height */ --leading-relaxed: 1.854; /* spacious reading */ /* ── Sacred timing — animation durations ── */ --duration-swift: 210ms; /* micro-interactions */ --duration-gentle: 333ms; /* hover transitions */ --duration-breath: 618ms; /* modals, reveals */ --duration-sacred: 1618ms; /* page transitions, Amari's pause */ /* ── Golden layout proportions ── */ --split-minor: 38.2%; --split-major: 61.8%; /* ── Sanctuary palette (existing, canonicalised) ── */ --color-parchment: #FAF7F0; --color-warmth: #F5EFE4; --color-blush: #E9D6CE; --color-rose: #C8968A; --color-clay: #D4A599; --color-sage: #7A8F6B; --color-earth: #4E4E4E; }