/* ============================================================ Doorloom brand-website V2 — design tokens. The active preset is chosen server-side via from the brand's `theme` setting (see Brand::THEMES). Every other V2 style derives from these custom properties, so a preset swap restyles the whole site without further CSS. ============================================================ */ :root { /* default (light-default) */ --bg: #ffffff; --surface: #ffffff; --surface-2: #f7f7f7; --text: #222222; --text-2: #717171; --text-3: #b0b0b0; --line: #ebebeb; --line-2: #dddddd; --accent: #222222; --accent-ink: #000000; --accent-press: #000000; --blue: #2563eb; --green: #008489; --wa: #22b573; --font: 'Inter', -apple-system, system-ui, sans-serif; --r: 12px; --r-sm: 9px; --r-pill: 999px; --pad: 16px; --maxw: 1080px; --shadow: 0 1px 3px rgba(0, 0, 0, .05); --shadow-md: 0 8px 30px rgba(0, 0, 0, .12); /* derived tokens — auto-retint when the preset changes */ --shadow-soft: 0 1px 2px color-mix(in srgb, var(--accent) 10%, rgba(20, 20, 25, .05)); --shadow-card: 0 10px 34px color-mix(in srgb, var(--accent) 10%, rgba(20, 20, 25, .07)); --shadow-elevated: 0 24px 60px color-mix(in srgb, var(--accent) 12%, rgba(15, 15, 20, .22)); --border-subtle: color-mix(in srgb, var(--accent) 6%, var(--line)); --border-accent: color-mix(in srgb, var(--accent) 14%, var(--line-2)); --surface-header: color-mix(in srgb, var(--bg) 90%, transparent); --surface-footer: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 55%, var(--bg)), var(--bg)); --gradient-page: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, var(--bg)) 0, var(--bg) 520px); --gradient-accent: linear-gradient(135deg, color-mix(in srgb, var(--accent) 92%, #fff), var(--accent-press)); } :root[data-theme="dark-default"] { color-scheme: dark; --bg: #1a1a1a; --surface: #1f1f1f; --surface-2: #2a2a2a; --text: #f7f7f7; --text-2: #b0b0b0; --text-3: #8a8a8a; --line: #2e2e2e; --line-2: #3a3a3a; --accent: #5c5c5c; --accent-ink: #dadada; --accent-press: #6e6e6e; --blue: #5b8bff; --green: #00a699; } :root[data-theme="light-beaches"] { --bg: #ffffff; --surface: #ffffff; --surface-2: #f7f2ea; --text: #232020; --text-2: #6b7280; --text-3: #a6a29b; --line: #ece5da; --line-2: #ddd4c6; --accent: #e4674f; --accent-ink: #b84734; --accent-press: #cf5a44; --blue: #1f8fb0; --green: #1fae86; } :root[data-theme="dark-beaches"] { color-scheme: dark; --bg: #14110f; --surface: #1c1815; --surface-2: #241f1a; --text: #f4efe9; --text-2: #b3a79c; --text-3: #7c726a; --line: #2c2621; --line-2: #3a322c; --accent: #f07a5f; --accent-ink: #f6a793; --accent-press: #d96a50; --blue: #3da9c9; --green: #33c295; } :root[data-theme="light-mountains"] { --bg: #ffffff; --surface: #ffffff; --surface-2: #edf1f3; --text: #1f2a2e; --text-2: #5c6b72; --text-3: #9ba7ad; --line: #e2e8ea; --line-2: #cfd8db; --accent: #2f7d5b; --accent-ink: #215b42; --accent-press: #296e50; --blue: #3e7cb8; --green: #2f9e6e; } :root[data-theme="dark-mountains"] { color-scheme: dark; --bg: #0f1416; --surface: #161d20; --surface-2: #1d262a; --text: #eaf1f2; --text-2: #9db0b5; --text-3: #6b7c81; --line: #243033; --line-2: #2f3d40; --accent: #4fa97e; --accent-ink: #8fd3b0; --accent-press: #43946c; --blue: #5fa0d8; --green: #40b583; } :root[data-theme="light-cities"] { --bg: #ffffff; --surface: #ffffff; --surface-2: #f0f1f4; --text: #1b1e24; --text-2: #616772; --text-3: #9a9fa9; --line: #e5e7ec; --line-2: #d2d5dd; --accent: #2f6bff; --accent-ink: #2050c8; --accent-press: #295fe0; --blue: #2f6bff; --green: #28a76b; } :root[data-theme="dark-cities"] { color-scheme: dark; --bg: #0f1115; --surface: #161a20; --surface-2: #1d222a; --text: #edeff3; --text-2: #a0a6b0; --text-3: #6d737d; --line: #242a33; --line-2: #313845; --accent: #5b8bff; --accent-ink: #9db8ff; --accent-press: #4e7df0; --blue: #5b8bff; --green: #35c07e; } :root[data-theme="light-forests"] { --bg: #ffffff; --surface: #ffffff; --surface-2: #edf1e6; --text: #232a20; --text-2: #616b5a; --text-3: #9ea595; --line: #e4e8dc; --line-2: #d2d8c6; --accent: #3a6b3a; --accent-ink: #2a4f2a; --accent-press: #335f33; --blue: #4c8a7b; --green: #4e9a54; } :root[data-theme="dark-forests"] { color-scheme: dark; --bg: #111512; --surface: #181e18; --surface-2: #1f271f; --text: #edf2ea; --text-2: #a2b09a; --text-3: #6e7c68; --line: #252f25; --line-2: #333f31; --accent: #5fa85f; --accent-ink: #9ad09a; --accent-press: #4f934f; --blue: #66b0a0; --green: #63b569; } :root[data-theme="light-deserts"] { --bg: #ffffff; --surface: #ffffff; --surface-2: #f7f0e4; --text: #2a211b; --text-2: #6e6155; --text-3: #a89a8b; --line: #ede3d3; --line-2: #ded0bb; --accent: #c4622e; --accent-ink: #96471e; --accent-press: #b05628; --blue: #4e7c82; --green: #7e9a3e; } :root[data-theme="dark-deserts"] { color-scheme: dark; --bg: #161009; --surface: #1e160d; --surface-2: #261c12; --text: #f4ece0; --text-2: #bcaa95; --text-3: #847361; --line: #2e2317; --line-2: #3d2f1f; --accent: #e0824a; --accent-ink: #f0a878; --accent-press: #c86c36; --blue: #5e97a0; --green: #a6be55; }