/* =================================================================== Words of Life — global styles A warm, contemplative devotional journal. Two design layers live on : data-theme="light|dark" (existing theme setting) data-mood="dawn|hearth|woods|dusk" (new mood setting) Moods dawn — morning light: cream paper, honey, soft sage (default) hearth — evening fire: firelit parchment, amber, ember woods — forest path: misty sage, moss, warm bark dusk — night devotion: twilight indigo, candlelight =================================================================== */ /* --------------------------------------------------------------------- Base tokens: shape, rhythm, typography, motion --------------------------------------------------------------------- */ :root { --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 24px; --spacing-2xl: 32px; --radius-sm: 10px; --radius-md: 16px; --radius-pill: 999px; --font-serif: 'Lora', Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif; --font-display: 'Cormorant Garamond', Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif; --btn-transition: background-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, transform 0.15s ease, border-color 0.25s ease; } /* --------------------------------------------------------------------- Palette — Dawn / Morning Light (default) --------------------------------------------------------------------- */ :root { --primary: #8a5937; --primary-hover: #70482b; --accent: #d9a441; --accent-hover: #c08a2d; --on-primary: #fffaf0; --on-accent: #2a1c0c; --background: #f5efe3; --surface: #fdfaf2; --surface-elevated: #fffdf7; --text: #40342a; --text-muted: #776a57; --border: #e5dac3; --danger: #b03e33; --success: #55703f; --glow: rgba(217, 164, 65, 0.16); --app-bg: radial-gradient(1100px 700px at 16% -10%, var(--glow), transparent 55%), var(--background); --shadow-card: 0 1px 2px rgba(92, 68, 38, 0.06), 0 8px 22px -10px rgba(92, 68, 38, 0.16); --shadow-card-hover: 0 12px 30px -10px rgba(92, 68, 38, 0.24), 0 4px 10px rgba(92, 68, 38, 0.08); --shadow-modal: 0 24px 60px -12px rgba(46, 32, 16, 0.35), 0 8px 20px rgba(46, 32, 16, 0.12); --shadow-glow-accent: 0 8px 22px -6px rgba(217, 164, 65, 0.6); --btn-elevation: 0 1px 2px rgba(92, 68, 38, 0.14); --btn-elevation-hover: 0 6px 16px -4px rgba(92, 68, 38, 0.3); --btn-elevation-active: 0 1px 2px rgba(92, 68, 38, 0.1); --btn-focus-ring: 0 0 0 3px var(--surface), 0 0 0 5px var(--primary); --overlay-hover: rgba(80, 58, 32, 0.05); --overlay-focus: rgba(80, 58, 32, 0.09); --focus-ring-primary: rgba(138, 89, 55, 0.28); --overlay-primary-tint: rgba(138, 89, 55, 0.09); --backdrop: rgba(45, 33, 20, 0.45); --selection: rgba(217, 164, 65, 0.3); } html[data-theme="dark"] { --primary: #d9ab63; --primary-hover: #e3ba77; --accent: #e0ac47; --accent-hover: #eab958; --on-primary: #241a0e; --on-accent: #241a0e; --background: #1b1712; --surface: #241e16; --surface-elevated: #2d251b; --text: #ece2d0; --text-muted: #a89a83; --border: #3c3122; --danger: #cf5a47; --success: #7fa067; --glow: rgba(217, 171, 99, 0.12); --app-bg: radial-gradient(1100px 700px at 16% -10%, var(--glow), transparent 55%), var(--background); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.25), 0 10px 24px -10px rgba(0, 0, 0, 0.5); --shadow-card-hover: 0 14px 34px -10px rgba(0, 0, 0, 0.55); --shadow-modal: 0 24px 60px -12px rgba(0, 0, 0, 0.65); --shadow-glow-accent: 0 8px 22px -6px rgba(217, 171, 99, 0.4); --btn-elevation: 0 1px 2px rgba(0, 0, 0, 0.3); --btn-elevation-hover: 0 6px 16px -4px rgba(0, 0, 0, 0.45); --btn-elevation-active: 0 1px 2px rgba(0, 0, 0, 0.2); --btn-focus-ring: 0 0 0 3px var(--surface), 0 0 0 5px var(--primary); --overlay-hover: rgba(255, 245, 230, 0.06); --overlay-focus: rgba(255, 245, 230, 0.1); --focus-ring-primary: rgba(217, 171, 99, 0.35); --overlay-primary-tint: rgba(217, 171, 99, 0.14); --backdrop: rgba(10, 8, 5, 0.6); --selection: rgba(217, 171, 99, 0.32); } /* --------------------------------------------------------------------- Palette — Hearth / Evening Fire --------------------------------------------------------------------- */ html[data-mood="hearth"] { --primary: #8a3f21; --primary-hover: #71321a; --accent: #d97a2e; --accent-hover: #c26824; --on-primary: #fff8ef; --on-accent: #2b1809; --background: #f2e7d3; --surface: #faf2e2; --surface-elevated: #fdf7ea; --text: #31261c; --text-muted: #76614a; --border: #e0cfae; --danger: #b3402e; --success: #5f7a4a; --glow: rgba(217, 122, 46, 0.18); --app-bg: radial-gradient(1100px 700px at 16% -10%, var(--glow), transparent 55%), var(--background); --shadow-card: 0 1px 2px rgba(84, 52, 28, 0.07), 0 8px 22px -10px rgba(84, 52, 28, 0.18); --shadow-card-hover: 0 12px 30px -10px rgba(84, 52, 28, 0.28); --shadow-modal: 0 24px 60px -12px rgba(40, 24, 12, 0.38); --shadow-glow-accent: 0 8px 22px -6px rgba(217, 122, 46, 0.65); --btn-elevation: 0 1px 2px rgba(84, 52, 28, 0.16); --btn-elevation-hover: 0 6px 16px -4px rgba(84, 52, 28, 0.32); --overlay-hover: rgba(84, 48, 24, 0.05); --overlay-focus: rgba(84, 48, 24, 0.09); --focus-ring-primary: rgba(138, 63, 33, 0.3); --overlay-primary-tint: rgba(138, 63, 33, 0.1); --backdrop: rgba(43, 28, 14, 0.48); --selection: rgba(217, 122, 46, 0.3); } html[data-mood="hearth"][data-theme="dark"] { --primary: #e08a3c; --primary-hover: #eb9c51; --accent: #e5852f; --accent-hover: #f09444; --on-primary: #1c130b; --on-accent: #1c130b; --background: #17110c; --surface: #221811; --surface-elevated: #2b1f16; --text: #f0e2cf; --text-muted: #a99073; --border: #40301f; --danger: #d05a42; --success: #6f9356; --glow: rgba(224, 138, 60, 0.13); --app-bg: radial-gradient(1100px 700px at 16% -10%, var(--glow), transparent 55%), var(--background); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 24px -10px rgba(0, 0, 0, 0.55); --shadow-card-hover: 0 14px 34px -10px rgba(0, 0, 0, 0.6); --shadow-modal: 0 24px 60px -12px rgba(0, 0, 0, 0.7); --shadow-glow-accent: 0 8px 22px -6px rgba(224, 138, 60, 0.45); --btn-elevation: 0 1px 2px rgba(0, 0, 0, 0.35); --btn-elevation-hover: 0 6px 16px -4px rgba(0, 0, 0, 0.5); --overlay-hover: rgba(255, 240, 220, 0.06); --overlay-focus: rgba(255, 240, 220, 0.1); --focus-ring-primary: rgba(224, 138, 60, 0.38); --overlay-primary-tint: rgba(224, 138, 60, 0.15); --backdrop: rgba(8, 5, 3, 0.62); --selection: rgba(224, 138, 60, 0.34); } /* --------------------------------------------------------------------- Palette — Woods / Forest Path --------------------------------------------------------------------- */ html[data-mood="woods"] { --primary: #4e6b3f; --primary-hover: #3f5833; --accent: #b3894c; --accent-hover: #9c7538; --on-primary: #f5f9ef; --on-accent: #251708; --background: #eef0e4; --surface: #fafbf3; --surface-elevated: #fefff9; --text: #2f3527; --text-muted: #6c745d; --border: #dbe0cd; --danger: #a84a38; --success: #4f7d4a; --glow: rgba(179, 137, 76, 0.16); --app-bg: radial-gradient(1100px 700px at 16% -10%, var(--glow), transparent 55%), var(--background); --shadow-card: 0 1px 2px rgba(50, 62, 40, 0.07), 0 8px 22px -10px rgba(50, 62, 40, 0.16); --shadow-card-hover: 0 12px 30px -10px rgba(50, 62, 40, 0.26); --shadow-modal: 0 24px 60px -12px rgba(30, 40, 24, 0.36); --shadow-glow-accent: 0 8px 22px -6px rgba(179, 137, 76, 0.6); --btn-elevation: 0 1px 2px rgba(50, 62, 40, 0.15); --btn-elevation-hover: 0 6px 16px -4px rgba(50, 62, 40, 0.3); --overlay-hover: rgba(50, 62, 40, 0.05); --overlay-focus: rgba(50, 62, 40, 0.09); --focus-ring-primary: rgba(78, 107, 63, 0.3); --overlay-primary-tint: rgba(78, 107, 63, 0.1); --backdrop: rgba(28, 36, 24, 0.46); --selection: rgba(179, 137, 76, 0.3); } html[data-mood="woods"][data-theme="dark"] { --primary: #9cb376; --primary-hover: #adc289; --accent: #cfa95f; --accent-hover: #dab776; --on-primary: #161b12; --on-accent: #1d1508; --background: #141813; --surface: #1d231a; --surface-elevated: #252c21; --text: #e4e6d6; --text-muted: #97a08a; --border: #333c2c; --danger: #c96a4e; --success: #79a063; --glow: rgba(156, 179, 118, 0.1); --app-bg: radial-gradient(1100px 700px at 16% -10%, var(--glow), transparent 55%), var(--background); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 24px -10px rgba(0, 0, 0, 0.55); --shadow-card-hover: 0 14px 34px -10px rgba(0, 0, 0, 0.6); --shadow-modal: 0 24px 60px -12px rgba(0, 0, 0, 0.68); --shadow-glow-accent: 0 8px 22px -6px rgba(207, 169, 95, 0.4); --btn-elevation: 0 1px 2px rgba(0, 0, 0, 0.35); --btn-elevation-hover: 0 6px 16px -4px rgba(0, 0, 0, 0.5); --overlay-hover: rgba(235, 240, 220, 0.055); --overlay-focus: rgba(235, 240, 220, 0.1); --focus-ring-primary: rgba(156, 179, 118, 0.36); --overlay-primary-tint: rgba(156, 179, 118, 0.14); --backdrop: rgba(6, 8, 6, 0.62); --selection: rgba(156, 179, 118, 0.32); } /* --------------------------------------------------------------------- Palette — Dusk / Night Devotion --------------------------------------------------------------------- */ html[data-mood="dusk"] { --primary: #5b5fa6; --primary-hover: #4a4e94; --accent: #d98d4a; --accent-hover: #c47a38; --on-primary: #fbfaff; --on-accent: #241207; --background: #f0edea; --surface: #faf9f7; --surface-elevated: #fffefe; --text: #34314a; --text-muted: #74708b; --border: #e1dcd8; --danger: #b04038; --success: #54705c; --glow: rgba(217, 141, 74, 0.15); --app-bg: radial-gradient(1100px 700px at 16% -10%, var(--glow), transparent 55%), var(--background); --shadow-card: 0 1px 2px rgba(40, 38, 70, 0.07), 0 8px 22px -10px rgba(40, 38, 70, 0.16); --shadow-card-hover: 0 12px 30px -10px rgba(40, 38, 70, 0.26); --shadow-modal: 0 24px 60px -12px rgba(30, 28, 60, 0.36); --shadow-glow-accent: 0 8px 22px -6px rgba(217, 141, 74, 0.6); --btn-elevation: 0 1px 2px rgba(40, 38, 70, 0.15); --btn-elevation-hover: 0 6px 16px -4px rgba(40, 38, 70, 0.3); --overlay-hover: rgba(52, 49, 74, 0.05); --overlay-focus: rgba(52, 49, 74, 0.09); --focus-ring-primary: rgba(91, 95, 166, 0.28); --overlay-primary-tint: rgba(91, 95, 166, 0.09); --backdrop: rgba(34, 30, 60, 0.46); --selection: rgba(217, 141, 74, 0.3); } html[data-mood="dusk"][data-theme="dark"] { --primary: #a99cd6; --primary-hover: #bcb0e2; --accent: #e89a55; --accent-hover: #f0aa6a; --on-primary: #191622; --on-accent: #22120a; --background: #14131f; --surface: #1d1b2c; --surface-elevated: #252237; --text: #e8e3f4; --text-muted: #9b93b8; --border: #362f4d; --danger: #d2685a; --success: #759b7e; --glow: rgba(169, 156, 214, 0.11); --app-bg: radial-gradient(1100px 700px at 16% -10%, var(--glow), transparent 55%), var(--background); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 24px -10px rgba(0, 0, 0, 0.55); --shadow-card-hover: 0 14px 34px -10px rgba(0, 0, 0, 0.6); --shadow-modal: 0 24px 60px -12px rgba(0, 0, 0, 0.68); --shadow-glow-accent: 0 8px 22px -6px rgba(232, 154, 85, 0.42); --btn-elevation: 0 1px 2px rgba(0, 0, 0, 0.35); --btn-elevation-hover: 0 6px 16px -4px rgba(0, 0, 0, 0.5); --overlay-hover: rgba(240, 238, 252, 0.055); --overlay-focus: rgba(240, 238, 252, 0.1); --focus-ring-primary: rgba(169, 156, 214, 0.36); --overlay-primary-tint: rgba(169, 156, 214, 0.14); --backdrop: rgba(8, 7, 16, 0.62); --selection: rgba(232, 154, 85, 0.32); } /* --------------------------------------------------------------------- Base elements --------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { margin: 0; font-family: var(--font-serif); font-size: 15px; line-height: 1.55; color: var(--text); background: var(--app-bg); background-attachment: fixed; transition: background-color 0.4s ease, color 0.4s ease; } #root { min-height: 100vh; display: flex; flex-direction: column; } .main-content { flex: 1; display: flex; flex-direction: column; min-height: 0; } ::selection { background: var(--selection); color: var(--text); } /* --------------------------------------------------------------------- Buttons --------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 26px; font: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0.02em; border: none; border-radius: var(--radius-pill); cursor: pointer; background: var(--primary); color: var(--on-primary); box-shadow: var(--btn-elevation); transition: var(--btn-transition); } .btn:hover:not(:disabled) { background: var(--primary-hover); box-shadow: var(--btn-elevation-hover); transform: translateY(-1px); } .btn:active:not(:disabled) { box-shadow: var(--btn-elevation-active); transform: translateY(0); } .btn:focus-visible { outline: none; box-shadow: var(--btn-focus-ring); } .btn:disabled { opacity: 0.38; cursor: not-allowed; box-shadow: none; } .btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: none; } .btn-ghost:hover:not(:disabled) { background: var(--overlay-hover); border-color: var(--border); transform: none; } .btn-ghost:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring-primary); } .btn-text { background: transparent; color: var(--primary); padding: 0 14px; box-shadow: none; } .btn-text:hover:not(:disabled) { background: var(--overlay-primary-tint); } .btn-text:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring-primary); } .btn-icon { width: 44px; min-height: 44px; padding: 0; background: transparent; color: var(--text); border-radius: 50%; box-shadow: none; } .btn-icon:hover:not(:disabled) { background: var(--overlay-hover); } .btn-icon:focus-visible { outline: none; background: var(--overlay-focus); } /* Material-style icon buttons (app bar actions, delete, etc.) */ .md-icon-button { position: relative; width: 48px; height: 48px; padding: 0; border: none; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; transition: background-color 0.2s ease, color 0.2s ease; } .md-icon-button::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: currentColor; opacity: 0; transition: opacity 0.2s ease; } .md-icon-button:hover::before { opacity: 0.08; } .md-icon-button:focus-visible::before { opacity: 0.14; } .md-icon-button:active::before { opacity: 0.14; } .md-icon-button svg { width: 24px; height: 24px; position: relative; z-index: 1; } .btn-danger { background: var(--danger); color: #ffffff; box-shadow: var(--btn-elevation); } .btn-danger:hover:not(:disabled) { filter: brightness(0.94); box-shadow: var(--btn-elevation-hover); } .btn-danger:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--danger); } /* --------------------------------------------------------------------- Cards --------------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--spacing-lg); } .card-clickable { cursor: pointer; transition: box-shadow 0.25s ease, transform 0.2s ease, border-color 0.25s ease; } .card-clickable:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); } /* --------------------------------------------------------------------- Inputs --------------------------------------------------------------------- */ input[type="text"], input[type="email"], input[type="search"], textarea { font: inherit; font-size: 15px; padding: 11px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); background: var(--surface); transition: border-color 0.2s ease, box-shadow 0.2s ease; } input:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring-primary); } ::placeholder { color: var(--text-muted); opacity: 1; } /* Warm range sliders */ input[type="range"] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: var(--radius-pill); background: var(--border); outline-offset: 4px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: none; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); cursor: pointer; transition: transform 0.15s ease; } input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); } input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: none; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); cursor: pointer; } /* Links */ a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; }