/* ───────────────────────────────────────────────────────────────────────────── Dream Cottage — Sea Glass design tokens Single source of truth for colour across ALL pages. Replaces the old fork between css/app.css (navy #061532) and the inline teal/sand palettes that had drifted into gate.html and others. Four time phases, stamped on by js/ambient.js: firstlight 06:00 – 07:00 warmed dark, sand-tinted gate daylight 07:00 – 16:00 light ground, for outdoor legibility seaglass 16:00 – 20:00 the reference palette night 20:00 – 06:00 dimmed, desaturated A page never hardcodes a colour. It reads these variables only, so a phase change is a single attribute flip with no per-page work. Manual override lives in localStorage under 'dc-theme': 'auto' (default) | 'firstlight' | 'daylight' | 'seaglass' | 'night' ───────────────────────────────────────────────────────────────────────────── */ /* ── Phase-independent tokens ──────────────────────────────────────────────── */ :root { /* Type */ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* Spacing scale */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; /* Radii */ --r-sm: 9px; --r-md: 11px; --r-lg: 13px; --r-xl: 16px; --r-pill: 999px; /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur: 0.25s; /* Layout */ --tabbar-h: 60px; --page-max: 480px; /* Safe areas (iOS PWA) */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); } /* ── SEA GLASS · 16:00–20:00 · the default ─────────────────────────────────── */ /* Also the fallback for any unstamped page, so nothing renders unstyled. */ :root, [data-phase='seaglass'] { --bg: #152524; --surface: #1d3130; --surface-2: #243937; --nav: #182a29; --brd: #2c4442; --brd-soft: #223634; --text: #e4ece9; --text-dim: #8ba39f; --text-faint: #6c837f; --accent: #9fd8c4; --accent-on: #0d1e1b; --accent-ghost: rgba(159, 216, 196, 0.22); --accent-glow: rgba(159, 216, 196, 0.26); --accent-line: rgba(159, 216, 196, 0.38); --gate-bg: rgba(159, 216, 196, 0.10); --gate-brd: rgba(159, 216, 196, 0.28); --good: #7fc9a4; --warn: #e8a08a; --warn-brd: rgba(232, 160, 138, 0.45); --warn-ghost: rgba(232, 160, 138, 0.14); --danger: #e0806c; --shadow: 0 6px 18px rgba(4, 12, 11, 0.4); --scrim: rgba(8, 18, 17, 0.72); color-scheme: dark; } /* ── FIRST LIGHT · 06:00–07:00 ─────────────────────────────────────────────── */ [data-phase='firstlight'] { --bg: #233230; --surface: #2d3f3b; --surface-2: #364a45; --nav: #26362f; --brd: #3d514a; --brd-soft: #334640; --text: #f2ece2; --text-dim: #9aa89e; --text-faint: #7d8b82; --accent: #c8d9b8; --accent-on: #1b2620; --accent-ghost: rgba(200, 217, 184, 0.22); --accent-glow: rgba(200, 217, 184, 0.24); --accent-line: rgba(200, 217, 184, 0.36); /* the one warm note in the palette — sand, only at first light */ --gate-bg: rgba(226, 190, 150, 0.11); --gate-brd: rgba(226, 190, 150, 0.30); --good: #a8cf9a; --warn: #e2a184; --warn-brd: rgba(226, 161, 132, 0.44); --warn-ghost: rgba(226, 161, 132, 0.14); --danger: #d98f72; --shadow: 0 6px 18px rgba(12, 20, 18, 0.36); --scrim: rgba(20, 30, 28, 0.7); color-scheme: dark; } /* ── DAYLIGHT · 07:00–16:00 · the only light phase ─────────────────────────── */ [data-phase='daylight'] { --bg: #eef2ee; --surface: #ffffff; --surface-2: #f5f8f5; --nav: #f7faf7; --brd: #d3ded9; --brd-soft: #e2eae6; --text: #16302b; --text-dim: #5f7a74; --text-faint: #7d938e; --accent: #2f7d70; --accent-on: #ffffff; --accent-ghost: rgba(47, 125, 112, 0.18); --accent-glow: rgba(47, 125, 112, 0.24); --accent-line: rgba(47, 125, 112, 0.34); --gate-bg: rgba(47, 125, 112, 0.07); --gate-brd: rgba(47, 125, 112, 0.24); --good: #2f7d5c; --warn: #b8562f; --warn-brd: rgba(184, 86, 47, 0.36); --warn-ghost: rgba(184, 86, 47, 0.10); --danger: #b0472c; --shadow: 0 4px 14px rgba(22, 48, 43, 0.10); --scrim: rgba(238, 242, 238, 0.82); color-scheme: light; } /* ── NIGHT · 20:00–06:00 · longest phase, dimmest ──────────────────────────── */ [data-phase='night'] { --bg: #0d1817; --surface: #131f1e; --surface-2: #1a2726; --nav: #101a19; --brd: #1f2f2d; --brd-soft: #182422; --text: #c3d2ce; --text-dim: #6b807b; --text-faint: #566a66; --accent: #7fb3a2; --accent-on: #08110f; --accent-ghost: rgba(127, 179, 162, 0.18); --accent-glow: rgba(127, 179, 162, 0.16); --accent-line: rgba(127, 179, 162, 0.30); --gate-bg: rgba(127, 179, 162, 0.07); --gate-brd: rgba(127, 179, 162, 0.20); --good: #6fa88d; --warn: #c98a74; --warn-brd: rgba(201, 138, 116, 0.36); --warn-ghost: rgba(201, 138, 116, 0.12); --danger: #c07a63; --shadow: 0 6px 18px rgba(2, 8, 7, 0.5); --scrim: rgba(5, 12, 11, 0.78); color-scheme: dark; } /* ── Base ──────────────────────────────────────────────────────────────────── */ * { margin: 0; padding: 0; box-sizing: border-box; } html { /* Painted so the page never shows through to a host background mid-load. */ background: var(--bg); -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* Phase changes at an hour boundary shouldn't snap. */ transition: background-color 0.6s var(--ease), color 0.6s var(--ease); } /* Keyboard focus must stay visible in every phase. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } @media (prefers-reduced-motion: reduce) { *, body { animation: none !important; transition: none !important; } }