/* ============================================================ TOOLSHUB4U — COLOR PALETTES data-palette attribute on activates each palette. Default (no attribute) = Indigo. ============================================================ */ /* ─── INDIGO (default) ─── */ :root { --primary: #6366f1; --primary-dark: #4338ca; /* button bg — 7.90:1 vs white */ --primary-light: #818cf8; --secondary: #a855f7; --accent: #22d3ee; --accent-warm: #f472b6; --success: #10b981; --success-dark: #047857; /* button bg — 5.35:1 vs white */ --warning: #f59e0b; --warning-dark: #b45309; /* button bg — 4.88:1 vs white */ --error: #ef4444; --error-dark: #dc2626; /* button bg — 4.83:1 vs white */ --cat-calc: #818cf8; --cat-text: #34d399; --cat-pdf: #f87171; --cat-seo: #fbbf24; --cat-dev: #22d3ee; --cat-games: #f472b6; --grad-brand: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #22d3ee 100%); --grad-brand-soft: linear-gradient(135deg, rgba(99,102,241,.16), rgba(168,85,247,.12), rgba(34,211,238,.10)); --shadow-glow: 0 0 40px rgba(99, 102, 241, .35); --shadow-glow-cyan: 0 0 40px rgba(34, 211, 238, .25); } /* Button overrides: use --primary-dark for better contrast */ .btn--primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); } .btn--primary:hover { box-shadow: 0 10px 32px color-mix(in srgb, var(--primary) 30%, transparent); } .btn--primary::after { background: var(--primary-dark); } /* Status badges */ .badge--success { background: var(--success-dark); } .badge--warning { background: var(--warning-dark); } .badge--error { background: var(--error-dark); } /* ─── OCEAN / TEAL ─── */ [data-palette="ocean"] { --primary: #0ea5e9; --primary-dark: #0284c7; /* 4.10:1 — use darker for button bg */ --primary-light: #38bdf8; --secondary: #06b6d4; --accent: #6366f1; --accent-warm: #f472b6; --cat-calc: #38bdf8; --cat-text: #34d399; --cat-pdf: #f87171; --cat-seo: #fbbf24; --cat-dev: #06b6d4; --cat-games: #f472b6; --grad-brand: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 50%, #6366f1 100%); --grad-brand-soft: linear-gradient(135deg, rgba(14,165,233,.16), rgba(6,182,212,.12), rgba(99,102,241,.10)); --shadow-glow: 0 0 40px rgba(14, 165, 233, .35); --shadow-glow-cyan: 0 0 40px rgba(6, 182, 212, .25); } /* ─── EMERALD / FOREST ─── */ [data-palette="emerald"] { --primary: #10b981; --primary-dark: #059669; /* 3.77:1 — use #047857 for button bg */ --primary-light: #34d399; --secondary: #6366f1; --accent: #22d3ee; --accent-warm: #f472b6; --cat-calc: #34d399; --cat-text: #10b981; --cat-pdf: #f87171; --cat-seo: #fbbf24; --cat-dev: #22d3ee; --cat-games: #f472b6; --grad-brand: linear-gradient(135deg, #10b981 0%, #6366f1 50%, #22d3ee 100%); --grad-brand-soft: linear-gradient(135deg, rgba(16,185,129,.16), rgba(99,102,241,.12), rgba(34,211,238,.10)); --shadow-glow: 0 0 40px rgba(16, 185, 129, .35); --shadow-glow-cyan: 0 0 40px rgba(34, 211, 238, .25); } /* ─── ROSE / MAGENTA ─── */ [data-palette="rose"] { --primary: #ec4899; --primary-dark: #be185d; /* 6.04:1 vs white */ --primary-light: #f472b6; --secondary: #a855f7; --accent: #22d3ee; --accent-warm: #f59e0b; --cat-calc: #f472b6; --cat-text: #34d399; --cat-pdf: #f87171; --cat-seo: #fbbf24; --cat-dev: #22d3ee; --cat-games: #ec4899; --grad-brand: linear-gradient(135deg, #ec4899 0%, #a855f7 50%, #22d3ee 100%); --grad-brand-soft: linear-gradient(135deg, rgba(236,72,153,.16), rgba(168,85,247,.12), rgba(34,211,238,.10)); --shadow-glow: 0 0 40px rgba(236, 72, 153, .35); --shadow-glow-cyan: 0 0 40px rgba(34, 211, 238, .25); } /* ─── AMBER / SUNSET ─── */ [data-palette="amber"] { --primary: #f59e0b; --primary-dark: #c2410c; /* 5.18:1 vs white */ --primary-light: #fbbf24; --secondary: #f472b6; --accent: #6366f1; --accent-warm: #22d3ee; --cat-calc: #fbbf24; --cat-text: #34d399; --cat-pdf: #f87171; --cat-seo: #f59e0b; --cat-dev: #22d3ee; --cat-games: #f472b6; --grad-brand: linear-gradient(135deg, #f59e0b 0%, #ea580c 50%, #6366f1 100%); --grad-brand-soft: linear-gradient(135deg, rgba(245,158,11,.16), rgba(234,88,12,.12), rgba(99,102,241,.10)); --shadow-glow: 0 0 40px rgba(245, 158, 11, .35); --shadow-glow-cyan: 0 0 40px rgba(99, 102, 241, .25); } /* ─── PALETTE SWITCHER UI ─── */ .palette-dots { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--border); } .palette-dot { display: inline-block; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: all .2s ease; position: relative; } .palette-dot:hover { transform: scale(1.2); } .palette-dot.is-active { border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--bg); } .palette-dot--indigo { background: linear-gradient(135deg, #6366f1, #a855f7); } .palette-dot--ocean { background: linear-gradient(135deg, #0ea5e9, #06b6d4); } .palette-dot--emerald { background: linear-gradient(135deg, #10b981, #34d399); } .palette-dot--rose { background: linear-gradient(135deg, #ec4899, #a855f7); } .palette-dot--amber { background: linear-gradient(135deg, #f59e0b, #ea580c); } @media (max-width: 768px) { .palette-dots { display: none; } }