/* ============================================================ Farhad YT Pay — "Nova" Design Tokens v2 Loaded first. Every component reads these variables. Dark mode: [data-theme="dark"] on ============================================================ */ :root { color-scheme: light; /* ---- Brand: emerald -> teal ---- */ --fyp-primary-50: #ECFDF5; --fyp-primary-100: #D1FAE5; --fyp-primary-200: #A7F3D0; --fyp-primary-300: #6EE7B7; --fyp-primary-400: #34D399; --fyp-primary-500: #10B981; --fyp-primary-600: #059669; --fyp-primary-700: #047857; --fyp-primary-800: #065F46; --fyp-primary-900: #064E3B; --fyp-primary: #0BA678; --fyp-primary-hover: #099268; --fyp-primary-active: #087F5B; --fyp-on-primary: #FFFFFF; --fyp-primary-soft: rgba(16, 185, 129, .10); --fyp-primary-ring: rgba(16, 185, 129, .32); --fyp-teal: #14B8A6; --fyp-gradient: linear-gradient(135deg, #0BA678 0%, #14B8A6 100%); --fyp-gradient-soft: linear-gradient(135deg, rgba(11,166,120,.12) 0%, rgba(20,184,166,.12) 100%); /* ---- Accent: amber (for highlights / CTA contrast) ---- */ --fyp-accent: #F59E0B; --fyp-accent-hover: #D97706; --fyp-accent-soft: rgba(245, 158, 11, .13); /* ---- Semantic ---- */ --fyp-success: #10B981; --fyp-success-soft: rgba(16, 185, 129, .12); --fyp-warning: #F59E0B; --fyp-warning-soft: rgba(245, 158, 11, .14); --fyp-danger: #EF4444; --fyp-danger-soft: rgba(239, 68, 68, .12); --fyp-info: #3B82F6; --fyp-info-soft: rgba(59, 130, 246, .12); /* ---- Neutrals ---- */ --fyp-body-bg: #F4F6FB; --fyp-surface: #FFFFFF; --fyp-surface-2: #F8FAFC; --fyp-surface-3: #EEF2F7; --fyp-border: #E4E9F1; --fyp-border-strong:#CBD5E1; --fyp-heading: #0B1526; --fyp-text: #3D4C63; --fyp-muted: #64748B; --fyp-faint: #94A3B8; --fyp-inverse: #FFFFFF; --fyp-scrim: rgba(8, 15, 30, .58); /* ---- Sidebar (light) ---- */ --fyp-side-bg: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%); --fyp-side-text: #55657D; --fyp-side-heading: #0B1526; --fyp-side-hover: rgba(11, 21, 38, .05); --fyp-side-active: rgba(11, 166, 120, .10); --fyp-side-border: rgba(11, 21, 38, .08); --fyp-side-scroll-thumb: rgba(11, 21, 38, .16); --fyp-side-active-text: #067647; --fyp-dot-ring: #FFFFFF; /* ---- Topbar (light / white) ---- */ --fyp-topbar-bg: #FFFFFF; --fyp-topbar-text: #33415C; --fyp-topbar-hover: rgba(11, 21, 38, .06); --fyp-topbar-chip-bg: #F1F5F9; --fyp-topbar-chip-border: rgba(11, 21, 38, .08); --fyp-topbar-shadow: 0 1px 0 rgba(11, 21, 38, .05), 0 2px 12px -6px rgba(11, 21, 38, .10); /* ---- Inputs / tables ---- */ --fyp-input-bg: #FFFFFF; --fyp-input-border: #DDE4EE; --fyp-input-ring: rgba(11, 166, 120, .22); --fyp-placeholder: #94A3B8; --fyp-table-head-bg:#F7F9FC; --fyp-row-hover: #F6FAF8; /* ---- Typography ---- */ --fyp-font-sans: "Inter", "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fyp-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* ---- Radii ---- */ --fyp-radius-sm: .55rem; --fyp-radius-md: .75rem; --fyp-radius-lg: 1rem; --fyp-radius-xl: 1.35rem; --fyp-radius-pill: 999px; /* ---- Shadows ---- */ --fyp-shadow-xs: 0 1px 2px rgba(11, 21, 38, .05); --fyp-shadow-sm: 0 1px 3px rgba(11, 21, 38, .06), 0 1px 2px rgba(11, 21, 38, .04); --fyp-shadow-md: 0 8px 20px -6px rgba(11, 21, 38, .12), 0 2px 6px -2px rgba(11, 21, 38, .05); --fyp-shadow-lg: 0 20px 44px -14px rgba(11, 21, 38, .18); --fyp-shadow-xl: 0 30px 64px -18px rgba(11, 21, 38, .26); --fyp-shadow-glow: 0 10px 26px -8px rgba(11, 166, 120, .48); /* ---- Layout ---- */ --fyp-sidebar-w: 272px; --fyp-sidebar-w-collapsed: 82px; --fyp-topbar-h: 64px; --fyp-content-gap: 1.5rem; /* ---- Motion ---- */ --fyp-ease: cubic-bezier(.22, .61, .36, 1); --fyp-dur-fast: .15s; --fyp-dur-base: .25s; --fyp-dur-slow: .45s; } /* ============================================================ Dark theme overrides ============================================================ */ [data-theme="dark"] { color-scheme: dark; --fyp-body-bg: #070D19; --fyp-surface: #0D1626; --fyp-surface-2: #121D31; --fyp-surface-3: #18243B; --fyp-border: rgba(148, 163, 184, .16); --fyp-border-strong:rgba(148, 163, 184, .32); --fyp-heading: #F1F5F9; --fyp-text: #C7D2E0; --fyp-muted: #8CA0B8; --fyp-faint: #5B6B80; --fyp-inverse: #0B1526; --fyp-scrim: rgba(2, 6, 17, .72); /* sidebar stays dark in dark mode */ --fyp-side-bg: linear-gradient(180deg, #060B14 0%, #081120 55%, #0A1626 100%); --fyp-side-text: #A9BAD4; --fyp-side-heading: #EFF4FC; --fyp-side-hover: rgba(255, 255, 255, .05); --fyp-side-active: rgba(16, 185, 129, .18); --fyp-side-border: rgba(255, 255, 255, .07); --fyp-side-scroll-thumb: rgba(255, 255, 255, .16); --fyp-side-active-text: #FFFFFF; --fyp-dot-ring: #0A1626; /* topbar keeps its emerald night look in dark mode */ --fyp-topbar-bg: linear-gradient(135deg, #064E3B 0%, #115E59 100%); --fyp-topbar-text: #FFFFFF; --fyp-topbar-hover: rgba(255, 255, 255, .16); --fyp-topbar-chip-bg: rgba(255, 255, 255, .12); --fyp-topbar-chip-border: rgba(255, 255, 255, .18); --fyp-topbar-shadow: var(--fyp-shadow-glow); --fyp-primary-soft: rgba(16, 185, 129, .17); --fyp-accent-soft: rgba(245, 158, 11, .16); --fyp-success-soft: rgba(16, 185, 129, .16); --fyp-warning-soft: rgba(245, 158, 11, .16); --fyp-danger-soft: rgba(239, 68, 68, .16); --fyp-info-soft: rgba(59, 130, 246, .16); --fyp-input-bg: #101B2E; --fyp-input-border: rgba(148, 163, 184, .22); --fyp-input-ring: rgba(52, 211, 153, .28); --fyp-placeholder: #5B6B80; --fyp-table-head-bg:#111C30; --fyp-row-hover: rgba(16, 185, 129, .07); --fyp-shadow-xs: 0 1px 2px rgba(0, 0, 0, .40); --fyp-shadow-sm: 0 1px 3px rgba(0, 0, 0, .45); --fyp-shadow-md: 0 8px 20px -6px rgba(0, 0, 0, .55); --fyp-shadow-lg: 0 20px 44px -14px rgba(0, 0, 0, .62); --fyp-shadow-xl: 0 30px 64px -18px rgba(0, 0, 0, .72); }