/* ===================================================================== Plysk design system — Phase 0 foundation (docs/ui-plan.md). One source of truth for color, type, spacing, radii, shadow, motion. Components and pages read these tokens; never hard-code hexes. Light-first; a dark theme is a later pass (see the stub below). ===================================================================== */ /* ---- self-hosted display face: Fraunces (variable, OFL — see fonts/Fraunces-OFL.txt). Carries the brand personality (the "Hello, night owl" serif feel). Body stays system-ui. Self-hosted (no CDN) so it's CSP-safe and offline-safe; font-display:swap avoids blocking paint. */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 340 660; /* variable weight range */ font-display: swap; src: url('fonts/fraunces-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 340 660; font-display: swap; src: url('fonts/fraunces-latinext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { color-scheme: light; /* ---- color: one confident dark orange, warm-neutral grays, near-black ink ---- */ --primary: #c2410c; --primary-strong: #9a3412; --tint: #fdf1e7; /* primary wash — chips, focus ring, soft hovers */ --on-primary: #ffffff; /* text/icons on a primary fill */ --ink: #14161c; /* headings + body text */ --muted: #5b6472; /* secondary text */ --faint: #8b93a2; /* tertiary / captions */ --bg: #f5f6fb; /* page */ --surface: #ffffff; /* cards, sheets */ --surface-2: #fbfbfe; /* insets, input fills */ --border: #e7e8ef; /* semantic state (separate from the accent hue) */ --success: #1b8a4b; --success-tint: #e7f6ec; --warn: #8a6100; --warn-tint: #fff6e0; --danger: #c0392b; --danger-tint: #fdecea; /* ---- type: Claude-style elegant serif display + clean sans body ---- Display = self-hosted Fraunces (@font-face above); system serifs remain as the swap fallback. Body stays system-ui (SF/Segoe) — native, fast, and avoids the Inter cliché. (The original inspiration, Anthropic's Copernicus/Styrene, is licensed, so not shipped.) */ --font-display: "Fraunces", "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, Cambria, "Times New Roman", serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text-xs: .78rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-5xl: 3.75rem; --leading-tight: 1.12; --leading-snug: 1.3; --leading-normal: 1.55; /* ---- spacing (4px base), radii, shadow, motion ---- */ --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem; --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem; --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-full:999px; --sh-sm: 0 1px 2px rgba(20,22,28,.06); --sh-md: 0 10px 30px rgba(20,22,28,.10); --sh-lg: 0 28px 66px rgba(20,22,28,.16); --ease: cubic-bezier(.2,.7,.2,1); --dur: 160ms; /* legacy alias — retire as pages stop referencing it */ --plysk-accent: var(--primary); } /* ---- dark theme ---- Token-only: every component reads these vars, so there's no page sweep. Applied from the OS (prefers-color-scheme) UNLESS the user forced a theme via the header toggle (data-theme on ). The two blocks carry the same palette — keep them in sync. On dark, the primary button flips to a bright orange with near-black text (both directions stay AA-legible). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --primary:#ff8a4c; --primary-strong:#ffa873; --tint:#3a2415; --on-primary:#1f1206; --ink:#e7e9f1; --muted:#a3aab9; --faint:#727a8b; --bg:#0e0f15; --surface:#161822; --surface-2:#1d2030; --border:#2a2e3d; --success:#43c483; --success-tint:#14271d; --warn:#e0b64d; --warn-tint:#2a2314; --danger:#f0736a; --danger-tint:#2c1715; --sh-sm:0 1px 2px rgba(0,0,0,.4); --sh-md:0 10px 30px rgba(0,0,0,.45); --sh-lg:0 28px 66px rgba(0,0,0,.55); } } :root[data-theme="dark"] { color-scheme: dark; --primary:#ff8a4c; --primary-strong:#ffa873; --tint:#3a2415; --on-primary:#1f1206; --ink:#e7e9f1; --muted:#a3aab9; --faint:#727a8b; --bg:#0e0f15; --surface:#161822; --surface-2:#1d2030; --border:#2a2e3d; --success:#43c483; --success-tint:#14271d; --warn:#e0b64d; --warn-tint:#2a2314; --danger:#f0736a; --danger-tint:#2c1715; --sh-sm:0 1px 2px rgba(0,0,0,.4); --sh-md:0 10px 30px rgba(0,0,0,.45); --sh-lg:0 28px 66px rgba(0,0,0,.55); } /* ---- base / reset ---- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); background: var(--bg); color: var(--ink); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* headings default to the display serif; pages/components may override weight/size */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 560; font-optical-sizing: auto; /* Fraunces opsz axis: more refined at large sizes */ letter-spacing: -.012em; line-height: var(--leading-tight); text-wrap: balance; } a { color: var(--primary); } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* legacy top nav (NavMenu) — tokenized; superseded by AppHeader */ .navbar { display: flex; gap: var(--sp-4); align-items: center; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); } .navbar > a:first-child { font-weight: 700; }