/* ═══════════════════════════════════════════════════════════════════════════ Tag FYI Design System — Color Tokens ═══════════════════════════════════════════════════════════════════════════ 7 accent palettes (switched via [data-accent="..."]). Default accent: indigo (QRCodeFYI). ═══════════════════════════════════════════════════════════════════════════ */ /* ── Accent Palettes ────────────────────────────────────────────────────── Each palette defines 11 stops: 50–950. Variable naming: --tag-accent-{stop} Switching: set data-accent="..." on or any ancestor element. ──────────────────────────────────────────────────────────────────────── */ /* Default: indigo (QRCodeFYI) */ :root { --tag-accent-50: #eef2ff; --tag-accent-100: #e0e7ff; --tag-accent-200: #c7d2fe; --tag-accent-300: #a5b4fc; --tag-accent-400: #818cf8; --tag-accent-500: #6366f1; --tag-accent-600: #4f46e5; --tag-accent-700: #4338ca; --tag-accent-800: #3730a3; --tag-accent-900: #312e81; --tag-accent-950: #1e1b4b; } /* Indigo — QRCodeFYI (Tailwind indigo) */ [data-accent="indigo"] { --tag-accent-50: #eef2ff; --tag-accent-100: #e0e7ff; --tag-accent-200: #c7d2fe; --tag-accent-300: #a5b4fc; --tag-accent-400: #818cf8; --tag-accent-500: #6366f1; --tag-accent-600: #4f46e5; --tag-accent-700: #4338ca; --tag-accent-800: #3730a3; --tag-accent-900: #312e81; --tag-accent-950: #1e1b4b; } /* Cyan — NFCFYI (Tailwind cyan) */ [data-accent="cyan"] { --tag-accent-50: #ecfeff; --tag-accent-100: #cffafe; --tag-accent-200: #a5f3fc; --tag-accent-300: #67e8f9; --tag-accent-400: #22d3ee; --tag-accent-500: #06b6d4; --tag-accent-600: #0891b2; --tag-accent-700: #0e7490; --tag-accent-800: #155e75; --tag-accent-900: #164e63; --tag-accent-950: #083344; } /* Sky — BLEFYI (Tailwind sky) */ [data-accent="sky"] { --tag-accent-50: #f0f9ff; --tag-accent-100: #e0f2fe; --tag-accent-200: #bae6fd; --tag-accent-300: #7dd3fc; --tag-accent-400: #38bdf8; --tag-accent-500: #0ea5e9; --tag-accent-600: #0284c7; --tag-accent-700: #0369a1; --tag-accent-800: #075985; --tag-accent-900: #0c4a6e; --tag-accent-950: #082f49; } /* Amber — RFIDFYI (Tailwind amber) */ [data-accent="amber"] { --tag-accent-50: #fffbeb; --tag-accent-100: #fef3c7; --tag-accent-200: #fde68a; --tag-accent-300: #fcd34d; --tag-accent-400: #fbbf24; --tag-accent-500: #f59e0b; --tag-accent-600: #d97706; --tag-accent-700: #b45309; --tag-accent-800: #92400e; --tag-accent-900: #78350f; --tag-accent-950: #451a03; } /* Yellow — SmartCardFYI (Tailwind yellow) */ [data-accent="yellow"] { --tag-accent-50: #fefce8; --tag-accent-100: #fef9c3; --tag-accent-200: #fef08a; --tag-accent-300: #fde047; --tag-accent-400: #facc15; --tag-accent-500: #eab308; --tag-accent-600: #ca8a04; --tag-accent-700: #a16207; --tag-accent-800: #854d0e; --tag-accent-900: #713f12; --tag-accent-950: #422006; } /* Emerald — BarcodeFYI (Tailwind emerald) */ [data-accent="emerald"] { --tag-accent-50: #ecfdf5; --tag-accent-100: #d1fae5; --tag-accent-200: #a7f3d0; --tag-accent-300: #6ee7b7; --tag-accent-400: #34d399; --tag-accent-500: #10b981; --tag-accent-600: #059669; --tag-accent-700: #047857; --tag-accent-800: #065f46; --tag-accent-900: #064e3b; --tag-accent-950: #022c22; } /* Stone — TagFYI hub (Tailwind stone) */ [data-accent="stone"] { --tag-accent-50: #fafaf9; --tag-accent-100: #f5f5f4; --tag-accent-200: #e7e5e4; --tag-accent-300: #d6d3d1; --tag-accent-400: #a8a29e; --tag-accent-500: #78716c; --tag-accent-600: #57534e; --tag-accent-700: #44403c; --tag-accent-800: #292524; --tag-accent-900: #1c1917; --tag-accent-950: #0c0a09; }