/* ============================================================ colours.css — single source of truth for ALL colour tokens ------------------------------------------------------------ Palettes map to the theme names in site/blueprints/fields/theme.yml: woody · caramel · carnival · bw · home Loaded in AFTER theme-post.css so these values are authoritative. Each theme sets a --color-0…9 scale plus its semantic tokens (--link, --hover, --color-text, --nav-*, …). ============================================================ */ :root { /* ── Neutrals ── */ --color-black: #181818; --color-white: #fcf9f9; --color-light: #efefef; --color-dark: #181818; --color-code-light-grey: #cacbd1; --theme-pale-grey: #f2f2f2; --color-bone: #f3e8c8; --colour-hermes: #ccbdb1; --merino-white: #fffef6; --vanilla: #fbfaf6; --theme-white: #fcf9f9; --theme-null: rgba(255, 255, 255, 0); /* ── Shared neutral ramp (bw · woody · carnival · home) ── */ --color-gray-100: #f7f7f7; --color-gray-200: #eaeaea; --color-gray-300: #dcdcdc; --color-gray-400: #b0b0b0; --color-gray-500: #a0a0a0; --color-gray-600: #909090; --color-gray-700: #808081; --color-gray-800: #707070; --color-gray-900: #606060; --color-gray-1000: #505050; --color-gray-1100: #404040; --color-gray-1200: #303030; --color-gray-1300: #202020; --color-gray-1400: #101010; /* ── Accent scale — resolves --link/--hover across themes. (Previously the undefined --color-active-*; kept the blue that caramel already used for its key colour.) ── */ --color-active-0: #eef6fe; --color-active-1: #c8e2fc; --color-active-2: #9fcef9; --color-active-3: #6fbaf6; --color-active-4: #1fa7f3; --color-active-5: #257fb7; --color-active-6: #367aa7; --color-active-7: #1c3549; --color-active-8: #0f151b; /* ── Brand accents ── */ --hot-pink-light: #ff9cda; --hot-pink: #ff6dc4; --hot-pink-dark: #e84aa4; --hot-pink-darkest: #d22584; /* ── Named theme accents ── */ --theme-thatch: #b59d9b; --theme-thatch-dark: #9c8280; --theme-thatch-darkest: #826967; --theme-woody: #453a33; --theme-woody-dark: #392e28; --theme-woody-light: #584c44; --theme-woody-lighter: #85796d; --theme-contra-lightest: #b8a58b; --theme-contra-light: #bd7625; --theme-contra: #705d4b; --theme-contra-dark: #5e4b3b; --hamburger-bone: #f3e8c8; --hamburger-white: #fcf9f9; /* ── Default semantic tokens (overridden per theme) ── */ --color-text: var(--color-black); --color-text-grey: var(--color-4); --nav-item-bg: var(--color-5); --nav-item-bg-current: var(--color-6); --logo: var(--color-6); /* ── Gradients ── */ --wb-starcraft: linear-gradient(174deg, rgba(0, 0, 0, 1) 0%, rgba(72, 74, 69, 1) 52%, rgba(255, 255, 255, 1) 81%); --blind-bw: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(72, 74, 69, 0.83) 5%, rgba(255, 255, 255, 1) 21%); } /* ============================================================ WOODY — warm browns (0 = light → 8 = dark) ============================================================ */ .theme-woody { --color-0: #bc9a86; --color-1: #937969; --color-2: #7b6659; --color-3: #64554c; --color-4: #52453d; --color-5: #453a33; --color-6: #372e28; --color-7: #2a221d; --color-8: #171311; --color-text: var(--color-6); --color-light: var(--color-0); --color-text-grey: var(--color-4); --color-background: var(--color-7); --logo: var(--color-7); --link: var(--color-2); --hover: var(--theme-contra-light); --nav-text: var(--color-5); --nav-social-fill: var(--color-2); --nav-item-bg: var(--color-8); --nav-item-bg-current: var(--color-6); --nav-item-bgPC: 40%; --date-col: var(--color-4); --saturate: 110%; } /* ============================================================ CARAMEL — warm creams + blue key colour (0 = dark → 9 = light) ============================================================ */ .theme-caramel { --color-0: #020201; --color-1: #242115; --color-2: #524726; --color-3: #8b7640; --color-4: #b9a062; --color-5: #d6c188; --color-6: #eadcb3; --color-7: #faf4e0; --color-8: #fdfade; --color-9: #fffffa; --keycolor-0: #eef6fe; --keycolor-1: #c8e2fc; --keycolor-2: #9fcef9; --keycolor-3: #6fbaf6; --keycolor-4: #1fa7f3; --keycolor-5: #257fb7; --keycolor-6: #367aa7; --keycolor-7: #1c3549; --keycolor-8: #0f151b; --color-text: var(--color-0); --color-light: var(--color-2); --color-text-grey: var(--color-4); --color-background: var(--color-9); --link: var(--color-active-4); --hover: var(--color-active-2); --nav-text: var(--keycolor-0); --nav-social-fill: var(--keycolor-0); --nav-item-bg: var(--keycolor-6); --nav-item-bg-current: var(--keycolor-7); --nav-item-bgPC: 46%; --date-col: var(--color-4); --saturate: 150%; } /* ============================================================ CARNIVAL — festive magenta-red + gold/teal accents NEW distinct palette (0 = dark → 9 = light) ============================================================ */ .theme-carnival { --color-0: #180611; --color-1: #3a0f24; --color-2: #6b1739; --color-3: #a11f4c; --color-4: #d62661; --color-5: #f0487d; --color-6: #f77ba0; --color-7: #fbb0c3; --color-8: #fdd8e2; --color-9: #fff4f7; --accent-gold: #f5b60a; --accent-teal: #17b3a3; --color-text: var(--color-0); --color-light: var(--color-9); --color-text-grey: var(--color-4); --color-background: var(--color-9); --link: var(--accent-teal); --hover: var(--accent-gold); --nav-text: var(--color-9); --nav-social-fill: var(--color-9); --nav-item-bg: var(--color-2); --nav-item-bg-current: var(--color-1); --nav-item-bgPC: 48%; --date-col: var(--color-4); --saturate: 160%; } /* ============================================================ BW — greyscale (0 = dark → 9 = light) ============================================================ */ .theme-bw { --color-0: #000000; --color-1: #1a1a1a; --color-2: #333333; --color-3: #4d4d4d; --color-4: #666666; --color-5: #808080; --color-6: #999999; --color-7: #b3b3b3; --color-8: #cccccc; --color-9: #e6e6e6; --color-text: var(--color-0); --color-light: var(--color-2); --color-text-grey: var(--color-4); --color-background: var(--color-7); --link: var(--color-active-4); --hover: var(--color-active-2); --nav-text: var(--color-0); --nav-social-fill: var(--color-0); --nav-item-bg: var(--color-6); --nav-item-bg-current: var(--color-7); --nav-item-bgPC: 46%; --date-col: var(--color-4); --saturate: 100%; } /* ============================================================ HOME — warm creams (shares caramel scale) (0 = dark → 9 = light) ============================================================ */ .theme-home { --color-0: #020201; --color-1: #242115; --color-2: #524726; --color-3: #8b7640; --color-4: #b9a062; --color-5: #d6c188; --color-6: #eadcb3; --color-7: #faf4e0; --color-8: #fdfade; --color-9: #fffffa; --color-light: var(--color-9); --color-dark: var(--color-0); --color-background-dark: var(--color-1); } /*# sourceMappingURL=colours.css.map */