/* ================================================================ Festive Activation Playbook: colour and font tokens One block per theme x mode. Every block defines the same names. Selected by data-theme / data-mode on ; :root falls back to Original dark so a page with no attributes renders the original design. ================================================================ */ :root, [data-theme="original"][data-mode="dark"] { color-scheme: dark; --bg: #0d0d0d; --bg-1: #141414; --bg-2: #1a1a1a; --bg-3: #222222; --border: rgba(255,255,255,0.07); --border-2: rgba(255,255,255,0.12); --border-3: rgba(255,255,255,0.18); --border-strong: rgba(255,255,255,0.35); --overlay-1: rgba(255,255,255,0.03); --overlay-2: rgba(255,255,255,0.05); --overlay-3: rgba(255,255,255,0.07); --overlay-4: rgba(255,255,255,0.12); --header-bg: color-mix(in srgb, var(--bg) 96%, transparent); --text: #ffffff; --muted: #888888; --dim: #555555; --accent: #c9a84c; --accent-hover: #d4b55a; --accent-dim: rgba(201,168,76,0.5); --text-on-accent: #0d0d0d; --teal: #4ecdc4; --pink: #e74c6b; --green: #27ae60; --purple: #9b59b6; --orange: #e07b2a; --lime: #8bc34a; --amber: #f5c242; --danger: #e74c3c; --green-bright: #50c878; } [data-theme="original"][data-mode="light"] { color-scheme: light; --bg: #f6f4ef; --bg-1: #ffffff; --bg-2: #f0ede6; --bg-3: #e8e4db; --border: rgba(0,0,0,0.08); --border-2: rgba(0,0,0,0.12); --border-3: rgba(0,0,0,0.18); --border-strong: rgba(0,0,0,0.3); --overlay-1: rgba(0,0,0,0.025); --overlay-2: rgba(0,0,0,0.05); --overlay-3: rgba(0,0,0,0.07); --overlay-4: rgba(0,0,0,0.11); --header-bg: color-mix(in srgb, var(--bg) 96%, transparent); --text: #1a1a1a; --muted: #6b6b6b; --dim: #9a9a9a; --accent: #9a7b2c; --accent-hover: #7f6522; --accent-dim: rgba(154,123,44,0.75); --text-on-accent: #ffffff; --teal: #1f9e96; --pink: #d13a5c; --green: #1e8e4e; --purple: #8e44ad; --orange: #c8681a; --lime: #6b9a1f; --amber: #c99a12; --danger: #c0392b; --green-bright: #2e9e5b; } [data-theme="nara"][data-mode="light"] { color-scheme: light; --bg: #fdf6eb; --bg-1: #ffffff; --bg-2: #f7eedf; --bg-3: #f1e6d3; --border: rgba(74,50,39,0.10); --border-2: rgba(74,50,39,0.16); --border-3: rgba(74,50,39,0.24); --border-strong: rgba(74,50,39,0.4); --overlay-1: rgba(74,50,39,0.03); --overlay-2: rgba(74,50,39,0.05); --overlay-3: rgba(74,50,39,0.08); --overlay-4: rgba(74,50,39,0.12); --header-bg: color-mix(in srgb, var(--bg) 96%, transparent); --text: #2c3338; --muted: #69727d; --dim: #9aa1a8; --accent: #ae6c4a; --accent-hover: #9a5d3f; --accent-dim: rgba(174,108,74,0.75); --text-on-accent: #ffffff; --teal: #3e7c7b; --pink: #b0524e; --green: #5b7f5a; --purple: #6e6284; --orange: #c1773a; --lime: #7e8f4a; --amber: #b8922f; --danger: #b03a2e; --green-bright: #5b7f5a; } [data-theme="nara"][data-mode="dark"] { color-scheme: dark; --bg: #1d2327; --bg-1: #242b30; --bg-2: #2c3338; --bg-3: #3f444b; --border: rgba(255,255,255,0.08); --border-2: rgba(255,255,255,0.13); --border-3: rgba(255,255,255,0.2); --border-strong: rgba(255,255,255,0.35); --overlay-1: rgba(255,255,255,0.03); --overlay-2: rgba(255,255,255,0.05); --overlay-3: rgba(255,255,255,0.07); --overlay-4: rgba(255,255,255,0.12); --header-bg: color-mix(in srgb, var(--bg) 96%, transparent); --text: #f0f0f1; --muted: #a7adb3; --dim: #69727d; --accent: #b29c76; --accent-hover: #c4ae88; --accent-dim: rgba(178,156,118,0.5); --text-on-accent: #1d2327; --teal: #6fb3b0; --pink: #d98a80; --green: #8fb48d; --purple: #a79bc0; --orange: #d9a06b; --lime: #b2c27c; --amber: #d4b472; --danger: #e07a6b; --green-bright: #8fb48d; } [data-theme="slate"][data-mode="dark"] { color-scheme: dark; --bg: #0f1218; --bg-1: #151a22; --bg-2: #1b212b; --bg-3: #242c38; --border: rgba(255,255,255,0.07); --border-2: rgba(255,255,255,0.12); --border-3: rgba(255,255,255,0.18); --border-strong: rgba(255,255,255,0.35); --overlay-1: rgba(255,255,255,0.03); --overlay-2: rgba(255,255,255,0.05); --overlay-3: rgba(255,255,255,0.07); --overlay-4: rgba(255,255,255,0.12); --header-bg: color-mix(in srgb, var(--bg) 96%, transparent); --text: #e8ecf2; --muted: #8f98a8; --dim: #5b6472; --accent: #8b9cff; --accent-hover: #a3b0ff; --accent-dim: rgba(139,156,255,0.5); --text-on-accent: #0f1218; --teal: #4fd1c5; --pink: #f06a8a; --green: #48c78e; --purple: #b18cff; --orange: #f0a05a; --lime: #a3d55f; --amber: #f5c65a; --danger: #f26d6d; --green-bright: #62d79b; } [data-theme="slate"][data-mode="light"] { color-scheme: light; --bg: #f4f6fa; --bg-1: #ffffff; --bg-2: #eceff5; --bg-3: #e1e6ee; --border: rgba(27,34,48,0.08); --border-2: rgba(27,34,48,0.12); --border-3: rgba(27,34,48,0.18); --border-strong: rgba(27,34,48,0.3); --overlay-1: rgba(27,34,48,0.025); --overlay-2: rgba(27,34,48,0.05); --overlay-3: rgba(27,34,48,0.07); --overlay-4: rgba(27,34,48,0.11); --header-bg: color-mix(in srgb, var(--bg) 96%, transparent); --text: #1b2230; --muted: #5f6b7e; --dim: #98a2b3; --accent: #4f5bd5; --accent-hover: #3f4ab8; --accent-dim: rgba(79,91,213,0.75); --text-on-accent: #ffffff; --teal: #1c948a; --pink: #d0405f; --green: #1f9a5f; --purple: #7c4dd6; --orange: #d97a1f; --lime: #6f9a1f; --amber: #c9950f; --danger: #d64545; --green-bright: #2aa86a; } [data-theme="oasis"][data-mode="dark"] { color-scheme: dark; --bg: #0e1a16; --bg-1: #14231e; --bg-2: #1a2d27; --bg-3: #243a32; --border: rgba(255,255,255,0.07); --border-2: rgba(255,255,255,0.12); --border-3: rgba(255,255,255,0.18); --border-strong: rgba(255,255,255,0.35); --overlay-1: rgba(255,255,255,0.03); --overlay-2: rgba(255,255,255,0.05); --overlay-3: rgba(255,255,255,0.07); --overlay-4: rgba(255,255,255,0.12); --header-bg: color-mix(in srgb, var(--bg) 96%, transparent); --text: #eef5f1; --muted: #93a89e; --dim: #5f746a; --accent: #86d3a8; --accent-hover: #9fe0bb; --accent-dim: rgba(134,211,168,0.5); --text-on-accent: #0e1a16; --teal: #5fc9c0; --pink: #ea7f95; --green: #6fcf97; --purple: #b39ddb; --orange: #f0a86a; --lime: #b7d66b; --amber: #e6c76a; --danger: #ee7b6a; --green-bright: #86d3a8; } [data-theme="oasis"][data-mode="light"] { color-scheme: light; --bg: #f4f8f4; --bg-1: #ffffff; --bg-2: #e9f1ea; --bg-3: #dde9df; --border: rgba(29,42,36,0.08); --border-2: rgba(29,42,36,0.12); --border-3: rgba(29,42,36,0.18); --border-strong: rgba(29,42,36,0.3); --overlay-1: rgba(29,42,36,0.025); --overlay-2: rgba(29,42,36,0.05); --overlay-3: rgba(29,42,36,0.07); --overlay-4: rgba(29,42,36,0.11); --header-bg: color-mix(in srgb, var(--bg) 96%, transparent); --text: #1d2a24; --muted: #5f7368; --dim: #98aaa0; --accent: #2a7f5f; --accent-hover: #226a4f; --accent-dim: rgba(42,127,95,0.75); --text-on-accent: #ffffff; --teal: #1f8f88; --pink: #c94f6a; --green: #2f8f6b; --purple: #7a5fb0; --orange: #c9772a; --lime: #7a9a2a; --amber: #b8931f; --danger: #c0473a; --green-bright: #3aa97e; } [data-theme="mono"][data-mode="dark"] { color-scheme: dark; --bg: #0a0a0a; --bg-1: #121212; --bg-2: #181818; --bg-3: #222222; --border: rgba(255,255,255,0.08); --border-2: rgba(255,255,255,0.14); --border-3: rgba(255,255,255,0.22); --border-strong: rgba(255,255,255,0.4); --overlay-1: rgba(255,255,255,0.03); --overlay-2: rgba(255,255,255,0.05); --overlay-3: rgba(255,255,255,0.07); --overlay-4: rgba(255,255,255,0.12); --header-bg: color-mix(in srgb, var(--bg) 96%, transparent); --text: #f2f2f2; --muted: #9a9a9a; --dim: #5e5e5e; --accent: #f2f2f2; --accent-hover: #ffffff; --accent-dim: rgba(242,242,242,0.5); --text-on-accent: #0a0a0a; --teal: #7fc4bd; --pink: #e08a9c; --green: #8fc9a0; --purple: #b5a6d6; --orange: #e0aa78; --lime: #b9c98a; --amber: #d9c27a; --danger: #e07f7f; --green-bright: #8fc9a0; } [data-theme="mono"][data-mode="light"] { color-scheme: light; --bg: #fafafa; --bg-1: #ffffff; --bg-2: #f0f0f0; --bg-3: #e6e6e6; --border: rgba(0,0,0,0.08); --border-2: rgba(0,0,0,0.12); --border-3: rgba(0,0,0,0.18); --border-strong: rgba(0,0,0,0.3); --overlay-1: rgba(0,0,0,0.025); --overlay-2: rgba(0,0,0,0.05); --overlay-3: rgba(0,0,0,0.07); --overlay-4: rgba(0,0,0,0.11); --header-bg: color-mix(in srgb, var(--bg) 96%, transparent); --text: #111111; --muted: #666666; --dim: #9a9a9a; --accent: #111111; --accent-hover: #333333; --accent-dim: rgba(17,17,17,0.75); --text-on-accent: #ffffff; --teal: #2a7f79; --pink: #b84a63; --green: #2f7d4f; --purple: #6a5296; --orange: #b8692a; --lime: #6a8a2a; --amber: #a68317; --danger: #b33a3a; --green-bright: #3a8f5c; } /* Font blocks share specificity with each other; the Nara block must stay after the Original block. */ :root, [data-theme="original"] { --serif: 'Cormorant Garamond', 'Palatino Linotype', Georgia, serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } [data-theme="nara"] { --serif: 'Playfair Display', 'Palatino Linotype', Georgia, serif; --sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } [data-theme="slate"] { --serif: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } [data-theme="oasis"] { --serif: 'Lora', 'Palatino Linotype', Georgia, serif; --sans: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } [data-theme="mono"] { --serif: 'DM Serif Display', 'Palatino Linotype', Georgia, serif; --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }