/* ========================================================================== PET SCION — Breed Theme System Each theme is light-based and inspired by a real dog breed's palette. Switchable via [data-theme="..."] on the element. ========================================================================== */ /* --------- Defaults (shared across all themes) --------- */ :root { --radius-lg: 20px; --radius-md: 14px; --radius-sm: 10px; --transition: 0.3s ease; } /* ╔═════════════════ GOLDEN LAB (default) ═════════════════╗ */ :root, [data-theme="golden"] { --bg-primary: #fbf5e7; --bg-secondary: #ffffff; --bg-accent: #fff4dc; --bg-pattern: url("data:image/svg+xml;utf8,"); --text-primary: #2a1f15; --text-secondary: #6b5c4a; --text-gradient: linear-gradient(135deg, #3a2817 0%, #b57818 100%); --accent: #b57818; --accent-hover: #8f5a0b; --on-accent: #fffbed; --border: #ece1c8; --border-accent: #e2c789; --shadow-accent: rgba(181, 120, 24, 0.22); --shadow-soft: rgba(42, 31, 21, 0.08); --nav-bg: rgba(251, 245, 231, 0.82); --footer-bg: #fff9e8; --footer-text: #6b5c4a; --hero-bg: linear-gradient(135deg, #fff4dc 0%, #ffe9b4 45%, #f6d08a 100%); --hero-pattern: var(--bg-pattern); --hero-overlay: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.6), transparent 60%); --hero-tile-1: linear-gradient(135deg, #ffe4a0 0%, #f6c964 100%); --hero-tile-1-fg: #5a3f0f; --hero-tile-2: linear-gradient(135deg, #ffffff 0%, #fff8e2 100%); --hero-tile-2-fg: #3a2817; --hero-tile-3: linear-gradient(135deg, #3a2817 0%, #6b4421 100%); --hero-tile-3-fg: #fff4dc; --hero-tile-4: linear-gradient(135deg, #fef0c1 0%, #fcd77a 100%); --hero-tile-4-fg: #5a3f0f; --cta-pattern: var(--bg-pattern); } /* ╔═════════════════ DALMATIAN ═════════════════╗ */ [data-theme="dalmatian"] { --bg-primary: #fafafa; --bg-secondary: #ffffff; --bg-accent: #f1f1f1; --bg-pattern: url("data:image/svg+xml;utf8,"); --text-primary: #111111; --text-secondary: #555555; --text-gradient: linear-gradient(135deg, #111 0%, #dc2626 100%); --accent: #111111; --accent-hover: #dc2626; --on-accent: #ffffff; --border: #e5e5e5; --border-accent: #cfcfcf; --shadow-accent: rgba(17, 17, 17, 0.18); --shadow-soft: rgba(17, 17, 17, 0.08); --nav-bg: rgba(255, 255, 255, 0.88); --footer-bg: #f5f5f5; --footer-text: #555555; --hero-bg: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%); --hero-pattern: var(--bg-pattern); --hero-overlay: radial-gradient(circle at 20% 80%, rgba(220,38,38,0.07), transparent 60%); --hero-tile-1: #111111; --hero-tile-1-fg: #ffffff; --hero-tile-2: #ffffff; --hero-tile-2-fg: #111111; --hero-tile-3: #ffffff; --hero-tile-3-fg: #111111; --hero-tile-4: #dc2626; --hero-tile-4-fg: #ffffff; --cta-pattern: var(--bg-pattern); } /* ╔═════════════════ HUSKY ═════════════════╗ */ [data-theme="husky"] { --bg-primary: #f3f6fa; --bg-secondary: #ffffff; --bg-accent: #e6edf6; --bg-pattern: url("data:image/svg+xml;utf8,"); --text-primary: #15253f; --text-secondary: #566478; --text-gradient: linear-gradient(135deg, #15253f 0%, #1e5bb5 100%); --accent: #1e5bb5; --accent-hover: #164481; --on-accent: #ffffff; --border: #d7e0ec; --border-accent: #b7c7df; --shadow-accent: rgba(30, 91, 181, 0.22); --shadow-soft: rgba(21, 37, 63, 0.08); --nav-bg: rgba(243, 246, 250, 0.85); --footer-bg: #eaf0f7; --footer-text: #566478; --hero-bg: linear-gradient(135deg, #eaf1fb 0%, #d0e0f4 50%, #9fbfe6 100%); --hero-pattern: var(--bg-pattern); --hero-overlay: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.6), transparent 55%); --hero-tile-1: linear-gradient(135deg, #1e5bb5 0%, #4d86d9 100%); --hero-tile-1-fg: #ffffff; --hero-tile-2: linear-gradient(135deg, #ffffff 0%, #e2ecf9 100%); --hero-tile-2-fg: #15253f; --hero-tile-3: linear-gradient(135deg, #d9e6f6 0%, #b1c8e6 100%); --hero-tile-3-fg: #15253f; --hero-tile-4: linear-gradient(135deg, #15253f 0%, #2c4366 100%); --hero-tile-4-fg: #e2ecf9; --cta-pattern: var(--bg-pattern); } /* ╔═════════════════ BORDER COLLIE ═════════════════╗ */ [data-theme="collie"] { --bg-primary: #f7f5f1; --bg-secondary: #ffffff; --bg-accent: #ece8e0; --bg-pattern: url("data:image/svg+xml;utf8,"); --text-primary: #1a1a1a; --text-secondary: #5a5046; --text-gradient: linear-gradient(135deg, #1a1a1a 0%, #b17a4e 100%); --accent: #b17a4e; --accent-hover: #7a5333; --on-accent: #fffaf2; --border: #dcd5c8; --border-accent: #b7a98f; --shadow-accent: rgba(177, 122, 78, 0.2); --shadow-soft: rgba(26, 26, 26, 0.08); --nav-bg: rgba(247, 245, 241, 0.85); --footer-bg: #eee8dc; --footer-text: #5a5046; --hero-bg: linear-gradient(135deg, #f9f5ed 0%, #e8e0d0 60%, #1a1a1a 260%); --hero-pattern: var(--bg-pattern); --hero-overlay: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.55), transparent 55%); --hero-tile-1: linear-gradient(135deg, #1a1a1a 0%, #3a3a3a 100%); --hero-tile-1-fg: #ffffff; --hero-tile-2: linear-gradient(135deg, #ffffff 0%, #f4f0e5 100%); --hero-tile-2-fg: #1a1a1a; --hero-tile-3: linear-gradient(135deg, #c69260 0%, #b17a4e 100%); --hero-tile-3-fg: #fffaf2; --hero-tile-4: linear-gradient(135deg, #ede3cf 0%, #ddd0b4 100%); --hero-tile-4-fg: #5a3f23; --cta-pattern: var(--bg-pattern); } /* ╔═════════════════ POODLE (BLUSH) ═════════════════╗ */ [data-theme="poodle"] { --bg-primary: #fdf6f2; --bg-secondary: #ffffff; --bg-accent: #fbe8de; --bg-pattern: url("data:image/svg+xml;utf8,"); --text-primary: #3a2428; --text-secondary: #7a5863; --text-gradient: linear-gradient(135deg, #3a2428 0%, #c47a7a 100%); --accent: #c47a7a; --accent-hover: #a05a5a; --on-accent: #fffafb; --border: #f0d8d0; --border-accent: #e6b6b0; --shadow-accent: rgba(196, 122, 122, 0.22); --shadow-soft: rgba(58, 36, 40, 0.06); --nav-bg: rgba(253, 246, 242, 0.85); --footer-bg: #fbeae2; --footer-text: #7a5863; --hero-bg: linear-gradient(135deg, #fff3ec 0%, #fbd6c6 60%, #f0a89a 100%); --hero-pattern: var(--bg-pattern); --hero-overlay: radial-gradient(circle at 80% 30%, rgba(255,255,255,0.6), transparent 55%); --hero-tile-1: linear-gradient(135deg, #f8bfb7 0%, #e89a95 100%); --hero-tile-1-fg: #3a2428; --hero-tile-2: linear-gradient(135deg, #ffffff 0%, #fdecdf 100%); --hero-tile-2-fg: #3a2428; --hero-tile-3: linear-gradient(135deg, #3a2428 0%, #6a3f49 100%); --hero-tile-3-fg: #fcdfd6; --hero-tile-4: linear-gradient(135deg, #ffd8cd 0%, #f7b4a6 100%); --hero-tile-4-fg: #6a3f49; --cta-pattern: var(--bg-pattern); } /* ╔═════════════════ GERMAN SHEPHERD (SHEPHERD) ═════════════════╗ */ [data-theme="shepherd"] { --bg-primary: #f9efe3; --bg-secondary: #ffffff; --bg-accent: #f2e1c8; --bg-pattern: url("data:image/svg+xml;utf8,"); --text-primary: #2a1a0e; --text-secondary: #6b4a2f; --text-gradient: linear-gradient(135deg, #2a1a0e 0%, #a4612b 100%); --accent: #a4612b; --accent-hover: #7a4318; --on-accent: #fff8ec; --border: #ead9bc; --border-accent: #d0b689; --shadow-accent: rgba(164, 97, 43, 0.22); --shadow-soft: rgba(42, 26, 14, 0.08); --nav-bg: rgba(249, 239, 227, 0.85); --footer-bg: #f3e2c4; --footer-text: #6b4a2f; --hero-bg: linear-gradient(135deg, #fbecd0 0%, #e9c58a 50%, #7a4318 180%); --hero-pattern: var(--bg-pattern); --hero-overlay: radial-gradient(circle at 25% 70%, rgba(255,255,255,0.55), transparent 55%); --hero-tile-1: linear-gradient(135deg, #2a1a0e 0%, #5a3620 100%); --hero-tile-1-fg: #f9efe3; --hero-tile-2: linear-gradient(135deg, #ffffff 0%, #f9ebd2 100%); --hero-tile-2-fg: #2a1a0e; --hero-tile-3: linear-gradient(135deg, #e5bc7a 0%, #c58e3c 100%); --hero-tile-3-fg: #2a1a0e; --hero-tile-4: linear-gradient(135deg, #f7dcb3 0%, #efc886 100%); --hero-tile-4-fg: #5a3620; --cta-pattern: var(--bg-pattern); } /* ╔═════════════════ BEAGLE ═════════════════╗ */ [data-theme="beagle"] { --bg-primary: #fdf6e4; --bg-secondary: #ffffff; --bg-accent: #f6e6c2; --bg-pattern: url("data:image/svg+xml;utf8,"); --text-primary: #2a150a; --text-secondary: #6a4a35; --text-gradient: linear-gradient(135deg, #2a150a 0%, #c99a62 100%); --accent: #8c4a25; --accent-hover: #5c2b1a; --on-accent: #fff6e0; --border: #ecd8a9; --border-accent: #cfa66b; --shadow-accent: rgba(140, 74, 37, 0.22); --shadow-soft: rgba(42, 21, 10, 0.08); --nav-bg: rgba(253, 246, 228, 0.85); --footer-bg: #f7e9c7; --footer-text: #6a4a35; --hero-bg: linear-gradient(135deg, #fff4d1 0%, #efc890 50%, #8c4a25 220%); --hero-pattern: var(--bg-pattern); --hero-overlay: radial-gradient(circle at 65% 35%, rgba(255,255,255,0.58), transparent 55%); --hero-tile-1: linear-gradient(135deg, #5c2b1a 0%, #8c4a25 100%); --hero-tile-1-fg: #fff4d1; --hero-tile-2: linear-gradient(135deg, #ffffff 0%, #fdefc8 100%); --hero-tile-2-fg: #2a150a; --hero-tile-3: linear-gradient(135deg, #e5b670 0%, #c99a62 100%); --hero-tile-3-fg: #2a150a; --hero-tile-4: linear-gradient(135deg, #f5dfae 0%, #eccd84 100%); --hero-tile-4-fg: #5c2b1a; --cta-pattern: var(--bg-pattern); } /* ╔═════════════════ BERNESE ═════════════════╗ */ [data-theme="bernese"] { --bg-primary: #fbf5ef; --bg-secondary: #ffffff; --bg-accent: #f4e6d8; --bg-pattern: url("data:image/svg+xml;utf8,"); --text-primary: #211310; --text-secondary: #6a473a; --text-gradient: linear-gradient(135deg, #211310 0%, #a84a2c 100%); --accent: #a84a2c; --accent-hover: #7a3316; --on-accent: #fff6ed; --border: #e9d8c2; --border-accent: #c89e74; --shadow-accent: rgba(168, 74, 44, 0.22); --shadow-soft: rgba(33, 19, 16, 0.08); --nav-bg: rgba(251, 245, 239, 0.85); --footer-bg: #f4e5d3; --footer-text: #6a473a; --hero-bg: linear-gradient(135deg, #fbece0 0%, #eccaa6 55%, #7a3316 220%); --hero-pattern: var(--bg-pattern); --hero-overlay: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), transparent 55%); --hero-tile-1: linear-gradient(135deg, #221410 0%, #5a2f22 100%); --hero-tile-1-fg: #fbf5ef; --hero-tile-2: linear-gradient(135deg, #ffffff 0%, #f4e6d0 100%); --hero-tile-2-fg: #211310; --hero-tile-3: linear-gradient(135deg, #c8643a 0%, #a84a2c 100%); --hero-tile-3-fg: #fff6ed; --hero-tile-4: linear-gradient(135deg, #eed4b0 0%, #dcbb8d 100%); --hero-tile-4-fg: #5a2f22; --cta-pattern: var(--bg-pattern); }