/* Hallmark · Campfire design system tokens · design.md is the authority * Palette locked to the prototype Itay art-directed (docs/cloud-design-prototype.dc.html) */ :root { /* paper & ink — warm cream day surfaces */ --color-paper: #EDE4D3; /* app background */ --color-paper-2: #F7F0E4; /* panels, compose bars */ --color-paper-3: #FBF5EA; /* cards, sheets, modals */ --color-note: #F9F2E6; /* flat note-only feed card (no photo) */ --color-card: #ffffff; /* contact rows, inputs */ /* the fire keeper (Ask) — warm bubble ladder, one shade apart from the paper ladder */ --color-answer: #FFFBF3; /* the fire keeper's bubble */ --color-question: #EFE5D0; /* the person's bubble */ --color-chip: #F3EADA; /* starter chips, attached cards */ --color-placeholder:#a2937a; /* composer placeholder */ --color-ink: #2B2620; /* primary text, headings */ --color-ink-2: #5a5344; /* secondary text */ --color-muted: #7d7364; /* captions */ --color-muted-2: #8a7a5c; /* faint labels */ --color-name: #8a6a3c; /* chat name / warm label */ --color-rule: rgba(43,38,32,.10); --color-rule-2: rgba(43,38,32,.18); --color-scrim: oklch(0.22 0.015 130); /* overlay shadow — deliberately NOT flipped by dark mode: a scrim dims, whatever the lights are doing (2026-08-04 review) */ /* accents */ --color-accent: #088D49; /* forest green — primary actions, links, verified ✓ */ --color-accent-deep:#066B38; /* green hover */ --color-accent-ink: #ffffff; --color-olive: #568F28; /* secondary green — vouch */ --color-ember: #F0592A; /* fire / ask / host warmth */ --color-blue: #42629D; /* water — talk send, accents */ --color-gold: #C9A24B; /* tiny labels, "could it be", stars */ --color-danger: #b23a2a; --color-focus: #42629D; /* the night clearing (fire scene) */ --scene-top: #14170F; --scene-bottom: #0A0C08; --scene-star: #F2ECE0; --scene-name: #F2ECE0; --scene-glow: rgba(240,89,42,.5); /* the camps map (night festival ground) — our own pixel art, never the scan */ --camp-ground-top: #1c2a16; /* upper fields, deep grass green */ --camp-ground-bottom:#0e1410; /* lower ground, charcoal-green */ --camp-field: #2c3d1f; /* soft field region */ --camp-field-2: #35471f; /* lighter field region */ --camp-path: rgba(233,224,208,.45); /* cream desire-path */ --scene-flame-core: #FFE29A; /* bright fire core (pixel flame) */ /* per-person avatar hues (stable by name hash; warm, harmonious) */ --av1: #088D49; --av2: #42629D; --av3: #568F28; --av4: #C9A24B; --av5: #8B5FA8; --av6: #F0592A; /* same 6-hue set, used for chat name labels (design.md "Chat voice") */ --chat-h1: #088D49; --chat-h2: #42629D; --chat-h3: #568F28; --chat-h4: #C9A24B; --chat-h5: #8B5FA8; --chat-h6: #F0592A; /* type */ --font-display: "Fraunces", Georgia, serif; --font-body: "Inter", system-ui, sans-serif; --font-hand: "Gloria Hallelujah", cursive; /* ambient fire-prompt overlay only */ --text-xs: 0.6875rem; --text-sm: 0.8125rem; --text-md: 0.875rem; --text-lg: 1rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; /* space (4pt) */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 3.5rem; /* shape & motion */ --radius-sheet: 24px; --radius-card: 16px; --radius-modal: 20px; --radius-input: 12px; --radius-pill: 999px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-short: 200ms; /* ── new-design foundation (Claude Design handoff, 2026-07-28) — additive ── * Extends the palette for the map hub / marketplace / trader admin build. * Existing tokens above already match the handoff; these fill the gaps. */ --color-teal: #2F7A6B; /* platform / "through Campfire" */ --color-lilac: #8B6BA8; /* music · offers */ --color-slate: #5B7BA8; /* for-children · need-helpers */ --color-ember-deep: #B33F16; /* ember, dark text variant */ --color-gold-deep: #7a5a1e; /* gold, dark text variant */ --color-canvas: #E4D9C4; /* canvas outside frames */ --color-map-ground: #E7DCC4; /* map ground */ /* soft, low shadows */ --shadow-soft: 0 14px 26px -24px rgba(43,38,32,.9); --shadow-overlay: 0 26px 56px -26px rgba(43,38,32,.95); } /* ============================================================================ * NIGHT — the dark half. * * Values taken from Itay's own `Campfire Landing Night.dc.html` (Claude Design): * ground #14170F → #0A0C08, ink #F2ECE0, cards a 4.5% wash of the ink over the ground. * The fire scene was ALWAYS these colours, which is why the app has read right at night * from the beginning — this simply lets the rest of the app join it. * * ONLY SURFACE AND INK TOKENS FLIP. Ember, green, blue, gold and the festival's own * accent stay exactly as they are: those carry meaning (fire, go, water, host), and a * colour that means something must not change meaning when the lights go down. * ============================================================================ */ :root[data-theme="dark"] { --color-paper: #14170F; --color-paper-2: #191D13; --color-paper-3: #1E2318; --color-note: #1B2016; /* flat note-only feed card (dark) */ --color-card: #20261A; --color-ink: #F2ECE0; --color-ink-2: rgba(242,236,224,.74); --color-muted: rgba(242,236,224,.58); --color-muted-2: rgba(242,236,224,.44); --color-name: #D8C79B; --color-rule: rgba(242,236,224,.12); --color-rule-2: rgba(242,236,224,.22); --color-answer: #242A1B; /* the fire keeper's bubble (dark) */ --color-question: #2A2E20; /* the person's bubble (dark) */ --color-chip: #23291C; /* starter chips, attached cards (dark) */ --color-placeholder:rgba(242,236,224,.42); /* accents keep their meaning; only the ones that were tuned for cream get lifted so they still carry on a dark ground */ --color-accent: #4FC27E; --color-accent-deep:#8ADFAE; --color-accent-ink: #0A0C08; --color-olive: #8FC7A6; --color-gold: #E3C98C; --color-gold-deep: #C9A24B; --color-danger: #E8705C; --color-canvas: #101309; --shadow-soft: 0 6px 20px -10px rgba(0,0,0,.7); --shadow-overlay: 0 -10px 40px rgba(0,0,0,.55); }