/* ============================================================ ReadsMe Mobile — Design Tokens Mobile-first. No breakpoints. Desktop = phone-frame wrapper. ============================================================ */ /* ============================================================ BASE TOKENS (theme-independent) ============================================================ */ :root { /* type scale: single source of truth is ego-design-system.css (loads later, wins) */ /* Line heights */ --leading-tight: 1.15; --leading-body: 1.55; /* UI / chat text */ --leading-reading: 1.6; /* Long-form book prose */ --leading-normal: 1.5; /* Alias kept for legacy compat */ --leading-relaxed: 1.65; /* Alias kept for legacy compat */ --paragraph-spacing: clamp(1rem, 0.85rem + 0.2vw, 1.25rem); /* Font families — fallback faces (Phase 9) use size-adjust to prevent CLS */ --font-display: 'Instrument Serif', Georgia, serif; --font-body: 'Source Serif 4', 'Source Serif 4 Fallback', Georgia, serif; --font-ui: 'Manrope', 'Manrope Fallback', -apple-system, BlinkMacSystemFont, sans-serif; --font-serif: var(--font-body); /* legacy alias */ --font-sans: var(--font-ui); /* legacy alias */ /* Font weights */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* ---------------------------------------------------------- Touch Targets ---------------------------------------------------------- */ --touch-min: 44px; /* ---------------------------------------------------------- Safe Areas (iOS notch / home indicator) ---------------------------------------------------------- */ --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom); --safe-left: env(safe-area-inset-left); --safe-right: env(safe-area-inset-right); /* ---------------------------------------------------------- Spacing Scale (4px base) ---------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ---------------------------------------------------------- Border Radius Scale ---------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-pill: 9999px; --radius-full: 9999px; /* legacy alias */ /* ---------------------------------------------------------- Z-Index Scale (mobile reading context) ---------------------------------------------------------- */ --z-surface: 0; /* reading/book surface */ --z-bottom: 100; /* persistent bottom controls (.btn-ask, .btn-you) */ --z-sheet: 450; /* bottom sheets */ /* ---------------------------------------------------------- Transition Speeds ---------------------------------------------------------- */ --transition-slow: 400ms ease; /* ---------------------------------------------------------- Accent Gradient (warm book tones) ---------------------------------------------------------- */ --color-accent-start: #8B7355; --color-accent-end: #5C4A32; /* ---------------------------------------------------------- Semantic surface tokens (resolved by theme below) Defaults to light theme values so :root is never bare. ---------------------------------------------------------- */ --surface-primary: #FAFAFA; --surface-elevated: #FFFFFF; --surface-inset: #F3F4F6; --surface-overlay: rgba(0, 0, 0, 0.40); --text-primary: #1a1a1a; --text-secondary: #4B5563; --text-muted: #6B7280; --text-disabled: #9CA3AF; --text-inverse: #FFFFFF; --border-default: #E5E7EB; --border-subtle: #F3F4F6; /* Color system tokens */ --color-primary: #7C5E3C; --color-primary-hover: #634A2E; --color-primary-subtle: rgba(124, 94, 60, 0.08); --color-primary-subtle-hover: rgba(124, 94, 60, 0.12); --color-text: var(--text-primary); --color-text-secondary: var(--text-secondary); --color-text-muted: var(--text-muted); --color-text-disabled: var(--text-disabled); --color-text-inverse: var(--text-inverse); --color-bg: var(--surface-primary); --color-bg-elevated: var(--surface-elevated); --color-bg-subtle: var(--surface-inset); --color-bg-inset: #E5E7EB; --color-border: var(--border-default); --color-border-subtle: var(--border-subtle); --color-success: #10b981; --color-success-subtle: rgba(16, 185, 129, 0.10); --color-warning: #f59e0b; --color-warning-subtle: rgba(245, 158, 11, 0.10); --color-error: #ef4444; --color-error-subtle: rgba(239, 68, 68, 0.10); --color-personalized-bg: rgba(249, 115, 22, 0.06); --color-personalized-border: #f97316; --color-voice-listening: #6B8E5A; --color-voice-listening-subtle: rgba(107, 142, 90, 0.10); --color-voice-listening-border: #6B8E5A; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); /* Legacy aliases */ --bg-color: var(--surface-primary); --text-color: var(--text-primary); --border-color: var(--border-default); --shadow: var(--shadow-xs); --shadow-lg: var(--shadow-md); --primary-color: var(--color-primary); --primary-hover: var(--color-primary-hover); --primary-color-10: var(--color-primary-subtle); --bg-primary: var(--surface-primary); --bg-secondary: var(--surface-inset); --book-bg: var(--surface-elevated); --book-text: var(--text-primary); --book-heading: #0a0a0a; } /* ============================================================ THEME: DAYLIGHT (default — bright, warm off-white) ============================================================ */ [data-theme="light"] { --surface-primary: #FAFAFA; --surface-elevated: #FFFFFF; --surface-inset: #F3F4F6; --surface-overlay: rgba(0, 0, 0, 0.40); --text-primary: #1a1a1a; --text-secondary: #4B5563; --text-muted: #6B7280; --text-disabled: #9CA3AF; --text-inverse: #FFFFFF; --border-default: #E5E7EB; --border-subtle: #F3F4F6; --color-primary: #7C5E3C; --color-primary-hover: #634A2E; --color-primary-subtle: rgba(124, 94, 60, 0.08); --color-primary-subtle-hover: rgba(124, 94, 60, 0.12); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --bg-color: var(--surface-primary); --text-color: var(--text-primary); --book-bg: var(--surface-elevated); --book-text: var(--text-primary); --book-heading: #0a0a0a; --message-bg: var(--surface-inset); --input-bg: var(--surface-elevated); --panel-bg: var(--surface-elevated); --sidebar-bg: var(--surface-elevated); } /* ============================================================ THEME: PAPER (sepia warm reading tone) ============================================================ */ [data-theme="sepia"] { --surface-primary: #F5EDD8; --surface-elevated: #FDF6E4; --surface-inset: #EDE0C4; --surface-overlay: rgba(60, 40, 10, 0.45); --text-primary: #2C1A0E; --text-secondary: #5C3D22; --text-muted: #8B6A45; --text-disabled: #B8956A; --text-inverse: #FDF6E4; --border-default: #D4B896; --border-subtle: #E8D5B5; --color-primary: #7C5E3C; --color-primary-hover: #634A2E; --color-primary-subtle: rgba(124, 94, 60, 0.12); --color-primary-subtle-hover: rgba(124, 94, 60, 0.18); --shadow-xs: 0 1px 2px rgba(60, 40, 10, 0.06); --shadow-sm: 0 2px 4px rgba(60, 40, 10, 0.09); --shadow-md: 0 4px 12px rgba(60, 40, 10, 0.12); --bg-color: var(--surface-primary); --text-color: var(--text-primary); --book-bg: var(--surface-elevated); --book-text: var(--text-primary); --book-heading: #1a0d05; --message-bg: var(--surface-inset); --input-bg: var(--surface-elevated); --panel-bg: var(--surface-elevated); --sidebar-bg: var(--surface-elevated); } /* ============================================================ THEME: NIGHT (true black — OLED / low-light mode) ============================================================ */ [data-theme="dark"] { --surface-primary: #000000; --surface-elevated: #0D0D0D; --surface-inset: #1A1A1A; --surface-overlay: rgba(0, 0, 0, 0.70); --text-primary: #F0F0F0; --text-secondary: #A0A0A0; --text-muted: #6E6E6E; --text-disabled: #3D3D3D; --text-inverse: #000000; --border-default: #2A2A2A; --border-subtle: #1A1A1A; --color-primary: #C4A76C; --color-primary-hover: #D4B87C; --color-primary-subtle: rgba(196, 167, 108, 0.12); --color-primary-subtle-hover: rgba(196, 167, 108, 0.18); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.55); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.70); --bg-color: #000000; --text-color: var(--text-primary); --border-color: var(--border-default); --book-bg: var(--surface-elevated); --book-text: var(--text-primary); --book-heading: #FFFFFF; --message-bg: var(--surface-inset); --input-bg: var(--surface-inset); --panel-bg: var(--surface-elevated); --sidebar-bg: var(--surface-elevated); --primary-color: var(--color-primary); --danger-color: #f87171; --secondary-color: #34d399; --color-error: #f87171; --color-success: #34d399; --color-warning: #fbbf24; --color-text: var(--text-primary); --color-text-secondary: var(--text-secondary); --color-text-muted: var(--text-muted); --color-text-disabled: var(--text-disabled); --color-text-inverse: var(--text-inverse); --color-bg: var(--surface-primary); --color-bg-elevated: var(--surface-elevated); --color-bg-subtle: var(--surface-inset); --color-bg-inset: #000000; --color-border: var(--border-default); --color-border-subtle: var(--border-subtle); --personalization-color: #fb923c; --color-personalized-bg: rgba(249, 115, 22, 0.10); --color-personalized-toggle-bg: linear-gradient(135deg, #78350f 0%, #451a03 100%); --color-personalized-toggle-border: #d97706; --color-voice-listening: #7DB46A; --color-voice-listening-subtle: rgba(125, 180, 106, 0.10); --color-voice-listening-border: #7DB46A; } /* ============================================================ DERIVED TOKENS: built from each theme's own colours. Declared on body as well as :root: themes set their colours on body[data-theme] (theme-manager.js), and a :root-only alias is computed once from the light defaults and inherited unthemed. That is why Menu stayed brown in warm (UX-AUDIT B3). ============================================================ */ :root, body { /* An edge at least 3:1 against the page in every theme (WCAG 1.4.11). */ --edge-strong: var(--text-muted); /* Bottom bar. Feedback is the beta's main ask, so it is the filled pill; Ask and Menu are quiet: page colour, text colour, strong edge (UX-AUDIT B1, B2, B4). */ --btn-filled-bg: var(--button-bg, var(--primary-color)); --btn-filled-text: var(--button-text, #fff); --btn-filled-border: var(--btn-filled-bg); --btn-quiet-bg: var(--bg-color); --btn-quiet-text: var(--text-color); --btn-quiet-border: var(--edge-strong); /* Sheets and the tiles and choices on them. The theme's page colour: the old --surface-primary is only themed for light, sepia and dark, so sheets were black on dark's navy page and grey-white in warm (UX-AUDIT M3). Tiles get --edge-strong as their edge (M3, F2, C2, S4). */ --surface-raised: var(--bg-color); }