/* ============================================ Kronoscript - Deep Teal Modern Theme ============================================ */ :root { /* Anchors */ --mst-ink: #1a1f2e; /* near-black, primary text + dark surfaces */ --mst-ink-soft: #2b3142; --mst-canvas: #fafaf7; /* near-white page canvas */ --mst-card: #ffffff; --mst-surface-2: #f3f3ee; /* subtle raised surface / bubbles */ --mst-border: #e6e6df; /* Accent: deep teal */ --mst-primary: #0f6466; /* deep teal */ --mst-primary-2: #144f52; /* darker */ --mst-primary-3: #1a8a8d; /* brighter, for hover */ --mst-accent: #d4a84a; /* lighter gold secondary */ --mst-accent-2: #b8871a; /* deeper gold for hover/shadow */ /* Visibility / relationship tier palette — shared with My Network */ --tier-public: #dc3545; /* red — broad/exposed */ --tier-acquaintances: #3b82f6; /* sky blue — breezy, casual */ --tier-friends: #10b981; /* emerald — the friendly middle */ --tier-family: #eab308; /* brilliant gold — the precious inner circle */ --tier-private: #6c757d; /* Text */ --mst-text: #1a1f2e; --mst-muted: #6b7280; /* Surfaces (legacy names kept as aliases so existing classes keep working) */ --mst-bg: var(--mst-canvas); --mst-dark: var(--mst-ink); --mst-secondary: var(--mst-primary-3); --mst-gold: var(--mst-accent); --mst-gold-light:#fbd9cb; --mst-light: #e6f2f2; /* Elevation */ --mst-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04); --mst-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 10px 30px -16px rgba(16, 24, 40, 0.18); --mst-shadow-lg: 0 20px 60px -20px rgba(16, 24, 40, 0.35); /* Radii */ --mst-radius: 16px; --mst-radius-sm: 10px; --mst-radius-lg: 22px; /* Type */ --mst-font-serif: 'Fraunces', 'Instrument Serif', Georgia, serif; --mst-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; } /* Dark mode */ [data-theme="dark"] { --mst-ink: #e7e9ee; --mst-ink-soft: #c8ccd6; --mst-canvas: #0f131c; --mst-card: #161b27; --mst-surface-2: #1b2130; --mst-border: #242b3c; --mst-primary: #2dd4bf; --mst-primary-2: #14b8a6; --mst-primary-3: #5eead4; --mst-accent: #d4a84a; --mst-accent-2: #b8871a; --mst-text: #e7e9ee; --mst-muted: #8a92a6; --mst-bg: var(--mst-canvas); --mst-dark: var(--mst-ink); --mst-secondary: var(--mst-primary-3); --mst-light: #10303a; --mst-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 10px 30px -16px rgba(0,0,0,0.7); } html { font-size: 15px; position: relative; min-height: 100%; /* Sticky navbar is ~88px tall — reserve that much space at the top of every programmatic scroll (anchor jumps, scrollIntoView, focus jumps) so the target doesn't end up under the navbar. */ scroll-padding-top: 96px; } @media (min-width: 768px) { html { font-size: 16px; } } body { /* Sticky footer pattern: body is a flex column with min-height = viewport, so the