/* Together Spots — shared base styles. Plain CSS, no build step. Warm "journal" palette + type pairing — see Design/design-system.md for the full rationale (research pass: Yelp for layout structure only, Swarm/Polarsteps/Day One/AllTrails/Kinfolk for tone and specific patterns). Fraunces (serif) for names/headings, Inter (sans) for everything else — loaded via Google Fonts link tag in each page's , not @import here (keeps it non-blocking). */ :root { --ink: #2e2a26; --ink-soft: #75695a; --ink-faint: #948877; --mist: #fbf6ef; --white: #fffdf9; --border: #e4d9c8; --accent: #e1603d; --accent-bg: #faece5; --accent-ink: #993c1d; --sage: #7c9473; --sage-bg: #eaf3e5; --sage-ink: #3b6d11; --gold: #d9a441; --gold-bg: #fcefda; --gold-ink: #854f0b; --danger: #a83226; --r: 10px; --font-heading: 'Fraunces', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); background: var(--mist); color: var(--ink); } .page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; } .card { width: 100%; max-width: 380px; background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 28px 24px; } .card + .card { margin-top: 16px; } h1 { font-family: var(--font-heading); font-size: 22px; font-weight: 600; margin: 0 0 6px; text-align: center; } .subtitle { font-size: 14px; color: var(--ink-soft); text-align: center; margin: 0 0 24px; } .btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px; border-radius: var(--r); border: 1px solid var(--border); background: var(--white); font-size: 14px; font-weight: 600; cursor: pointer; color: var(--ink); } .btn:hover { background: var(--mist); } .btn.primary { background: var(--accent); border-color: var(--accent); color: white; } .btn.primary:hover { filter: brightness(0.95); } .btn[disabled] { opacity: 0.5; cursor: not-allowed; } .btn[disabled]:hover { background: var(--white); } .btn.primary[disabled]:hover { filter: none; } .btn + .btn { margin-top: 10px; } input[type="text"] { width: 100%; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--border); font-size: 14px; margin-bottom: 10px; } .field-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; } .field-hint { font-size: 12px; color: var(--ink-soft); text-align: left; margin: -4px 0 14px; } .hint { font-size: 13px; color: var(--ink-soft); text-align: center; margin-top: 16px; } .error-text { font-size: 13px; color: var(--danger); text-align: center; margin: 8px 0 0; } .section-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); margin: 0 0 10px; } .circle-row { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 8px; } .circle-row-top { display: flex; align-items: center; justify-content: space-between; } .circle-row .name { font-family: var(--font-heading); font-weight: 600; font-size: 15px; } .circle-row .meta { font-size: 12px; color: var(--ink-soft); } .circle-row-info { cursor: pointer; } .circle-row-info:hover .name { color: var(--accent); } .invite-form { display: flex; gap: 8px; margin-top: 10px; } .invite-form input[type="email"] { flex: 1; padding: 8px 10px; border-radius: var(--r); border: 1px solid var(--border); font-size: 13px; margin-bottom: 0; } .invite-form .btn { width: auto; padding: 8px 14px; font-size: 13px; } .invite-msg { font-size: 12px; margin: 8px 0 0; } .invite-msg-success { color: var(--ink-soft); } .invite-msg-error { color: var(--danger); } .spinner { text-align: center; color: var(--ink-soft); font-size: 14px; padding: 40px 0; }