/* buildwiththepack.com — design tokens. One layout, two skins. Every component reads these custom properties only. Skin is set by data-theme on : "dark" (Pack cosmic) or "light" (editorial). */ :root, [data-theme="dark"] { /* surfaces */ --bg: #05060f; --bg-2: #0a0e27; --panel: #11163a; --panel-edge: rgba(0, 240, 255, 0.2); /* text */ --text-strong: #ffffff; --text: #d8e1ff; --text-soft: #a0acd8; --text-faint: #7886b8; /* brand accents */ --accent: #00f0ff; --accent-2: #b400ff; --good: #00ff88; --warm: #ff7b00; /* structure */ --rule: rgba(120, 134, 184, 0.28); --rule-strong: rgba(0, 240, 255, 0.45); /* type */ --font-display: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-ui: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "Noto Sans Mono", ui-monospace, "SF Mono", Menlo, monospace; --display-weight: 900; --display-style: normal; /* component voices */ --kicker-color: var(--good); --kicker-font: var(--font-mono); --section-no-color: var(--accent); --btn-bg: linear-gradient(90deg, #00f0ff, #b400ff); --btn-text: #05060f; --btn-glow: 0 0 30px rgba(0, 240, 255, 0.27); --btn-ghost-edge: rgba(0, 240, 255, 0.33); --btn-ghost-text: var(--accent); --link: var(--accent); --headline-em-fill: linear-gradient(90deg, #00f0ff, #b400ff); --card-shadow: 0 20px 60px rgba(5, 6, 15, 0.53); --input-bg: #05060f; --input-edge: #2a3470; /* scene effects (dark only, light zeroes them) */ --fx-stars: 1; --fx-glow-a: rgba(180, 0, 255, 0.13); --fx-glow-b: rgba(0, 240, 255, 0.09); } [data-theme="light"] { /* surfaces */ --bg: #faf6ee; --bg-2: #f2ecdf; --panel: #f2ecdf; --panel-edge: #d9d2c4; /* text */ --text-strong: #1a1812; --text: #1a1812; --text-soft: #5c564a; --text-faint: #8d867a; /* brand accents */ --accent: #c2410c; --accent-2: #1a1812; --good: #c2410c; --warm: #c2410c; /* structure */ --rule: #d9d2c4; --rule-strong: #1a1812; /* type */ --font-display: Georgia, "Times New Roman", serif; --font-body: Georgia, "Times New Roman", serif; --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "Noto Sans Mono", ui-monospace, "SF Mono", Menlo, monospace; --display-weight: 500; --display-style: normal; /* component voices */ --kicker-color: #c2410c; --kicker-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --section-no-color: #c2410c; --btn-bg: #1a1812; --btn-text: #faf6ee; --btn-glow: none; --btn-ghost-edge: #1a1812; --btn-ghost-text: #1a1812; --link: #c2410c; --headline-em-fill: none; --card-shadow: 0 12px 36px rgba(26, 24, 18, 0.1); --input-bg: #ffffff; --input-edge: #d9d2c4; /* scene effects off */ --fx-stars: 0; --fx-glow-a: transparent; --fx-glow-b: transparent; }