/* ============================================================ tokens.css — Funderwars design tokens [data-theme="dark|light"] on . ============================================================ */ /* ── Structural (theme-agnostic) ────────────────────────── */ :root { --font-serif: 'Fraunces', Georgia, serif; --font-sans: 'DM Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', 'Courier New', monospace; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --strip-h: 52px; --nav-h: 56px; --help-w: 400px; --divider-w: 4px; --z-strip: 10; --z-panel: 20; --z-modal: 30; /* Solid red for error pills — same across themes */ --error-bg: #B91C1C; --error-ink: #fff; } /* ── Dark — warm near-black + cream ink ─────────────────── */ [data-theme="dark"] { --bg: #0D0B09; --bg-raised: #161310; --bg-panel: #1E1A16; --bg-input: #0D0B09; --border: #2D2820; --border-dim: #221E1A; --ink: #EDE8DC; --ink-dim: #8A8070; --ink-faint: #4A453E; --accent: #00FF41; --accent-hover: #00CC34; --accent-ink: #0D0B09; --positive: #4ADE80; --negative: #F87171; --amber: #FBB040; --shadow: rgba(0,0,0,0.55); --scrim: rgba(0,0,0,0.65); } /* ── Light — cream paper + dark ink (NOT SaaS white) ──────── */ [data-theme="light"] { --bg: #F4EFE4; --bg-raised: #EBE4D5; --bg-panel: #E0D8C6; --bg-input: #F4EFE4; --border: #C5B99E; --border-dim: #D5CAB5; --ink: #1A150D; --ink-dim: #5A5040; --ink-faint: #A09080; --accent: #1A5C2A; --accent-hover: #2A7838; --accent-ink: #F4EFE4; --positive: #166534; --negative: #991B1B; --amber: #92400E; --shadow: rgba(0,0,0,0.12); --scrim: rgba(0,0,0,0.35); } /* ── Base reset ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; transition: background 0.2s ease, color 0.2s ease; } /* ── Screen-reader only ─────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ── Animation keyframes ─────────────────────────────────── */ @keyframes anim-positive { 0% { color: var(--ink); transform: scale(1); } 20% { color: var(--positive); transform: scale(1.12); } 70% { color: var(--positive); transform: scale(1.06); } 100% { color: var(--ink); transform: scale(1); } } @keyframes anim-negative { 0% { color: var(--ink); transform: translateX(0); } 12% { color: var(--negative); transform: translateX(-5px); } 25% { transform: translateX(5px); } 37% { transform: translateX(-4px); } 50% { transform: translateX(3px); } 65% { transform: translateX(-2px); } 80% { transform: translateX(1px); } 100% { color: var(--ink); transform: translateX(0); } } /* delta ghost floats out of strip — up when strip is bottom, down when top */ @keyframes delta-up { 0% { opacity: 1; transform: translateY(0) scale(1); } 15% { opacity: 1; transform: translateY(-8px) scale(1.05); } 100% { opacity: 0; transform: translateY(-48px) scale(0.9); } } @keyframes delta-down { 0% { opacity: 1; transform: translateY(0) scale(1); } 15% { opacity: 1; transform: translateY(8px) scale(1.05); } 100% { opacity: 0; transform: translateY(32px) scale(0.9); } } @keyframes meter-pulse-pos { 0% { filter: brightness(1); } 25% { filter: brightness(1.7) drop-shadow(0 0 5px var(--positive)); } 100% { filter: brightness(1); } } @keyframes meter-pulse-neg { 0% { filter: brightness(1); } 25% { filter: brightness(1.7) drop-shadow(0 0 5px var(--negative)); } 100% { filter: brightness(1); } } .anim-positive { animation: anim-positive 1s ease forwards; } .anim-negative { animation: anim-negative 0.85s ease forwards; } .delta-ghost { position: absolute; right: 0; top: -2px; font-size: 11px; font-weight: 700; pointer-events: none; white-space: nowrap; z-index: 100; } .delta-ghost--positive { color: var(--positive); } .delta-ghost--negative { color: var(--negative); } .delta-ghost--up { animation: delta-up 1.15s ease forwards; } .delta-ghost--down { animation: delta-down 1.15s ease forwards; } .meter-pulse-positive { animation: meter-pulse-pos 0.7s ease forwards; } .meter-pulse-negative { animation: meter-pulse-neg 0.7s ease forwards; } @media (prefers-reduced-motion: reduce) { .anim-positive { animation: none; color: var(--positive); } .anim-negative { animation: none; color: var(--negative); } .delta-ghost { display: none; } .meter-pulse-positive, .meter-pulse-negative { animation: none; } } /* ── Error pill — prominent red, white text ─────────────── */ .error-pill { display: flex; align-items: flex-start; gap: 6px; background: var(--error-bg); color: var(--error-ink); border-radius: var(--radius-md); padding: 7px 11px; font-size: 12px; font-weight: 600; line-height: 1.4; } .error-pill::before { content: "⚠ "; flex-shrink: 0; } /* ── Stat meter (Rep/Greed in status strip) ─────────────── */ .strip-meter-wrap { display: flex; flex-direction: column; gap: 2px; position: relative; flex-shrink: 0; cursor: default; } .strip-meter { width: 52px; height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; } .strip-meter-fill { height: 100%; border-radius: 3px; transition: width 0.45s ease, background-color 0.45s ease; } /* Popup shown on hover (desktop) or .popup-open (mobile tap) */ .meter-popup { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 9px; font-size: 11px; font-family: var(--font-mono); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 50; color: var(--ink); } .strip-meter-wrap:hover .meter-popup, .strip-meter-wrap.popup-open .meter-popup { opacity: 1; } /* When strip is at top (narrow/tablet/mobile), popup goes below */ @media (max-width: 1279px) { .meter-popup { bottom: auto; top: calc(100% + 6px); } } /* ── Common form elements ───────────────────────────────── */ .field { display: flex; flex-direction: column; gap: 4px; } .field-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-dim); font-weight: 600; } .field-input { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--ink); font-family: var(--font-sans); font-size: 14px; padding: 10px 12px; outline: none; transition: border-color 0.15s; width: 100%; } .field-input:focus { border-color: var(--accent); } .field-input::placeholder { color: var(--ink-faint); } .field-hint { font-size: 11px; color: var(--ink-dim); line-height: 1.4; } /* ── Buttons ─────────────────────────────────────────────── */ .btn-primary { background: var(--accent); color: var(--accent-ink); border: none; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 14px; font-weight: 600; padding: 11px 20px; cursor: pointer; transition: background 0.15s, transform 0.1s; width: 100%; } .btn-primary:hover { background: var(--accent-hover); } .btn-primary:active { transform: scale(0.98); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .btn-ghost { background: none; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--ink-dim); font-family: var(--font-sans); font-size: 13px; padding: 8px 14px; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .btn-ghost:hover { border-color: var(--ink-dim); color: var(--ink); } .btn-danger { background: none; border: 1px solid var(--negative); border-radius: var(--radius-md); color: var(--negative); font-family: var(--font-sans); font-size: 13px; padding: 8px 14px; cursor: pointer; transition: background 0.15s, color 0.15s; } .btn-danger:hover { background: var(--negative); color: #fff; } .btn-icon { background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink-dim); width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; transition: border-color 0.15s, color 0.15s; flex-shrink: 0; } .btn-icon:hover { border-color: var(--accent); color: var(--accent); } /* ── Card ────────────────────────────────────────────────── */ .card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); } /* ── Empty state ─────────────────────────────────────────── */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px 20px; color: var(--ink-dim); font-style: italic; font-size: 13px; text-align: center; } /* ── Field-level error (prominent pill, same as error-pill) ── */ .field-error { background: var(--error-bg); color: var(--error-ink); border-radius: var(--radius-md); padding: 6px 10px; font-size: 12px; font-weight: 600; line-height: 1.4; align-items: flex-start; gap: 6px; } .field-error::before { content: "⚠ "; flex-shrink: 0; }