/* Shared styles for Moodi.fm static pages (about, guides, legal). Theme follows the app: html.dark / html.light is set by the inline script in each page's , mirroring the logic in index.html. */ :root { color-scheme: light; --bg: #f9fafb; --card: #ffffff; --text: #333333; --h1: #1f2937; --h2: #374151; --h3: #4b5563; --accent: #3b82f6; --box: #f3f4f6; --box-alt: #eff6ff; --warning-bg: #fef3c7; --warning-border: #f59e0b; --shadow: rgba(0, 0, 0, 0.1); } html.dark { color-scheme: dark; --bg: hsl(280, 20%, 8%); --card: hsl(280, 15%, 12%); --text: #d4d4d8; --h1: #f4f4f5; --h2: #e4e4e7; --h3: #d4d4d8; --accent: #60a5fa; --box: hsl(280, 12%, 17%); --box-alt: hsl(221, 35%, 16%); --warning-bg: hsl(40, 40%, 14%); --warning-border: #d97706; --shadow: rgba(0, 0, 0, 0.45); } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: var(--text); max-width: 800px; margin: 0 auto; padding: 20px; background-color: var(--bg); } .container { background: var(--card); padding: 40px; border-radius: 12px; box-shadow: 0 4px 6px var(--shadow); } h1 { color: var(--h1); border-bottom: 2px solid var(--accent); padding-bottom: 10px; margin-bottom: 30px; } h2 { color: var(--h2); margin-top: 30px; margin-bottom: 15px; } h3 { color: var(--h3); margin-top: 25px; margin-bottom: 10px; } p { margin-bottom: 15px; } ul { margin-bottom: 15px; padding-left: 20px; } li { margin-bottom: 8px; } a { color: var(--accent); } .highlight { background-color: var(--box); padding: 15px; border-radius: 8px; border-left: 4px solid var(--accent); margin: 20px 0; } .contact { background-color: var(--box-alt); padding: 20px; border-radius: 8px; margin: 20px 0; } .more-guides { background-color: var(--box-alt); padding: 20px; border-radius: 8px; margin-top: 30px; } .more-guides h2 { margin-top: 0; } .warning { background-color: var(--warning-bg); border-left: 4px solid var(--warning-border); padding: 15px; border-radius: 8px; margin: 20px 0; } .back-link { display: inline-block; margin-bottom: 20px; color: var(--accent); text-decoration: none; font-weight: 500; } .back-link:hover { text-decoration: underline; } .logo { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; } .logo img { width: 32px; height: 32px; } .logo h1 { margin: 0; border: none; padding: 0; }