/* En Armonía Studio — design tokens. See docs/brief.md §3 and design-log.md. Everything visual is named here; site.css only composes these. */ :root { /* Materials: paper, ink (indigo), terracotta highlight */ --paper: #f8f2e8; --paper-2: #efe6d7; /* slightly deeper paper for sheets/cards */ --ink: #23243a; /* indigo-black, body text */ --ink-2: #2f3566; /* indigo, headings & lines */ --muted: #7b7368; --accent: #a0643c; /* terracotta */ --life: transparent; /* optional third "life" colour, set by data-life */ --line: color-mix(in oklab, var(--ink-2) 22%, transparent); /* Areas (broad disciplines). Practices inherit their area's colour. */ --area-music: #3b4a8c; /* indigo */ --area-dance: #b8452f; /* terracotta-red */ --area-visual: #2f7d6b; /* jade */ --area-design: #d99a2b; /* mango */ --area-mind: #2f7fb3; /* cerulean */ /* Type. --font-display is switchable (see [data-font] below). */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-cjk: "Noto Serif SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", serif; --t-display: clamp(2.6rem, 9vw, 5rem); --t-h2: clamp(1.6rem, 5vw, 2.4rem); --t-h3: 1.25rem; --t-body: 1.05rem; --t-small: .9rem; --t-label: .78rem; --track-label: .16em; --lh-body: 1.55; /* Space (4px grid) */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --measure: 640px; --gutter: var(--s5); /* Shape */ --r-chip: 999px; --r-sheet: 22px; --r-tile: 14px; /* Motion: few durations, one ease, one stepped ease for the stop-motion feel */ --d-fast: 160ms; --d-base: 320ms; --d-slow: 900ms; --d-drift: 9s; --ease: cubic-bezier(.2, .7, .2, 1); --ease-step: steps(10, end); } /* Display font candidates (brief §3). Flip with data-font on . */ :root[data-font="playfair"] { --font-display: "Playfair Display", Georgia, serif; } :root[data-font="cormorant"] { --font-display: "Cormorant Garamond", Georgia, serif; --t-display: clamp(3rem, 10vw, 5.6rem); } :root[data-font="instrument"] { --font-display: "Instrument Serif", Georgia, serif; --t-display: clamp(3rem, 10vw, 5.6rem); } :root[data-font="georgia"] { --font-display: Georgia, "Times New Roman", serif; } /* Optional third colour (brief §3: "light" against the muted pair) */ :root[data-life="mango"] { --life: #e2a23a; } :root[data-life="green"] { --life: #3f8a5c; } /* Reduced motion: durations collapse to zero; site.css and site.js also check. */ @media (prefers-reduced-motion: reduce) { :root { --d-fast: 0ms; --d-base: 0ms; --d-slow: 0ms; --d-drift: 0s; } } /* Dark mode is reserved (brief §3): tokens exist so a dark set can be added here later. */