/* Swarasense — static content-page stylesheet (content SEO pages, Task 1). The generated /ragas//, /tanpura/, /learn/ etc. pages are plain static HTML served straight from packages/web/public/, outside the Vite/PWA bundle that the SPA's own src/ui/theme/tokens.css ships in (hashed, bundle-internal). A here can only reach a file that also lives in public/, so this file stands alone rather than depending on the app bundle. SOURCE OF TRUTH: src/ui/theme/tokens.css. The custom-property VALUES below are copied from that file (the "Kalamkari Indigo" palette) — keep them in sync by hand if tokens.css changes. Every rule past the token block below reads colour via var(--token), exactly like styles.css does for the SPA; there is no literal hex anywhere in the element styling. Theme resolution: the no-FOUC inline script in skeleton.ts's renderPage() sets [data-theme] on before first paint (same swarasense.theme localStorage key + logic as the SPA), so the [data-theme] blocks below are what actually paints for a returning visitor; the plain :root fallback only covers the reader-mode/no-JS/first-ever-visit flash. */ :root { --bg: #f1ebdf; --bg-2: #ede5d6; --bg-gradient-top: #ede5d6; --surface: #fbf7ee; --surface-2: #e6dcc9; --hair: #dbd0bd; --hair-strong: #8b744c; --fg: #1c2431; --muted: #58626f; --faint: #7c8595; --accent: #a4422c; --accent-deep: #803422; --accent-ink: #ffffff; --accent-contrast: #ffffff; --gamaka: #494077; --gamaka-ink: #39325c; --focus-ring: #2f5fdd; --shadow-sm: 0 3px 12px rgba(14, 18, 26, 0.08); --shadow-lg: 0 12px 34px rgba(14, 18, 26, 0.16); color-scheme: light; } @media (prefers-color-scheme: dark) { :root { --bg: #141a24; --bg-2: #1c2430; --bg-gradient-top: #2b2a35; --surface: #1d2634; --surface-2: #273243; --hair: #303c4c; --hair-strong: #6a81a1; --fg: #eae4d6; --muted: #a7afbd; --faint: #6d7686; --accent: #d6735d; --accent-deep: #aa422b; --accent-ink: #12171f; --accent-contrast: #12171f; --gamaka: #a59fd1; --gamaka-ink: #a59fd1; --focus-ring: #8ab4ff; --shadow-sm: 0 3px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 12px 34px rgba(0, 0, 0, 0.45); color-scheme: dark; } } :root[data-theme='dusk-light'] { --bg: #f1ebdf; --bg-2: #ede5d6; --bg-gradient-top: #ede5d6; --surface: #fbf7ee; --surface-2: #e6dcc9; --hair: #dbd0bd; --hair-strong: #8b744c; --fg: #1c2431; --muted: #58626f; --faint: #7c8595; --accent: #a4422c; --accent-deep: #803422; --accent-ink: #ffffff; --accent-contrast: #ffffff; --gamaka: #494077; --gamaka-ink: #39325c; --focus-ring: #2f5fdd; --shadow-sm: 0 3px 12px rgba(14, 18, 26, 0.08); --shadow-lg: 0 12px 34px rgba(14, 18, 26, 0.16); color-scheme: light; } :root[data-theme='dusk-dark'] { --bg: #141a24; --bg-2: #1c2430; --bg-gradient-top: #2b2a35; --surface: #1d2634; --surface-2: #273243; --hair: #303c4c; --hair-strong: #6a81a1; --fg: #eae4d6; --muted: #a7afbd; --faint: #6d7686; --accent: #d6735d; --accent-deep: #aa422b; --accent-ink: #12171f; --accent-contrast: #12171f; --gamaka: #a59fd1; --gamaka-ink: #a59fd1; --focus-ring: #8ab4ff; --shadow-sm: 0 3px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 12px 34px rgba(0, 0, 0, 0.45); color-scheme: dark; } :root { --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace; --font-serif: 'Iowan Old Style', Georgia, serif; --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px; --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; } /* ----------------------------------------------------------------- layout */ * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; } body { background: var(--bg); color: var(--fg); font-family: var(--font-ui); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { /* Fix (contrast blocker): every hyperlink's text sits on the page background (`body`'s `--bg`), not on a solid accent fill — `--accent-ink` is reserved for the latter (on-accent-fill text/icons). `--accent` (madder) is what actually reads against the ground. */ color: var(--accent); } a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* -------------------------------------------------------------- site chrome */ /* UI reimagine (Task 2, shared navbar): mirrors `src/ui/styles.css`'s own `.navbar`/`.navbar-inner`/`.wordmark`/`.navbar-nav`/`.navbar-link`/ `.navbar-actions`/`.seg` rules byte-for-byte in class names + behaviour (kept in sync by hand across the two files, same convention this file already uses for the token layer above) — replaces the pre-reimagine `.site-header`/`.site-nav` (wordmark + Ragas/Tanpura/Learn), so a visitor sees the SAME navbar on every generated content page and on the SPA itself: Practice·Ragas·Ear training·Learn, with the current page's link underlined in the accent. `scripts/gen-content/skeleton.ts`'s `renderHeader(activeNav)` emits this markup; the theme control's click wiring (there's no bundled JS on these static pages) is a small inline `