/* Earthy Dimension — the one design system for the whole app. Every page links this file. Do not redefine tokens or components elsewhere; add new shared pieces here so the app stays one language. Fonts (Literata, Work Sans, Material Symbols) are loaded per page in . */ html.light { --bg: #f8fcfa; --surface: #f0f8f4; --surface-lowest: #ffffff; --surface-input: #ffffff; --text: #05271e; --heading: #05271e; --secondary: #45645e; --body: #414845; --line: #d4e7df; --line-soft: rgba(5, 39, 30, 0.06); --chip-bg: rgba(69, 100, 94, 0.15); --chip-text: #05271e; --primary: #05271e; --on-primary: #ffffff; --secondary-soft: rgba(69, 100, 94, 0.1); --shadow: 0 4px 20px rgba(29, 61, 51, 0.05); --shadow-2: 0 12px 40px rgba(29, 61, 51, 0.12); --mist: radial-gradient(circle at 50% 50%, rgba(29, 61, 51, 0.1) 0%, transparent 55%); --mist-blend: multiply; --mist-opacity: 0.12; } html.dark { --bg: #111614; --surface: #1a221f; --surface-lowest: #111614; --surface-input: #111614; --text: #e2f5ed; --heading: #c7eadc; --secondary: #accec5; --body: #c1c8c4; --line: rgba(199, 234, 220, 0.1); --line-soft: rgba(199, 234, 220, 0.06); --chip-bg: rgba(172, 206, 197, 0.15); --chip-text: #c7eadc; --primary: #c7eadc; --on-primary: #002118; --secondary-soft: rgba(172, 206, 197, 0.1); --shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --shadow-2: 0 16px 50px rgba(0, 0, 0, 0.65); --mist: radial-gradient(circle at 50% 50%, rgba(69, 100, 94, 0.5) 0%, transparent 60%); --mist-blend: screen; --mist-opacity: 0.4; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--body); font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; -webkit-font-smoothing: antialiased; transition: background 0.5s ease, color 0.4s ease; position: relative; overflow-x: hidden; } .serif { font-family: 'Literata', Georgia, serif; } /* Decorative mist, the atmospheric depth */ .mist { position: fixed; inset: -25% -25% auto -25%; height: 150%; pointer-events: none; z-index: 0; background: var(--mist); mix-blend-mode: var(--mist-blend); opacity: var(--mist-opacity); filter: blur(60px); } .wrap { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; padding: 80px 48px 120px; } @media (max-width: 640px) { .wrap { padding: 48px 24px 80px; } } /* Theme toggle */ .toggle { position: fixed; top: 24px; right: 24px; z-index: 5; width: 44px; height: 44px; border-radius: 9999px; border: 1px solid var(--line); background: var(--surface); color: var(--secondary); cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow); transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease; } .toggle:hover { transform: translateY(-1px); color: var(--heading); } .ms { font-family: 'Material Symbols Outlined'; font-size: 22px; line-height: 1; } /* Sections & headings */ section { margin-top: 80px; } .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--secondary); margin: 0 0 16px; } h2.section-title { font-family: 'Literata', serif; font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -0.01em; color: var(--heading); margin: 0 0 24px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } @media (max-width: 640px) { h2.section-title { font-size: 28px; line-height: 36px; } } .intro { font-size: 16px; line-height: 24px; color: var(--body); max-width: 52rem; margin: -8px 0 24px; } .intro b { color: var(--heading); font-weight: 600; } .lede { font-size: 18px; line-height: 28px; color: var(--body); max-width: 36rem; margin: 0; } /* Hero badge & title */ .badge-icon { display: inline-grid; place-items: center; padding: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-soft); box-shadow: var(--shadow); color: var(--heading); margin-bottom: 24px; } .badge-icon .ms { font-size: 30px; } h1.hero { font-family: 'Literata', serif; font-size: 48px; line-height: 56px; font-weight: 700; letter-spacing: -0.02em; color: var(--heading); margin: 0 0 12px; } @media (max-width: 640px) { h1.hero { font-size: 36px; line-height: 44px; } } /* Card, the level-1 surface */ .card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 24px; box-shadow: var(--shadow); } /* Buttons */ .btn { border: none; border-radius: 9999px; cursor: pointer; font-family: 'Work Sans', sans-serif; font-size: 16px; font-weight: 500; padding: 12px 24px; transition: opacity 0.25s ease, background 0.25s ease; } .btn.primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow); } .btn.primary:hover { opacity: 0.9; } .btn.primary:disabled { opacity: 0.5; cursor: default; } .btn.secondary { background: var(--secondary-soft); color: var(--secondary); } .btn.secondary:hover { background: var(--chip-bg); } /* Inputs */ .input { width: 100%; background: var(--surface-input); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; font-family: inherit; font-size: 16px; color: var(--text); transition: border-color 0.25s ease, box-shadow 0.25s ease; } textarea.input { min-height: 96px; resize: vertical; line-height: 1.5; } .input::placeholder { color: var(--body); opacity: 0.6; } .input:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 1px var(--secondary); } /* Chips & tags */ .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip-tag { background: var(--chip-bg); color: var(--chip-text); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; padding: 4px 14px; border-radius: 9999px; } .chip-tag.ghost { background: transparent; border: 1px solid var(--line); color: var(--body); font-weight: 500; } /* List */ .list { display: flex; flex-direction: column; } .list-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 8px; font-size: 15px; color: var(--text); transition: background 0.2s ease; } .list-item:hover { background: var(--secondary-soft); } .list-item + .list-item { border-top: 1px solid var(--line-soft); } .list-item .ms { color: var(--secondary); font-size: 20px; }