/* ============================================================ THEME PALETTES ------------------------------------------------------------ Add future palettes as: html[data-theme="Theme Name"] { ... } Keep these semantic token names identical across every theme. ============================================================ */ /* Optional fallback if data-theme is ever omitted. */ :root { --color-primary: #202020; --color-primary-hover: #080808; --color-accent: #717171; --color-accent-soft: #E2E2E2; --color-canvas: #F7F7F5; --color-surface: #FFFFFF; --color-surface-soft: #ECECEA; --color-surface-tint: #DEDEDA; --color-surface-strong: #161616; --color-text: #292929; --color-heading: #111111; --color-text-soft: #5E5E5E; --color-text-faint: #858585; --color-text-inverse: #FFFFFF; --color-text-on-accent: #FFFFFF; --color-border: #D2D2CF; --color-border-strong: #A7A7A3; --color-focus-ring: rgba(32,32,32,.18); --color-header-bg: rgba(247,247,245,.92); --color-overlay: rgba(8,8,8,.68); --color-success-bg: #E1E1DE; --color-success-text: #272727; --shadow-card: 0 1px 2px rgba(0,0,0,.05), 0 18px 55px rgba(0,0,0,.10); --shadow-float: 0 12px 40px rgba(0,0,0,.12); --shadow-modal: 0 30px 90px rgba(0,0,0,.28); --shadow-button:0 12px 30px rgba(0,0,0,.18); } /* ========================================================= 1. NAVY & GOLD ========================================================= */ html[data-theme="Navy & Gold"] { /* Brand */ --color-primary: #0D294E; --color-primary-hover: #101729; --color-accent: #C7A75A; --color-accent-soft: #EEE2C1; /* Surfaces */ --color-canvas: #FCF8EF; --color-surface: #FFFFFF; --color-surface-soft: #F4EEDF; --color-surface-tint: #E6D8B5; --color-surface-strong: #101729; /* Typography */ --color-text: #4E6378; --color-heading: #101729; --color-text-soft: #596A7B; --color-text-faint: #8994A0; --color-text-inverse: #FCF8EF; --color-text-on-accent: #FCF8EF; /* Borders */ --color-border: #DDD5C5; --color-border-strong: #C7A75A; /* Special surfaces */ --color-header-bg: rgba(252,248,239,.94); --color-overlay: rgba(16,23,41,.76); --color-focus-ring: rgba(199,167,90,.30); /* Shadows */ --shadow-card: 0 1px 2px rgba(16,23,41,.05), 0 18px 55px rgba(16,23,41,.11); --shadow-float: 0 12px 40px rgba(16,23,41,.14); --shadow-modal: 0 30px 90px rgba(16,23,41,.30); --shadow-button: 0 12px 30px rgba(13,41,78,.22); } /* ========================================================= 2. PORCELAIN ========================================================= */ html[data-theme="Lighthouse"] { /* Brand */ --color-primary: #497192; --color-primary-hover: #123451; --color-accent: #E48354; --color-accent-soft: #F2D4BF; /* Surfaces */ --color-canvas: #F7F4E9; --color-surface: #FFFFFF; --color-surface-soft: #F5E6D6; --color-surface-tint: #EFC7AD; --color-surface-strong: #123451; /* Typography */ --color-text: #497192; --color-heading: #123451; --color-text-soft: #4F7391; --color-text-faint: #768EA3; --color-text-inverse: #F7F4E9; --color-text-on-accent: #123451; /* Borders */ --color-border: #DDD2C7; --color-border-strong: #E48354; /* Special surfaces */ --color-header-bg: rgba(247,244,233,.94); --color-overlay: rgba(18,52,81,.76); --color-focus-ring: rgba(228,131,84,.30); /* Shadows */ --shadow-card: 0 1px 2px rgba(18,52,81,.05), 0 18px 55px rgba(18,52,81,.11); --shadow-float: 0 12px 40px rgba(18,52,81,.14); --shadow-modal: 0 30px 90px rgba(18,52,81,.30); --shadow-button: 0 12px 30px rgba(73,113,146,.22); } /* ========================================================= 3. SANDSTONE ========================================================= */ html[data-theme="Oyster Pearl"] { /* Brand */ --color-primary: #3C6E8F; --color-primary-hover: #0D2139; --color-accent: #998F86; --color-accent-soft: #D9D4CD; /* Surfaces */ --color-canvas: #F2EFE8; --color-surface: #FFFFFF; --color-surface-soft: #E7E3DC; --color-surface-tint: #CEC9C1; --color-surface-strong: #0D2139; /* Typography */ --color-text: #3C6E8F; --color-heading: #0D2139; --color-text-soft: #43708F; --color-text-faint: #6E8CA1; --color-text-inverse: #F2EFE8; --color-text-on-accent: #0D2139; /* Borders */ --color-border: #D0CDCA; --color-border-strong: #998F86; /* Special surfaces */ --color-header-bg: rgba(242,239,232,.94); --color-overlay: rgba(13,33,57,.76); --color-focus-ring: rgba(153,143,134,.30); /* Shadows */ --shadow-card: 0 1px 2px rgba(13,33,57,.05), 0 18px 55px rgba(13,33,57,.11); --shadow-float: 0 12px 40px rgba(13,33,57,.14); --shadow-modal: 0 30px 90px rgba(13,33,57,.30); --shadow-button: 0 12px 30px rgba(60,110,143,.22); } /* ========================================================= 4. BURGUNDY & IVORY ========================================================= */ html[data-theme="Marina"] { /* Brand */ --color-primary: #10545F; --color-primary-hover: #042A32; --color-accent: #1AA6A2; --color-accent-soft: #BFE0D9; /* Surfaces */ --color-canvas: #FFF6EE; --color-surface: #FFFFFF; --color-surface-soft: #E2ECE5; --color-surface-tint: #A3D6D0; --color-surface-strong: #042A32; /* Typography */ --color-text: #10545F; --color-heading: #042A32; --color-text-soft: #1C5D67; --color-text-faint: #5C8B92; --color-text-inverse: #FFF6EE; --color-text-on-accent: #042A32; /* Borders */ --color-border: #C9D7D1; --color-border-strong: #1AA6A2; /* Special surfaces */ --color-header-bg: rgba(255,246,238,.94); --color-overlay: rgba(4,42,50,.76); --color-focus-ring: rgba(26,166,162,.30); /* Shadows */ --shadow-card: 0 1px 2px rgba(4,42,50,.05), 0 18px 55px rgba(4,42,50,.11); --shadow-float: 0 12px 40px rgba(4,42,50,.14); --shadow-modal: 0 30px 90px rgba(4,42,50,.30); --shadow-button: 0 12px 30px rgba(16,84,95,.22); } /* ========================================================= 5. CHARCOAL & WARM TERRACOTTA ========================================================= */ html[data-theme="Rope&Canvas"] { /* Brand */ --color-primary: #8C5B44; --color-primary-hover: #46606C; --color-accent: #46606C; --color-accent-soft: #C0C1B8; /* Surfaces */ --color-canvas: #F0E7D6; --color-surface: #FBF9F5; --color-surface-soft: #DBD6C9; --color-surface-tint: #ACB1AC; --color-surface-strong: #1B2D3B; /* Typography */ --color-text: #46606C; --color-heading: #1B2D3B; --color-text-soft: #4F6873; --color-text-faint: #76858C; --color-text-inverse: #F0E7D6; --color-text-on-accent: #F0E7D6; /* Borders */ --color-border: #C5C3B9; --color-border-strong: #46606C; /* Special surfaces */ --color-header-bg: rgba(240,231,214,.94); --color-overlay: rgba(27,45,59,.76); --color-focus-ring: rgba(70,96,108,.30); /* Shadows */ --shadow-card: 0 1px 2px rgba(27,45,59,.05), 0 18px 55px rgba(27,45,59,.11); --shadow-float: 0 12px 40px rgba(27,45,59,.14); --shadow-modal: 0 30px 90px rgba(27,45,59,.30); --shadow-button: 0 12px 30px rgba(140,91,68,.22); } /* ========================================================= 6. DEEP GREEN & CREAM ========================================================= */ html[data-theme="Tidal Lavender"] { /* Brand */ --color-primary: #374785; --color-primary-hover: #111A39; --color-accent: #7B85CA; --color-accent-soft: #D3D4F0; /* Surfaces */ --color-canvas: #F5F3FF; --color-surface: #FFFFFF; --color-surface-soft: #E6E5F8; --color-surface-tint: #C4C7EA; --color-surface-strong: #111A39; /* Typography */ --color-text: #374785; --color-heading: #111A39; --color-text-soft: #41508B; --color-text-faint: #7782AC; --color-text-inverse: #F5F3FF; --color-text-on-accent: #111A39; /* Borders */ --color-border: #CFCFE4; --color-border-strong: #7B85CA; /* Special surfaces */ --color-header-bg: rgba(245,243,255,.94); --color-overlay: rgba(17,26,57,.76); --color-focus-ring: rgba(123,133,202,.30); /* Shadows */ --shadow-card: 0 1px 2px rgba(17,26,57,.05), 0 18px 55px rgba(17,26,57,.11); --shadow-float: 0 12px 40px rgba(17,26,57,.14); --shadow-modal: 0 30px 90px rgba(17,26,57,.30); --shadow-button: 0 12px 30px rgba(55,71,133,.22); } /* ========================================================= 7. DUSTY MAUVE EDITORIAL ========================================================= */ html[data-theme="Regatta Pop"] { /* Brand */ --color-primary: #1D6BD1; --color-primary-hover: #0A1E3E; --color-accent: #FE4D3E; --color-accent-soft: #F9C3B3; /* Surfaces */ --color-canvas: #F7F1E1; --color-surface: #FFFFFF; --color-surface-soft: #F8DDCD; --color-surface-tint: #FAAFA0; --color-surface-strong: #0A1E3E; /* Typography */ --color-text: #3B4B65; --color-heading: #0A1E3E; --color-text-soft: #45546D; --color-text-faint: #7A8596; --color-text-inverse: #F7F1E1; --color-text-on-accent: #0A1E3E; /* Borders */ --color-border: #DFC7BC; --color-border-strong: #FE4D3E; /* Special surfaces */ --color-header-bg: rgba(247,241,225,.94); --color-overlay: rgba(10,30,62,.76); --color-focus-ring: rgba(254,77,62,.30); /* Shadows */ --shadow-card: 0 1px 2px rgba(10,30,62,.05), 0 18px 55px rgba(10,30,62,.11); --shadow-float: 0 12px 40px rgba(10,30,62,.14); --shadow-modal: 0 30px 90px rgba(10,30,62,.30); --shadow-button: 0 12px 30px rgba(29,107,209,.22); } /* ========================================================= 8. EXECUTIVE ========================================================= */ html[data-theme="Kelp"] { /* Brand */ --color-primary: #7A6A50; --color-primary-hover: #304A2F; --color-accent: #304A2F; --color-accent-soft: #BCC1B3; /* Surfaces */ --color-canvas: #F3EFE6; --color-surface: #FFFFFF; --color-surface-soft: #DBDACF; --color-surface-tint: #A5AD9D; --color-surface-strong: #102016; /* Typography */ --color-text: #7A6A50; --color-heading: #102016; --color-text-soft: #796A54; --color-text-faint: #918878; --color-text-inverse: #F3EFE6; --color-text-on-accent: #F3EFE6; /* Borders */ --color-border: #C4C5BA; --color-border-strong: #304A2F; /* Special surfaces */ --color-header-bg: rgba(243,239,230,.94); --color-overlay: rgba(16,32,22,.76); --color-focus-ring: rgba(48,74,47,.30); /* Shadows */ --shadow-card: 0 1px 2px rgba(16,32,22,.05), 0 18px 55px rgba(16,32,22,.11); --shadow-float: 0 12px 40px rgba(16,32,22,.14); --shadow-modal: 0 30px 90px rgba(16,32,22,.30); --shadow-button: 0 12px 30px rgba(122,106,80,.22); } /* ========================================================= 9. TEAL Swatches: #2F3D46 #0F4D5C #1C6B7A #8BC5B9 #F2F6F5 ========================================================= */ html[data-theme="Winery"] { /* Brand */ --color-primary: #5C0E24; --color-primary-hover: #2A2E33; --color-accent: #A6CBC3; --color-accent-soft: #E0E9E2; /* Surfaces */ --color-canvas: #F7F4EE; --color-surface: #FFFFFF; --color-surface-soft: #EDEFE9; --color-surface-tint: #D7E4DD; --color-surface-strong: #2A2E33; /* Typography */ --color-text: #5C0E24; --color-heading: #2A2E33; --color-text-soft: #641A2F; --color-text-faint: #905B6A; --color-text-inverse: #F7F4EE; --color-text-on-accent: #2A2E33; /* Borders */ --color-border: #D7DAD5; --color-border-strong: #A0C3BC; /* Special surfaces */ --color-header-bg: rgba(247,244,238,.94); --color-overlay: rgba(42,46,51,.76); --color-focus-ring: rgba(166,203,195,.30); /* Shadows */ --shadow-card: 0 1px 2px rgba(42,46,51,.05), 0 18px 55px rgba(42,46,51,.11); --shadow-float: 0 12px 40px rgba(42,46,51,.14); --shadow-modal: 0 30px 90px rgba(42,46,51,.30); --shadow-button: 0 12px 30px rgba(92,14,36,.22); } /* ========================================================= 10. WEDDING Swatches: #6F86B8 #D7C2E9 #B0D0FF #FFF4C7 #FAFBF6 ========================================================= */ html[data-theme="Costal Ember"] { /* Brand */ --color-primary: #096A72; --color-primary-hover: #223139; --color-accent: #F48C6B; --color-accent-soft: #FCCEB5; /* Surfaces */ --color-canvas: #FFE8D2; --color-surface: #FFF9F4; --color-surface-soft: #FEDEC7; --color-surface-tint: #FBC9AF; --color-surface-strong: #223139; /* Typography */ --color-text: #096A72; --color-heading: #223139; --color-text-soft: #157179; --color-text-faint: #538F93; --color-text-inverse: #FFE8D2; --color-text-on-accent: #223139; /* Borders */ --color-border: #E6CAB6; --color-border-strong: #F48C6B; /* Special surfaces */ --color-header-bg: rgba(255,232,210,.94); --color-overlay: rgba(34,49,57,.76); --color-focus-ring: rgba(244,140,107,.30); /* Shadows */ --shadow-card: 0 1px 2px rgba(34,49,57,.05), 0 18px 55px rgba(34,49,57,.11); --shadow-float: 0 12px 40px rgba(34,49,57,.14); --shadow-modal: 0 30px 90px rgba(34,49,57,.30); --shadow-button: 0 12px 30px rgba(9,106,114,.22); } /* ========================================================= 11. CLASSROOM Swatches: #4C6FA7 #8AB0D5 #93C7FF #FFEEA6 #F3F7FF ========================================================= */ html[data-theme="Navy Blend"] { /* Brand */ --color-primary: #3D63D4; --color-primary-hover: #274C78; --color-accent: #C2B27F; --color-accent-soft: #E5DEC9; /* Surfaces */ --color-canvas: #F3EFE6; --color-surface: #FFFFFF; --color-surface-soft: #EDE7D9; --color-surface-tint: #DFD7BD; --color-surface-strong: #2D2A31; /* Typography */ --color-text: #274C78; --color-heading: #2D2A31; --color-text-soft: #32557F; --color-text-faint: #6C85A3; --color-text-inverse: #F3EFE6; --color-text-on-accent: #2D2A31; /* Borders */ --color-border: #D8D3C6; --color-border-strong: #C2B27F; /* Special surfaces */ --color-header-bg: rgba(243,239,230,.94); --color-overlay: rgba(45,42,49,.76); --color-focus-ring: rgba(194,178,127,.30); /* Shadows */ --shadow-card: 0 1px 2px rgba(45,42,49,.05), 0 18px 55px rgba(45,42,49,.11); --shadow-float: 0 12px 40px rgba(45,42,49,.14); --shadow-modal: 0 30px 90px rgba(45,42,49,.30); --shadow-button: 0 12px 30px rgba(61,99,212,.22); } /* ========================================================= 12. CLOUD Swatches: #133D55 #386FA5 #59A5D7 #EAF4FE #F8F9FB ========================================================= */ html[data-theme="SatinSand"] { /* Brand */ --color-primary: #3559E3; --color-primary-hover: #202938; --color-accent: #F5DEB4; --color-accent-soft: #EAE3D6; /* Surfaces */ --color-canvas: #E6E5E3; --color-surface: #F9F9F8; --color-surface-soft: #E8E4DD; --color-surface-tint: #ECE2D0; --color-surface-strong: #202938; /* Typography */ --color-text: #4B535E; --color-heading: #202938; --color-text-soft: #545B66; --color-text-faint: #7E8389; --color-text-inverse: #E6E5E3; --color-text-on-accent: #202938; /* Borders */ --color-border: #D3D0CB; --color-border-strong: #C0B195; /* Special surfaces */ --color-header-bg: rgba(230,229,227,.94); --color-overlay: rgba(32,41,56,.76); --color-focus-ring: rgba(245,222,180,.30); /* Shadows */ --shadow-card: 0 1px 2px rgba(32,41,56,.05), 0 18px 55px rgba(32,41,56,.11); --shadow-float: 0 12px 40px rgba(32,41,56,.14); --shadow-modal: 0 30px 90px rgba(32,41,56,.30); --shadow-button: 0 12px 30px rgba(53,89,227,.22); } /* ========================================================= 13. COPPER Swatches: #1F1410 #6C3F2A #BF7A53 #F1D6C5 #FFF7F0 ========================================================= */ html[data-theme="Dusty Gray"] { /* Brand */ --color-primary: #3E5D79; --color-primary-hover: #33404A; --color-accent: #A7742E; --color-accent-soft: #E2C48D; /* Surfaces */ --color-canvas: #F9E3B2; --color-surface: #FEF8EC; --color-surface-soft: #EFD6A2; --color-surface-tint: #DAB980; --color-surface-strong: #33404A; /* Typography */ --color-text: #3E5D79; --color-heading: #33404A; --color-text-soft: #48657F; --color-text-faint: #718491; --color-text-inverse: #F9E3B2; --color-text-on-accent: #FFFFFF; /* Borders */ --color-border: #DAC498; --color-border-strong: #A7742E; /* Special surfaces */ --color-header-bg: rgba(249,227,178,.94); --color-overlay: rgba(51,64,74,.76); --color-focus-ring: rgba(167,116,46,.30); /* Shadows */ --shadow-card: 0 1px 2px rgba(51,64,74,.05), 0 18px 55px rgba(51,64,74,.11); --shadow-float: 0 12px 40px rgba(51,64,74,.14); --shadow-modal: 0 30px 90px rgba(51,64,74,.30); --shadow-button: 0 12px 30px rgba(62,93,121,.22); } /* ========================================================= 14. EXECUTIVE BLUE Swatches: #F9FAFC #CBD5E1 #465568 #1E3B8B #1E293B ========================================================= */ html[data-theme="Legal"] { /* Brand */ --color-primary: #2E3E3E; --color-primary-hover: #333333; --color-accent: #D6A759; --color-accent-soft: #EFE2CC; /* Surfaces */ --color-canvas: #F9F9F9; --color-surface: #FFFFFF; --color-surface-soft: #F5F0E7; --color-surface-tint: #ECDBBE; --color-surface-strong: #333333; /* Typography */ --color-text: #2E3E3E; --color-heading: #333333; --color-text-soft: #384848; --color-text-faint: #717C7C; --color-text-inverse: #F9F9F9; --color-text-on-accent: #333333; /* Borders */ --color-border: #E0DAD1; --color-border-strong: #D6A759; /* Special surfaces */ --color-header-bg: rgba(249,249,249,.94); --color-overlay: rgba(51,51,51,.76); --color-focus-ring: rgba(214,167,89,.30); /* Shadows */ --shadow-card: 0 1px 2px rgba(51,51,51,.05), 0 18px 55px rgba(51,51,51,.11); --shadow-float: 0 12px 40px rgba(51,51,51,.14); --shadow-modal: 0 30px 90px rgba(51,51,51,.30); --shadow-button: 0 12px 30px rgba(46,62,62,.22); } /* ========================================================= 15. GALLERY Swatches: #2D4E7B #9BBEFE #B7C8E6 #FFEA9F #F3F4F8 ========================================================= */ html[data-theme="Law office"] { /* Brand */ --color-primary: #003F7F; --color-primary-hover: #6A0B0B; --color-accent: #93BBE2; --color-accent-soft: #E1ECF7; /* Surfaces */ --color-canvas: #FFFFFF; --color-surface: #FFFFFF; --color-surface-soft: #F2F7FB; --color-surface-tint: #D4E4F3; --color-surface-strong: #6A0B0B; /* Typography */ --color-text: #003F7F; --color-heading: #6A0B0B; --color-text-soft: #0D4985; --color-text-faint: #527CA8; --color-text-inverse: #FFFFFF; --color-text-on-accent: #6A0B0B; /* Borders */ --color-border: #E2DDE2; --color-border-strong: #93BBE2; /* Special surfaces */ --color-header-bg: rgba(255,255,255,.94); --color-overlay: rgba(106,11,11,.76); --color-focus-ring: rgba(147,187,226,.30); /* Shadows */ --shadow-card: 0 1px 2px rgba(106,11,11,.05), 0 18px 55px rgba(106,11,11,.11); --shadow-float: 0 12px 40px rgba(106,11,11,.14); --shadow-modal: 0 30px 90px rgba(106,11,11,.30); --shadow-button: 0 12px 30px rgba(0,63,127,.22); } /* ========================================================= 16. INK & SAND Swatches: #0B1B2B #1E3A5F #A88E69 #E6D5B9 #FBF3E6 ========================================================= */ html[data-theme="Luxury"] { /* Brand */ --color-primary: #212C45; --color-primary-hover: #1C253A; --color-accent: #D0C198; --color-accent-soft: #F0EBDF; /* Surfaces */ --color-canvas: #FCFCFA; --color-surface: #FFFFFF; --color-surface-soft: #F7F5EE; --color-surface-tint: #EAE4D3; --color-surface-strong: #212C45; /* Typography */ --color-text: #4D566A; --color-heading: #212C45; --color-text-soft: #565E71; --color-text-faint: #868C9A; --color-text-inverse: #FCFCFA; --color-text-on-accent: #212C45; /* Borders */ --color-border: #E0DFDB; --color-border-strong: #D0C198; /* Special surfaces */ --color-header-bg: rgba(252,252,250,.94); --color-overlay: rgba(33,44,69,.76); --color-focus-ring: rgba(208,193,152,.30); /* Shadows */ --shadow-card: 0 1px 2px rgba(33,44,69,.05), 0 18px 55px rgba(33,44,69,.11); --shadow-float: 0 12px 40px rgba(33,44,69,.14); --shadow-modal: 0 30px 90px rgba(33,44,69,.30); --shadow-button: 0 12px 30px rgba(33,44,69,.22); } /* ========================================================= 17. LIBRARY Swatches: #6B7F98 #A9C9F2 #C2D6F1 #F6E8A7 #EFE9DD ========================================================= */ html[data-theme="Library"] { --color-primary: #6B7F98; --color-primary-hover: #53677F; --color-accent: #F6E8A7; --color-accent-soft: #FBF2C9; --color-canvas: #EFE9DD; --color-surface: #FAF8F3; --color-surface-soft: #E4E9ED; --color-surface-tint: #C2D6F1; --color-surface-strong: #43566E; --color-text: #445467; --color-heading: #384A60; --color-text-soft: #6C7988; --color-text-faint: #959DA8; --color-text-inverse: #FFFFFF; --color-text-on-accent: #D5D7D5; --color-border: #D5D7D5; --color-border-strong: #A9C9F2; --color-header-bg: rgba(239,233,221,.94); --color-overlay: rgba(56,74,96,.68); --color-focus-ring: rgba(107,127,152,.23); --shadow-card: 0 1px 2px rgba(56,74,96,.04), 0 18px 55px rgba(56,74,96,.09); --shadow-float: 0 12px 40px rgba(56,74,96,.12); --shadow-modal: 0 30px 90px rgba(56,74,96,.27); --shadow-button: 0 12px 30px rgba(107,127,152,.21); } /* ========================================================= 18. OLIVE Swatches: #2D3B2E #3D4A40 #566B30 #A7B38B #F5F4EF ========================================================= */ html[data-theme="Olive"] { --color-primary: #566B30; --color-primary-hover: #3D4A40; --color-accent: #A7B38B; --color-accent-soft: #DEE3D2; --color-canvas: #F5F4EF; --color-surface: #FFFFFF; --color-surface-soft: #EBECE4; --color-surface-tint: #D6DCC6; --color-surface-strong: #2D3B2E; --color-text: #3D4A40; --color-heading: #2D3B2E; --color-text-soft: #687166; --color-text-faint: #92988F; --color-text-inverse: #FFFFFF; --color-text-on-accent: #D4D7CD; --color-border: #D4D7CD; --color-border-strong: #A7B38B; --color-header-bg: rgba(245,244,239,.94); --color-overlay: rgba(45,59,46,.72); --color-focus-ring: rgba(86,107,48,.23); --shadow-card: 0 1px 2px rgba(45,59,46,.05), 0 18px 55px rgba(45,59,46,.09); --shadow-float: 0 12px 40px rgba(45,59,46,.13); --shadow-modal: 0 30px 90px rgba(45,59,46,.29); --shadow-button: 0 12px 30px rgba(86,107,48,.22); } /* ========================================================= 19. PASTEL Swatches: #3D6CB2 #74B7FE #9DE0F0 #D0E1FF #FFEFB1 ========================================================= */ html[data-theme="Pastel"] { --color-primary: #3D6CB2; --color-primary-hover: #315995; --color-accent: #74B7FE; --color-accent-soft: #D0E1FF; --color-canvas: #F7FAFF; --color-surface: #FFFFFF; --color-surface-soft: #EAF3FF; --color-surface-tint: #D0E1FF; --color-surface-strong: #315A8F; --color-text: #3F5573; --color-heading: #31598E; --color-text-soft: #657A96; --color-text-faint: #97A7BA; --color-text-inverse: #FFFFFF; --color-text-on-accent: #D3E1F1; --color-border: #D3E1F1; --color-border-strong: #9DE0F0; --color-header-bg: rgba(247,250,255,.94); --color-overlay: rgba(49,89,142,.66); --color-focus-ring: rgba(116,183,254,.28); --shadow-card: 0 1px 2px rgba(49,89,142,.04), 0 18px 55px rgba(49,89,142,.08); --shadow-float: 0 12px 40px rgba(49,89,142,.11); --shadow-modal: 0 30px 90px rgba(49,89,142,.26); --shadow-button: 0 12px 30px rgba(61,108,178,.20); } /* ========================================================= 20. Harbor Navy Swatches: #3D6CB2 #74B7FE #9DE0F0 #D0E1FF #FFEFB1 ========================================================= */ html[data-theme="Harbor Navy"] { /* Brand */ --color-primary: #976452; --color-primary-hover: #7F5445; --color-accent: #0B2D53; --color-accent-soft: #C7D1DB; /* Surfaces */ --color-canvas: #F6F1ED; --color-surface: #FDFBFA; --color-surface-soft: #F9F6F4; --color-surface-tint: #F8F4F3; --color-surface-strong: #EDE4DC; /* Typography */ --color-text: #152537; --color-heading: #2A2F3C; --color-text-soft: #6B747E; --color-text-faint: #8A8E94; --color-text-inverse: #F8F5F2; --color-text-on-accent: #FCFBF8; /* Borders */ --color-border: #DDDDDF; --color-border-strong: #AEB2B8; /* Special surfaces */ --color-header-bg: #624B48; --color-overlay: rgba(10, 29, 51, 0.55); --color-focus-ring: #0B2D53; /* Shadows */ --shadow-card: 0 1px 2px rgba(8, 23, 40, 0.1), 0 18px 55px rgba(8, 23, 40, 0.12); --shadow-float: 0 12px 40px rgba(8, 23, 40, 0.18); --shadow-modal: 0 30px 90px rgba(8, 23, 40, 0.32); --shadow-button: 0 12px 30px rgba(88, 58, 48, 0.28); } html[data-theme="Midnight"] { /* Brand */ --color-primary: #3B7A78; --color-primary-hover: #326665; --color-accent: #38516C; --color-accent-soft: #D2D9E0; /* Surfaces */ --color-canvas: #F3F5EE; --color-surface: #FCFCFB; --color-surface-soft: #F7F9F4; --color-surface-tint: #F1F6F6; --color-surface-strong: #E7EBDE; /* Typography */ --color-text: #151E37; --color-heading: #1B2E42; --color-text-soft: #6D7281; --color-text-faint: #8D8F98; --color-text-inverse: #F6F7F3; --color-text-on-accent: #FDFDFA; /* Borders */ --color-border: #DCDDE0; --color-border-strong: #ADB1B8; /* Special surfaces */ --color-header-bg: #2C5660; --color-overlay: rgba(7, 12, 28, 0.55); --color-focus-ring: #38516C; /* Shadows */ --shadow-card: 0 1px 2px rgba(6, 10, 22, 0.1), 0 18px 55px rgba(6, 10, 22, 0.12); --shadow-float: 0 12px 40px rgba(6, 10, 22, 0.18); --shadow-modal: 0 30px 90px rgba(6, 10, 22, 0.32); --shadow-button: 0 12px 30px rgba(34, 71, 70, 0.28); } html[data-theme="Antique Brass"] { /* Brand */ --color-primary: #6B4F3B; --color-primary-hover: #2F3D46; --color-accent: #B08D57; --color-accent-soft: #D3BF99; /* Surfaces */ --color-canvas: #E1D2B3; --color-surface: #F8F4EC; --color-surface-soft: #DBC9A8; --color-surface-tint: #CDB68E; --color-surface-strong: #2F3D46; /* Typography */ --color-text: #6B4F3B; --color-heading: #2F3D46; --color-text-soft: #705543; --color-text-faint: #837264; --color-text-inverse: #E1D2B3; --color-text-on-accent: #232D34; /* Borders */ --color-border: #C9BA9D; --color-border-strong: #B08D57; /* Special surfaces */ --color-header-bg: rgba(225,210,179,.94); --color-overlay: rgba(47,61,70,.76); --color-focus-ring: rgba(176,141,87,.30); /* Shadows */ --shadow-card: 0 1px 2px rgba(47,61,70,.05), 0 18px 55px rgba(47,61,70,.11); --shadow-float: 0 12px 40px rgba(47,61,70,.14); --shadow-modal: 0 30px 90px rgba(47,61,70,.30); --shadow-button: 0 12px 30px rgba(107,79,59,.22); } html[data-theme="Gold&White"] { /* Brand */ --color-primary: #1A1A1A; --color-primary-hover: #161616; --color-accent: #D3AF37; --color-accent-soft: #F3E9C7; /* Surfaces */ --color-canvas: #FFFFFF; --color-surface: #FFFFFF; --color-surface-soft: #FBF8ED; --color-surface-tint: #F2E7C4; --color-surface-strong: #1A1A1A; /* Typography */ --color-text: #484848; --color-heading: #1A1A1A; --color-text-soft: #515151; --color-text-faint: #838383; --color-text-inverse: #FFFFFF; --color-text-on-accent: #1A1A1A; /* Borders */ --color-border: #E2DECF; --color-border-strong: #D3AF37; /* Special surfaces */ --color-header-bg: rgba(255,255,255,.94); --color-overlay: rgba(26,26,26,.76); --color-focus-ring: rgba(211,175,55,.30); /* Shadows */ --shadow-card: 0 1px 2px rgba(26,26,26,.05), 0 18px 55px rgba(26,26,26,.11); --shadow-float: 0 12px 40px rgba(26,26,26,.14); --shadow-modal: 0 30px 90px rgba(26,26,26,.30); --shadow-button: 0 12px 30px rgba(26,26,26,.22); } html[data-theme="Gold&Blue"] { /* Brand */ --color-primary: #12294D; --color-primary-hover: #0F2241; --color-accent: #D3AF37; --color-accent-soft: #F3E9C7; /* Surfaces */ --color-canvas: #FFFFFF; --color-surface: #FFFFFF; --color-surface-soft: #FBF8ED; --color-surface-tint: #F2E7C4; --color-surface-strong: #12294D; /* Typography */ --color-text: #415471; --color-heading: #12294D; --color-text-soft: #4B5D78; --color-text-faint: #7E8B9E; --color-text-inverse: #FFFFFF; --color-text-on-accent: #12294D; /* Borders */ --color-border: #E1DFD5; --color-border-strong: #D3AF37; /* Special surfaces */ --color-header-bg: rgba(255,255,255,.94); --color-overlay: rgba(18,41,77,.76); --color-focus-ring: rgba(211,175,55,.30); /* Shadows */ --shadow-card: 0 1px 2px rgba(18,41,77,.05), 0 18px 55px rgba(18,41,77,.11); --shadow-float: 0 12px 40px rgba(18,41,77,.14); --shadow-modal: 0 30px 90px rgba(18,41,77,.30); --shadow-button: 0 12px 30px rgba(18,41,77,.22); }