/* ========================================================================== X-SEEK — design tokens Shared across the parent site and every app page. Each app page adds one extra data-attribute (data-app="coin|plant|bible|health") on which flips a small set of --accent-* tokens further down this file — everything else (type scale, spacing, radii, motion) stays constant across the site. ========================================================================== */ :root { /* ---- Neutral base (X-SEEK parent) -------------------------------- */ --ink-950: #0d0e11; --ink-900: #15161b; --ink-800: #1d1f26; --ink-700: #282a33; --ink-600: #3a3d48; --ink-line: rgba(246, 243, 236, 0.10); --ink-line-strong: rgba(246, 243, 236, 0.18); --paper-100: #faf8f4; --paper-200: #f5f1ea; --paper-300: #ece5d8; --paper-line: rgba(21, 22, 27, 0.10); --paper-line-strong: rgba(21, 22, 27, 0.16); --text-on-dark: #f6f3ec; --text-on-dark-muted: rgba(246, 243, 236, 0.66); --text-on-dark-faint: rgba(246, 243, 236, 0.42); --text-on-light: #16161a; --text-on-light-muted: rgba(22, 22, 26, 0.64); --text-on-light-faint: rgba(22, 22, 26, 0.44); /* ---- Default accent (parent brand — used on home / nav / footer) - */ --accent: #c9a94a; --accent-ink: #16161a; --accent-soft: rgba(201, 169, 74, 0.16); /* ---- Type ---------------------------------------------------------- */ --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif; --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --fs-11: clamp(1.9rem, 1.5rem + 1.9vw, 3.6rem); --fs-10: clamp(1.6rem, 1.3rem + 1.4vw, 2.8rem); --fs-9: clamp(1.35rem, 1.15rem + 0.9vw, 2.05rem); --fs-8: clamp(1.15rem, 1.03rem + 0.55vw, 1.55rem); --fs-7: 1.25rem; --fs-6: 1.0625rem; --fs-5: 0.9375rem; --fs-4: 0.8125rem; /* ---- Spacing (8px rhythm) ------------------------------------------ */ --sp-1: 0.5rem; --sp-2: 0.75rem; --sp-3: 1rem; --sp-4: 1.5rem; --sp-5: 2rem; --sp-6: 3rem; --sp-7: 4.5rem; --sp-8: 6.5rem; --sp-9: 9rem; --section-pad: clamp(4.5rem, 4rem + 2.5vw, 8rem); --page-pad: clamp(1.25rem, 1rem + 2.5vw, 3rem); --content-max: 1240px; --measure: 62ch; /* ---- Shape / depth --------------------------------------------------*/ --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; --radius-pill: 999px; --shadow-1: 0 1px 2px rgba(10, 10, 12, 0.06), 0 8px 24px -12px rgba(10, 10, 12, 0.18); --shadow-2: 0 4px 12px rgba(10, 10, 12, 0.10), 0 24px 60px -24px rgba(10, 10, 12, 0.35); /* ---- Motion ---------------------------------------------------------*/ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 220ms; --dur-med: 420ms; --dur-slow: 900ms; } /* ---- Per-app accent themes --------------------------------------------- Applied via [data-app="…"] on . Only color relationships change; layout/type tokens above are shared so the site still reads as one system. -------------------------------------------------------------------------*/ body[data-app="coin"] { --accent: #c99a4a; --accent-2: #8a6a3c; --accent-ink: #17130d; --accent-soft: rgba(201, 154, 74, 0.16); --app-surface: #17140f; --app-surface-raised: #1f1a13; --app-line: rgba(238, 220, 182, 0.14); } body[data-app="plant"] { --accent: #3c7a52; --accent-2: #8fae5f; --accent-ink: #0f2016; --accent-soft: rgba(60, 122, 82, 0.14); --app-surface: #f6f4ea; --app-surface-raised: #ffffff; --app-line: rgba(20, 40, 24, 0.10); } body[data-app="bible"] { --accent: #b0813c; --accent-2: #1c2544; --accent-ink: #1c2544; --accent-soft: rgba(176, 129, 60, 0.16); --app-surface: #efe6d3; --app-surface-raised: #f8f2e4; --app-line: rgba(28, 37, 68, 0.12); } body[data-app="health"] { --accent: #c23349; --accent-2: #ff8a75; --accent-ink: #ffffff; --accent-soft: rgba(194, 51, 73, 0.10); --app-surface: #fbfbfc; --app-surface-raised: #ffffff; --app-line: rgba(20, 22, 30, 0.08); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-med: 1ms; --dur-slow: 1ms; } }