/* * Hybrasyl Ecosystem — Design Tokens * * Drop-in CSS variables for the four shipping themes. Set the active theme * by toggling `data-theme` on or : * * default dark * default light * dark earthy * dark mystical * * Authoritative source: src/themes/*.js. Update both when palettes change. * * Convention: * --hyb-* semantic tokens (use these in component CSS) * --hyb-*-bg-* rgba accent washes for hover/selected fills * * Status colors are intentionally identical across all themes. */ /* ------------------------------------------------------------------------- Universal tokens (theme-independent) ------------------------------------------------------------------------- */ :root { /* Status */ --hyb-error: #ff0000; --hyb-warning: #FFFF00; --hyb-info: #6de7f7; --hyb-success: #38ff4f; /* Shape & motion */ --hyb-radius: 2px; --hyb-border-card: 1px; --hyb-border-modal: 3px; --hyb-transition: 0.2s; /* Typography */ --hyb-font-body: "Crimson Pro", Georgia, serif; --hyb-font-chrome: "Cinzel", serif; --hyb-font-display: "Cinzel Decorative", serif; --hyb-tracking-h1: 0.22em; --hyb-tracking-h2: 0.08em; --hyb-tracking-h3: 0.06em; --hyb-tracking-btn: 0.12em; --hyb-tracking-cap: 0.18em; /* Spacing (8px grid) */ --hyb-space-0_5: 4px; --hyb-space-1: 8px; --hyb-space-1_5: 12px; --hyb-space-2: 16px; --hyb-space-2_5: 20px; --hyb-space-3: 24px; --hyb-space-4: 32px; --hyb-space-5: 40px; } /* ------------------------------------------------------------------------- Hybrasyl — default dark, midnight blue + teal arcane ------------------------------------------------------------------------- */ [data-theme="hybrasyl"] { --hyb-mode: dark; --hyb-primary: #0d182f; --hyb-primary-light: #4d84d1; --hyb-primary-dark: #2a4a6e; --hyb-primary-contrast: #f0e6cc; --hyb-secondary: #1e5e56; --hyb-secondary-light: #3a9e90; --hyb-secondary-dark: #5ecfbe; --hyb-secondary-contrast:#f0e6cc; --hyb-accent: #3a9e90; /* canonical accent — borders, focus, glow */ --hyb-accent-bright: #5ecfbe; /* icons, hover text */ --hyb-bg: #0d182f; --hyb-paper: rgba(6,12,18,0.82); --hyb-paper-medium: rgba(4,9,14,0.90); --hyb-paper-light: rgba(12,22,34,0.70); --hyb-paper-dark: rgba(2,5,10,0.95); --hyb-table-light: rgba(13,24,47,0.60); --hyb-table-dark: rgba(6,12,24,0.75); --hyb-table-border-l: rgba(58,158,144,0.15); --hyb-table-border-d: rgba(58,158,144,0.30); --hyb-appbar-bg: rgba(4,8,14,0.97); --hyb-text: #f0e6cc; --hyb-text-secondary: #a8b8c4; --hyb-text-disabled: #a8b8c4; --hyb-text-headline: #f0e6cc; --hyb-text-link: #60ebd8; --hyb-text-link-hover: #5ecfbe; --hyb-text-visited: #399086; --hyb-text-button: #f0e6cc; --hyb-divider: rgba(58,158,144,0.22); --hyb-divider-faint: rgba(58,158,144,0.08); --hyb-accent-bg-faint: rgba(58,158,144,0.08); --hyb-accent-bg: rgba(58,158,144,0.15); --hyb-accent-bg-strong: rgba(58,158,144,0.35); --hyb-accent-glow: rgba(58,158,144,0.45); --hyb-card-shadow: -2px -2px 0 0 #1e5e56, 2px 2px 0 0 #1e5e56; --hyb-scrollbar-track: #1e5e56; --hyb-scrollbar-thumb: #3a9e90; } /* ------------------------------------------------------------------------- Danaan — default light, parchment + gold leaf ------------------------------------------------------------------------- */ [data-theme="danaan"] { --hyb-mode: light; --hyb-primary: #b8922a; --hyb-primary-light: #9a6e10; --hyb-primary-dark: #7a5e18; --hyb-primary-contrast: #1a1008; --hyb-secondary: #c8a030; --hyb-secondary-light: #f0d070; --hyb-secondary-dark: #8a6820; --hyb-secondary-contrast:#1a1008; --hyb-accent: #b8922a; --hyb-accent-bright: #e8c060; --hyb-bg: #f5e8c0; --hyb-paper: rgba(250,242,220,0.94); --hyb-paper-medium: rgba(245,235,205,0.96); --hyb-paper-light: rgba(255,248,230,0.90); --hyb-paper-dark: rgba(235,220,185,0.98); --hyb-table-light: rgba(255,250,235,0.80); --hyb-table-dark: rgba(240,228,195,0.90); --hyb-table-border-l: rgba(122,94,24,0.25); --hyb-table-border-d: rgba(122,94,24,0.45); --hyb-appbar-bg: rgba(255,248,225,0.97); --hyb-text: #2a1e08; --hyb-text-secondary: #4a3c20; --hyb-text-disabled: #6a5840; --hyb-text-headline: #b88a1c; --hyb-text-link: #7a5e18; --hyb-text-link-hover: #b8922a; --hyb-text-visited: #4a3c20; --hyb-text-button: #2a1e08; --hyb-divider: rgba(122,94,24,0.38); --hyb-divider-faint: rgba(122,94,24,0.22); --hyb-accent-bg-faint: rgba(184,146,42,0.10); --hyb-accent-bg: rgba(184,146,42,0.15); --hyb-accent-bg-strong: rgba(184,146,42,0.35); --hyb-accent-glow: rgba(184,146,42,0.45); --hyb-card-shadow: -2px -2px 0 0 #b8922a, 2px 2px 0 0 #b8922a; --hyb-scrollbar-track: #7a5e18; --hyb-scrollbar-thumb: #b8922a; } /* ------------------------------------------------------------------------- Grinneal — dark, sage green + tobacco brown ------------------------------------------------------------------------- */ [data-theme="grinneal"] { --hyb-mode: dark; --hyb-primary: #6a7a50; --hyb-primary-light: #8a9a68; --hyb-primary-dark: #4a5838; --hyb-primary-contrast: #f0dcb8; --hyb-secondary: #907858; --hyb-secondary-light: #b89870; --hyb-secondary-dark: #604830; --hyb-secondary-contrast:#f2eadc; --hyb-accent: #6a7a50; --hyb-accent-bright: #c0d090; --hyb-bg: #27221c; --hyb-paper: rgba(22,18,14,0.88); --hyb-paper-medium: rgba(20,16,12,0.92); --hyb-paper-light: rgba(28,22,16,0.78); --hyb-paper-dark: rgba(14,10,8,0.96); --hyb-table-light: rgba(26,20,14,0.65); --hyb-table-dark: rgba(18,14,10,0.82); --hyb-table-border-l: rgba(122,106,80,0.15); --hyb-table-border-d: rgba(122,106,80,0.30); --hyb-appbar-bg: rgba(10,8,6,0.97); --hyb-text: #d4c4a8; --hyb-text-secondary: #b0a088; --hyb-text-disabled: #b0a088; --hyb-text-headline: #dcb864; --hyb-text-link: #a0b078; --hyb-text-link-hover: #c0d090; --hyb-text-visited: #6a7a50; --hyb-text-button: #d4c4a8; --hyb-divider: rgba(160,140,100,0.40); --hyb-divider-faint: rgba(122,106,80,0.08); --hyb-accent-bg-faint: rgba(106,122,80,0.10); --hyb-accent-bg: rgba(106,122,80,0.18); --hyb-accent-bg-strong: rgba(106,122,80,0.36); --hyb-accent-glow: rgba(106,122,80,0.45); --hyb-card-shadow: -2px -2px 0 0 #4a5838, 2px 2px 0 0 #504030; --hyb-scrollbar-track: #4a5838; --hyb-scrollbar-thumb: #6a7a50; } /* ------------------------------------------------------------------------- Chadul — dark, mystical purple + forest green ------------------------------------------------------------------------- */ [data-theme="chadul"] { --hyb-mode: dark; --hyb-primary: #4a2870; --hyb-primary-light: #7a5a9a; --hyb-primary-dark: #2e1a4a; --hyb-primary-contrast: #ede4f5; --hyb-secondary: #2e7a3a; --hyb-secondary-light: #4ab858; --hyb-secondary-dark: #1a4a22; --hyb-secondary-contrast:#a8d8a0; --hyb-accent: #9a7ad0; --hyb-accent-bright: #d4b8f0; --hyb-bg: #020804; --hyb-paper: rgba(4,14,6,0.90); --hyb-paper-medium: rgba(4,12,5,0.93); --hyb-paper-light: rgba(6,20,8,0.80); --hyb-paper-dark: rgba(2,8,4,0.97); --hyb-table-light: rgba(5,16,7,0.70); --hyb-table-dark: rgba(3,10,5,0.85); --hyb-table-border-l: rgba(154,122,208,0.18); --hyb-table-border-d: rgba(154,122,208,0.32); --hyb-appbar-bg: rgba(2,8,4,0.97); --hyb-text: #e0d8ea; --hyb-text-secondary: #c0a8d8; --hyb-text-disabled: #c0a8d8; --hyb-text-headline: #a8d8a0; --hyb-text-link: #c0a0e8; --hyb-text-link-hover: #d4b8f0; --hyb-text-visited: #4a2870; --hyb-text-button: #a8d8a0; --hyb-divider: rgba(46,122,58,0.28); --hyb-divider-faint: rgba(154,122,208,0.10); --hyb-accent-bg-faint: rgba(74,40,112,0.14); --hyb-accent-bg: rgba(154,122,208,0.18); --hyb-accent-bg-strong: rgba(154,122,208,0.36); --hyb-accent-glow: rgba(154,122,208,0.45); --hyb-card-shadow: -2px -2px 0 0 #4a2870, 2px 2px 0 0 #4a2870; --hyb-scrollbar-track: #1a4a22; --hyb-scrollbar-thumb: #2e7a3a; } /* ------------------------------------------------------------------------- Optional baseline — apply the theme's body color and font automatically. Comment this block out if your host page already sets these. ------------------------------------------------------------------------- */ [data-theme] { background-color: var(--hyb-bg); color: var(--hyb-text); font-family: var(--hyb-font-body); } [data-theme] h1 { font-family: var(--hyb-font-display); letter-spacing: var(--hyb-tracking-h1); font-weight: 400; } [data-theme] h2 { font-family: var(--hyb-font-chrome); letter-spacing: var(--hyb-tracking-h2); font-weight: 400; } [data-theme] h3, [data-theme] h4, [data-theme] h5, [data-theme] h6 { font-family: var(--hyb-font-chrome); letter-spacing: var(--hyb-tracking-h3); font-weight: 400; } [data-theme] a { color: var(--hyb-text-link); text-decoration: none; transition: color var(--hyb-transition); } [data-theme] a:hover { color: var(--hyb-text-link-hover); } [data-theme] a:visited { color: var(--hyb-text-visited); }