/* ========================================================================= RepQRGenerator™ — Design system Unified token layer merging the two Stitch systems: • Light = "Kinetic Precision" (website) • Dark = "Lumina Commerce" (mobile) Tailwind (loaded via CDN in ) maps semantic color names to these CSS variables, so a single set of classes adapts to theme + screen size. ========================================================================= */ :root { /* Surfaces */ --surface: #f8f9ff; --surface-dim: #cbdbf5; --surface-bright: #f8f9ff; --surface-container-lowest: #ffffff; --surface-container-low: #eff4ff; --surface-container: #e5eeff; --surface-container-high: #dce9ff; --surface-container-highest: #d3e4fe; --surface-variant: #d3e4fe; /* Text / on-colors */ --on-surface: #0b1c30; --on-surface-variant: #494454; --outline: #7b7486; --outline-variant: #cbc3d7; --background: #f8f9ff; --on-background: #0b1c30; --inverse-surface: #213145; --inverse-on-surface: #eaf1ff; /* Brand */ --primary: #6b38d4; --on-primary: #ffffff; --primary-container: #8455ef; --on-primary-container: #23005c; --inverse-primary: #d0bcff; --secondary: #0051d5; --on-secondary: #ffffff; --secondary-container: #316bf3; --tertiary: #a12e70; --on-tertiary: #ffffff; /* Functional */ --error: #ba1a1a; --on-error: #ffffff; --success: #0f9d58; --warning: #b7791f; /* Signature brand gradient (constant across themes for scan-brand recall) */ --grad-from: #7c3aed; --grad-to: #2563eb; /* Fonts */ --font-display: 'Sora', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif; /* Radii */ --radius-sm: 0.25rem; --radius: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; color-scheme: light; } .dark { --surface: #101415; --surface-dim: #101415; --surface-bright: #363a3b; --surface-container-lowest: #0b0f10; --surface-container-low: #191c1e; --surface-container: #1d2022; --surface-container-high: #272a2c; --surface-container-highest: #323537; --surface-variant: #323537; --on-surface: #e0e3e5; --on-surface-variant: #cbc3d7; --outline: #958ea0; --outline-variant: #494454; --background: #101415; --on-background: #e0e3e5; --inverse-surface: #e0e3e5; --inverse-on-surface: #2d3133; --primary: #d0bcff; --on-primary: #3c0091; --primary-container: #a078ff; --on-primary-container: #ede0ff; --inverse-primary: #6d3bd7; --secondary: #adc6ff; --on-secondary: #002e6a; --secondary-container: #0566d9; --tertiary: #bec6e0; --on-tertiary: #283044; --error: #ffb4ab; --on-error: #690005; --success: #34d399; --warning: #fbbf24; color-scheme: dark; } /* ---- Base ------------------------------------------------------------- */ html { scroll-behavior: smooth; } body { background: var(--background); color: var(--on-surface); font-family: var(--font-body); -webkit-font-smoothing: antialiased; transition: background-color .2s ease, color .2s ease; } ::selection { background: var(--primary); color: var(--on-primary); } .font-display { font-family: var(--font-display); } /* ---- Reusable component classes --------------------------------------- */ .brand-gradient { background-image: linear-gradient(135deg, var(--grad-from) 0%, var(--grad-to) 100%); } .brand-gradient-text { background-image: linear-gradient(135deg, var(--grad-from) 0%, var(--grad-to) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .glass { background: color-mix(in srgb, var(--surface-container) 55%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid color-mix(in srgb, var(--outline) 20%, transparent); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--font-body); font-weight: 600; font-size: .875rem; padding: .625rem 1.25rem; border-radius: 9999px; cursor: pointer; transition: transform .12s ease, filter .15s ease, background-color .15s ease; white-space: nowrap; border: 1px solid transparent; } .btn:active { transform: scale(.97); } .btn-primary { background: linear-gradient(135deg, var(--grad-from), var(--grad-to)); color: #fff; box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--primary) 60%, transparent); } .btn-primary:hover { filter: brightness(1.08); } .btn-ghost { background: transparent; border-color: var(--outline-variant); color: var(--on-surface); } .btn-ghost:hover { background: color-mix(in srgb, var(--surface-variant) 20%, transparent); } .btn-soft { background: var(--surface-container-high); color: var(--on-surface); } .btn-soft:hover { background: var(--surface-container-highest); } .card { background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius-xl); } .dark .card { border-color: color-mix(in srgb, var(--outline) 22%, transparent); } .input { width: 100%; background: var(--surface-container-low); color: var(--on-surface); border: 1px solid var(--outline-variant); border-radius: var(--radius-md); padding: .7rem .9rem; font-size: .95rem; transition: border-color .15s, box-shadow .15s; } .input::placeholder { color: var(--outline); } .input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); } .chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); } .dark .chip { color: var(--inverse-primary); } .label { font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--on-surface-variant); } /* Sidebar / nav active states */ .nav-link { color: var(--on-surface-variant); border-radius: var(--radius-md); transition: background-color .15s, color .15s; } .nav-link:hover { background: color-mix(in srgb, var(--surface-container-high) 60%, transparent); color: var(--primary); } .nav-link.active { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); font-weight: 600; } .dark .nav-link.active { color: var(--inverse-primary); } /* Utility surface backgrounds referenced by pages */ .bg-app { background: var(--background); } .bg-panel { background: var(--surface-container-lowest); } /* Hide scrollbars on horizontal chip rows */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* Radial hero glow */ .hero-glow::before { content: ""; position: absolute; inset: -20% 0 auto 0; height: 480px; z-index: -1; background: radial-gradient(ellipse at top, color-mix(in srgb, var(--primary) 28%, transparent), transparent 60%); filter: blur(60px); opacity: .7; pointer-events: none; } /* ============================================================ Accessibility (keyboard focus, skip link, reduced motion) ============================================================ */ /* Visible keyboard-focus ring on every interactive element. */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, [contenteditable]:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 4px; } /* Don't show the ring for mouse users on elements that manage their own focus look. */ :focus:not(:focus-visible) { outline: none; } /* Skip-to-content link: off-screen until focused by the keyboard. */ .skip-link { position: absolute; left: 8px; top: -64px; z-index: 100; background: var(--primary); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 600; transition: top .15s ease; } .skip-link:focus { top: 8px; } /* Screen-reader-only helper (fallback if the utility framework's is missing). */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Honor the OS "reduce motion" setting. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }