/* * Luna — design tokens. * * Fluent structure with Metro accents: flat surfaces, three elevation levels, sharp * geometry (4px on cards and inputs, 2px on tiles), saturated accent tiles. Not Material: * no ripples, no floating action button, no heavy drop shadows. * * Every colour in app.css comes from a variable defined here. There is no hard-coded hex * in component CSS. * * Theme resolution order: * 1. PHP writes data-theme="light|dark" onto from a cookie, on the first byte * 2. for "system", a nonce'd inline script in resolves prefers-color-scheme * 3. the media query below is the no-JavaScript backstop */ :root { color-scheme: light; /* Surfaces — light */ --luna-bg: #FAFAFA; --luna-surface: #FFFFFF; --luna-surface-2: #F3F3F3; --luna-surface-3: #EAEAEA; --luna-border: #E5E5E5; --luna-border-strong: #D0D0D0; --luna-text: #1A1A1A; --luna-text-muted: #5C5C5C; --luna-text-faint: #8A8A8A; --luna-accent: #0F5FA6; --luna-accent-hover:#0A4C86; --luna-accent-soft: #E6F0FA; --luna-on-accent: #FFFFFF; --luna-overlay: rgba(0, 0, 0, .38); --luna-selection: #CCE4F7; /* Metro accent palette — tile surfaces */ --luna-orange: #F7630C; --luna-red: #E81123; --luna-purple: #8B5CF6; --luna-blue: #0078D4; --luna-pink: #EC4899; --luna-teal: #0E7C86; --luna-green: #107C10; --luna-gray: #6B6B6B; /* * Readable versions of the same hues for text and thin strokes on a light * background. The raw tile colours do not reach 4.5:1 as small text, so anything * smaller than a tile label uses these. */ --luna-orange-ink: #A63B00; --luna-red-ink: #B4000E; --luna-purple-ink: #6231C7; --luna-blue-ink: #0F5FA6; --luna-pink-ink: #B01D63; --luna-teal-ink: #0A616A; --luna-green-ink: #0B5D0B; --luna-gray-ink: #4F4F4F; /* Status */ --luna-ok: #107C10; --luna-warn: #9A6700; --luna-danger: #B4000E; --luna-info: #0F5FA6; --luna-ok-bg: #E8F5E8; --luna-warn-bg: #FBF3E2; --luna-danger-bg: #FBE7E9; --luna-info-bg: #E6F0FA; /* Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; /* Geometry */ --radius: 4px; --radius-tile: 2px; --rail-width: 216px; --rail-width-collapsed: 56px; --topbar-height: 52px; --content-max: 1360px; /* Elevation: three levels only, borders plus low-alpha shadows */ --elev-1: 0 1px 2px rgba(0, 0, 0, .06); --elev-2: 0 2px 6px rgba(0, 0, 0, .10); --elev-3: 0 8px 24px rgba(0, 0, 0, .16); /* Typography */ --font: "Segoe UI Variable", "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-mono: "Cascadia Mono", "Consolas", "SF Mono", "Liberation Mono", monospace; --fs-xs: 11px; --fs-sm: 12px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 26px; --fs-3xl: 34px; --speed: 120ms; } [data-theme="dark"] { color-scheme: dark; --luna-bg: #121212; --luna-surface: #1C1C1C; --luna-surface-2: #242424; --luna-surface-3: #2C2C2C; --luna-border: #2E2E2E; --luna-border-strong: #3D3D3D; --luna-text: #F2F2F2; --luna-text-muted: #A8A8A8; --luna-text-faint: #7A7A7A; --luna-accent: #4CA3E8; --luna-accent-hover:#6CB6F0; --luna-accent-soft: #14293B; --luna-on-accent: #0A0A0A; --luna-overlay: rgba(0, 0, 0, .62); --luna-selection: #1E3F5C; --luna-orange: #FF8A3D; --luna-red: #FF5A63; --luna-purple: #A78BFA; --luna-blue: #4CA3E8; --luna-pink: #F472B6; --luna-teal: #2AB3BF; --luna-green: #4CC44C; --luna-gray: #9A9A9A; --luna-orange-ink: #FF9B57; --luna-red-ink: #FF7078; --luna-purple-ink: #B9A2FB; --luna-blue-ink: #6CB6F0; --luna-pink-ink: #F78FC6; --luna-teal-ink: #45C4CF; --luna-green-ink: #62D262; --luna-gray-ink: #B0B0B0; --luna-ok: #4CC44C; --luna-warn: #E0B341; --luna-danger: #FF7078; --luna-info: #6CB6F0; --luna-ok-bg: #142614; --luna-warn-bg: #2B2415; --luna-danger-bg: #2E1618; --luna-info-bg: #14293B; --elev-1: 0 1px 2px rgba(0, 0, 0, .40); --elev-2: 0 2px 6px rgba(0, 0, 0, .50); --elev-3: 0 8px 24px rgba(0, 0, 0, .60); } /* No JavaScript and no explicit choice: follow the operating system. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --luna-bg: #121212; --luna-surface: #1C1C1C; --luna-surface-2: #242424; --luna-surface-3: #2C2C2C; --luna-border: #2E2E2E; --luna-border-strong: #3D3D3D; --luna-text: #F2F2F2; --luna-text-muted: #A8A8A8; --luna-text-faint: #7A7A7A; --luna-accent: #4CA3E8; --luna-accent-hover:#6CB6F0; --luna-accent-soft: #14293B; --luna-on-accent: #0A0A0A; --luna-overlay: rgba(0, 0, 0, .62); --luna-selection: #1E3F5C; --luna-orange: #FF8A3D; --luna-red: #FF5A63; --luna-purple: #A78BFA; --luna-blue: #4CA3E8; --luna-pink: #F472B6; --luna-teal: #2AB3BF; --luna-green: #4CC44C; --luna-gray: #9A9A9A; --luna-orange-ink: #FF9B57; --luna-red-ink: #FF7078; --luna-purple-ink: #B9A2FB; --luna-blue-ink: #6CB6F0; --luna-pink-ink: #F78FC6; --luna-teal-ink: #45C4CF; --luna-green-ink: #62D262; --luna-gray-ink: #B0B0B0; --luna-ok: #4CC44C; --luna-warn: #E0B341; --luna-danger: #FF7078; --luna-info: #6CB6F0; --luna-ok-bg: #142614; --luna-warn-bg: #2B2415; --luna-danger-bg: #2E1618; --luna-info-bg: #14293B; --elev-1: 0 1px 2px rgba(0, 0, 0, .40); --elev-2: 0 2px 6px rgba(0, 0, 0, .50); --elev-3: 0 8px 24px rgba(0, 0, 0, .60); } } /* Accent helper classes — used by tiles, tag chips and letter avatars. */ .accent-orange { --accent: var(--luna-orange); --accent-ink: var(--luna-orange-ink); } .accent-red { --accent: var(--luna-red); --accent-ink: var(--luna-red-ink); } .accent-purple { --accent: var(--luna-purple); --accent-ink: var(--luna-purple-ink); } .accent-blue { --accent: var(--luna-blue); --accent-ink: var(--luna-blue-ink); } .accent-pink { --accent: var(--luna-pink); --accent-ink: var(--luna-pink-ink); } .accent-teal { --accent: var(--luna-teal); --accent-ink: var(--luna-teal-ink); } .accent-green { --accent: var(--luna-green); --accent-ink: var(--luna-green-ink); } .accent-gray { --accent: var(--luna-gray); --accent-ink: var(--luna-gray-ink); }