/* ========================================================================== FXB TOKENS — runtime theming engine for Guru Traders -------------------------------------------------------------------------- Ported from the reference app E:\wep_apps\sakthinew (apps/web globals.css). Single source of truth for COLOR. Plain CSS (no Tailwind). Must load BEFORE css/fxb-theme.css, css/fxb-auth.css and css/fxb-landing.css so they can read these tokens. Switched at runtime by js/fxb-appearance.js via attributes on : data-palette="…" + data-theme="…" (+ inline --radius / font-size). Admin (/admin) does NOT link this file and is intentionally unaffected. ========================================================================== */ :root { --radius: 0.625rem; /* ---- Surfaces (Amber Finance, light = default) ---- */ --background: 30 33% 98%; --foreground: 24 18% 10%; --card: 0 0% 100%; --card-foreground: 24 18% 10%; --popover: 0 0% 100%; --popover-foreground: 24 18% 10%; --primary: 24 94% 50%; --primary-foreground: 0 0% 100%; --primary-soft: 33 100% 96%; --secondary: 30 20% 96%; --secondary-foreground: 24 18% 10%; --muted: 30 15% 94%; --muted-foreground: 25 8% 45%; --accent: 33 100% 96%; --accent-foreground: 24 94% 30%; --destructive: 0 84% 60%; --destructive-foreground: 0 0% 100%; --success: 142 71% 40%; --success-foreground: 0 0% 100%; --warning: 38 92% 50%; --warning-foreground: 24 18% 10%; --info: 217 91% 60%; --info-foreground: 0 0% 100%; --border: 30 20% 90%; --input: 30 20% 90%; --ring: 24 94% 50%; --sidebar: 0 0% 100%; --sidebar-foreground: 24 18% 14%; --sidebar-border: 30 20% 92%; } /* ---- Palettes (primary hue + accent + ring) ------------------------------ */ :root[data-palette='amber_finance'] { --primary: 24 94% 50%; --accent: 33 100% 96%; --accent-foreground: 24 94% 30%; --ring: 24 94% 50%; --primary-soft: 33 100% 96%; } :root[data-palette='indigo_pro'] { --primary: 239 84% 58%; --accent: 239 100% 97%; --accent-foreground: 239 84% 40%; --ring: 239 84% 58%; --primary-soft: 239 100% 96%; } :root[data-palette='emerald_fresh'] { --primary: 160 84% 36%; --accent: 160 60% 95%; --accent-foreground: 160 84% 26%; --ring: 160 84% 36%; --primary-soft: 160 60% 95%; } :root[data-palette='sky_blue'] { --primary: 200 90% 45%; --accent: 200 90% 96%; --accent-foreground: 200 90% 28%; --ring: 200 90% 45%; --primary-soft: 200 90% 96%; } :root[data-palette='royal_purple'] { --primary: 262 83% 58%; --accent: 262 90% 97%; --accent-foreground: 262 83% 38%; --ring: 262 83% 58%; --primary-soft: 262 90% 97%; } :root[data-palette='ocean_teal'] { --primary: 192 91% 36%; --accent: 190 95% 94%; --accent-foreground: 192 91% 22%; --ring: 192 91% 36%; --primary-soft: 192 95% 94%; } :root[data-palette='crimson_red'] { --primary: 0 74% 51%; --accent: 0 86% 97%; --accent-foreground: 0 72% 41%; --ring: 0 74% 51%; --primary-soft: 0 86% 97%; } :root[data-palette='slate_gray'] { --primary: 215 25% 38%; --accent: 215 28% 95%; --accent-foreground: 215 25% 27%; --ring: 215 25% 38%; --primary-soft: 215 28% 95%; } :root[data-palette='orange_blaze'] { --primary: 25 90% 48%; --accent: 25 100% 96%; --accent-foreground: 25 90% 33%; --ring: 25 90% 48%; --primary-soft: 25 100% 96%; } :root[data-palette='rose_pink'] { --primary: 347 77% 50%; --accent: 347 92% 97%; --accent-foreground: 347 77% 40%; --ring: 347 77% 50%; --primary-soft: 347 92% 97%; } /* ---- Theme modes --------------------------------------------------------- */ :root[data-theme='dark'] { --background: 24 14% 5%; --foreground: 40 15% 94%; --card: 24 14% 9%; --card-foreground: 40 15% 94%; --popover: 24 14% 9%; --popover-foreground: 40 15% 94%; --secondary: 24 14% 14%; --secondary-foreground: 40 15% 94%; --muted: 24 14% 14%; --muted-foreground: 25 8% 66%; --accent: 24 30% 16%; --accent-foreground: 38 95% 78%; --border: 24 14% 18%; --input: 24 14% 18%; --sidebar: 24 14% 7%; --sidebar-foreground: 40 15% 92%; --sidebar-border: 24 14% 16%; } :root[data-palette='amber_finance'][data-theme='dark'] { --primary: 38 95% 58%; --ring: 38 95% 58%; --primary-soft: 24 40% 14%; } :root[data-palette='crimson_red'][data-theme='dark'] { --primary: 0 84% 62%; --ring: 0 84% 62%; --primary-soft: 0 40% 14%; } :root[data-palette='slate_gray'][data-theme='dark'] { --primary: 215 28% 64%; --ring: 215 28% 64%; --primary-soft: 215 22% 16%; } :root[data-palette='orange_blaze'][data-theme='dark'] { --primary: 25 95% 58%; --ring: 25 95% 58%; --primary-soft: 25 40% 14%; } :root[data-palette='rose_pink'][data-theme='dark'] { --primary: 347 85% 64%; --ring: 347 85% 64%; --primary-soft: 347 38% 15%; } :root[data-theme='medium'] { --background: 24 10% 15%; --foreground: 40 15% 94%; --card: 24 10% 19%; --card-foreground: 40 15% 94%; --popover: 24 10% 19%; --popover-foreground: 40 15% 94%; --secondary: 24 10% 23%; --secondary-foreground: 40 15% 94%; --muted: 24 10% 23%; --muted-foreground: 40 10% 75%; --accent: 24 30% 26%; --accent-foreground: 38 95% 80%; --border: 24 10% 28%; --input: 24 10% 28%; --sidebar: 24 10% 13%; --sidebar-foreground: 40 15% 92%; --sidebar-border: 24 10% 23%; } /* ---- Base ---------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; } body { background: hsl(var(--background)); color: hsl(var(--foreground)); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Scrollbars — thin, on-brand */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground) / 0.28); border-radius: 9999px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / 0.48); background-clip: padding-box; } /* ========================================================================== Reusable component utilities (ported from reference) ========================================================================== */ /* ---- KPI card ---- */ .kpi-card { position: relative; overflow: hidden; border-radius: calc(var(--radius) + 4px); border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--card-foreground)); box-shadow: 0 1px 2px 0 hsl(var(--foreground) / 0.04), 0 1px 3px 0 hsl(var(--foreground) / 0.06); transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; } .kpi-card:hover { box-shadow: 0 8px 24px -8px hsl(var(--foreground) / 0.18), 0 2px 4px -2px hsl(var(--foreground) / 0.1); border-color: hsl(var(--primary) / 0.4); } .kpi-card::after { content: ''; position: absolute; inset: auto 0 0 0; height: 3px; background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--primary) / 0.05)); } .kpi-card[data-tone='success']::after { background: linear-gradient(90deg, hsl(var(--success)), hsl(var(--success) / 0.05)); } .kpi-card[data-tone='info']::after { background: linear-gradient(90deg, hsl(var(--info)), hsl(var(--info) / 0.05)); } .kpi-card[data-tone='warning']::after { background: linear-gradient(90deg, hsl(var(--warning)), hsl(var(--warning) / 0.05)); } .kpi-card[data-tone='danger']::after { background: linear-gradient(90deg, hsl(var(--destructive)), hsl(var(--destructive) / 0.05)); } .kpi-icon-box { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); } .kpi-icon-box[data-tone='success'] { background: hsl(var(--success) / 0.12); color: hsl(var(--success)); } .kpi-icon-box[data-tone='info'] { background: hsl(var(--info) / 0.12); color: hsl(var(--info)); } .kpi-icon-box[data-tone='warning'] { background: hsl(var(--warning) / 0.14); color: hsl(var(--warning)); } .kpi-icon-box[data-tone='danger'] { background: hsl(var(--destructive) / 0.12); color: hsl(var(--destructive)); } /* ---- Sidebar active lozenge with warm glow ---- */ .nav-active { background: hsl(var(--primary)) !important; color: hsl(var(--primary-foreground)) !important; box-shadow: 0 6px 18px -6px hsl(var(--primary) / 0.55), inset 0 1px 0 hsl(0 0% 100% / 0.18); } /* ---- Glass top bar ---- */ .glass-header { background: hsl(var(--background) / 0.75); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); } /* ---- Auth split-screen ---- */ .auth-hero { position: relative; overflow: hidden; background: radial-gradient(900px 600px at 18% 8%, hsl(var(--primary) / 0.32), transparent 60%), radial-gradient(700px 500px at 85% 92%, hsl(24 94% 42% / 0.28), transparent 60%), linear-gradient(140deg, hsl(24 90% 14%), hsl(20 18% 6%) 55%, hsl(30 40% 10%)); color: #fafafa; } .auth-form-panel { background: radial-gradient(1200px 700px at 100% 0%, hsl(var(--accent) / 0.6), transparent 55%), linear-gradient(180deg, hsl(30 40% 99%), hsl(var(--card))); } :root[data-theme='dark'] .auth-form-panel, :root[data-theme='medium'] .auth-form-panel { background: hsl(var(--background)); } /* ---- Headings / text ---- */ .text-gradient-amber { background: linear-gradient(135deg, hsl(var(--primary)), hsl(38 95% 60%)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---- Badges: status tones ---- */ .badge-success { background: hsl(var(--success) / 0.12); color: hsl(var(--success)); } .badge-warning { background: hsl(var(--warning) / 0.14); color: hsl(var(--warning)); } .badge-danger { background: hsl(var(--destructive) / 0.12); color: hsl(var(--destructive)); } .badge-info { background: hsl(var(--info) / 0.12); color: hsl(var(--info)); } /* ---- Floating orbs ---- */ .orb { position: absolute; border-radius: 9999px; filter: blur(80px); opacity: 0.55; pointer-events: none; animation: fxb-float 14s ease-in-out infinite; } @keyframes fxb-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(14px, -24px, 0); } } /* ========================================================================== Appearance panel + floating trigger (injected by js/fxb-appearance.js) Token-driven, so the panel itself recolors with the chosen palette. ========================================================================== */ .fxb-appearance-trigger { position: fixed; right: 18px; bottom: 18px; z-index: 2147483000; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 9999px; cursor: pointer; color: hsl(var(--primary-foreground)); background: hsl(var(--primary)); box-shadow: 0 10px 26px -8px hsl(var(--primary) / 0.6), 0 2px 6px -2px hsl(0 0% 0% / 0.25); transition: transform .18s ease, box-shadow .18s ease; } .fxb-appearance-trigger:hover { transform: translateY(-2px) rotate(35deg); } .fxb-appearance-trigger svg { width: 22px; height: 22px; display: block; } .fxb-appearance-overlay { position: fixed; inset: 0; z-index: 2147483001; background: hsl(24 18% 6% / 0.45); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; } .fxb-appearance-overlay.fxb-open { opacity: 1; visibility: visible; } .fxb-appearance-panel { position: fixed; top: 0; right: 0; z-index: 2147483002; width: 340px; max-width: 92vw; height: 100%; overflow-y: auto; padding: 20px 20px 32px; background: hsl(var(--card)); color: hsl(var(--card-foreground)); border-left: 1px solid hsl(var(--border)); box-shadow: -18px 0 48px -16px hsl(0 0% 0% / 0.35); transform: translateX(100%); transition: transform .26s cubic-bezier(.4, 0, .2, 1); } .fxb-appearance-overlay.fxb-open .fxb-appearance-panel { transform: translateX(0); } .fxb-ap-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .fxb-ap-head .fxb-ap-title { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; } .fxb-ap-head .fxb-ap-sub { font-size: .75rem; color: hsl(var(--muted-foreground)); } .fxb-ap-close { margin-left: auto; width: 32px; height: 32px; border-radius: 8px; border: 1px solid hsl(var(--border)); background: transparent; color: hsl(var(--foreground)); cursor: pointer; font-size: 18px; line-height: 1; } .fxb-ap-close:hover { background: hsl(var(--accent)); } .fxb-ap-section { margin-top: 20px; } .fxb-ap-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: hsl(var(--muted-foreground)); margin-bottom: 8px; } .fxb-ap-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .fxb-ap-mode { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; font-size: 11px; border-radius: 10px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--muted-foreground)); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .fxb-ap-mode svg { width: 16px; height: 16px; } .fxb-ap-mode:hover { background: hsl(var(--accent)); } .fxb-ap-mode.fxb-active { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); } .fxb-ap-palettes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .fxb-ap-swatch { position: relative; aspect-ratio: 1 / 1; padding: 5px; border-radius: 10px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .fxb-ap-swatch:hover { transform: scale(1.05); } .fxb-ap-swatch.fxb-active { border-color: hsl(var(--primary)); box-shadow: 0 0 0 2px hsl(var(--primary) / 0.3); } .fxb-ap-swatch .fxb-ap-bars { display: flex; flex-direction: column; gap: 3px; height: 100%; } .fxb-ap-swatch .fxb-ap-bars span { flex: 1; border-radius: 3px; } .fxb-ap-swatch .fxb-ap-tick { position: absolute; top: 2px; right: 3px; font-size: 11px; color: hsl(var(--primary)); font-weight: 700; } .fxb-ap-chips { display: flex; flex-wrap: wrap; gap: 6px; } .fxb-ap-chip { padding: 7px 12px; font-size: 12px; text-transform: capitalize; border-radius: 8px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--foreground)); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .fxb-ap-chip:hover { background: hsl(var(--accent)); } .fxb-ap-chip.fxb-active { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); } .fxb-ap-reset { margin-top: 24px; width: 100%; padding: 10px; font-size: 13px; font-weight: 600; border-radius: 10px; border: 1px solid hsl(var(--border)); background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .fxb-ap-reset:hover { background: hsl(var(--accent)); border-color: hsl(var(--primary) / 0.5); } /* Accessibility: respect reduced-motion */ @media (prefers-reduced-motion: reduce) { .orb { animation: none; } .fxb-appearance-trigger, .fxb-appearance-panel, .fxb-appearance-overlay { transition: none; } .fxb-appearance-trigger:hover { transform: none; } }