/* * tokens.css — EV Enterprise Theme Design Tokens * * Source: Migrated from dark/neon theme.css * Replaced: * #0A0A0A → var(--background) * #1A1A1A → var(--card) * #2A2A2A → var(--secondary) * #00FF88 / #00E676 → var(--primary) / var(--accent) * rgba(255,255,255,0.1) → var(--border) * rgba(255,255,255,0.05) → var(--input) * * Light theme is the DEFAULT. Dark class kept as optional override. */ :root { /* ── Typography ─────────────────────────────── */ --font-size-base: 16px; --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ── Border Radius ──────────────────────────── */ --radius: 0.5rem; --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --radius-full: 9999px; /* ── Light Theme Colors ──────────────────────── */ /* Surfaces */ --background: #FFFFFF; --foreground: #0F172A; --card: #F6F8FA; --card-foreground: #0F172A; --popover: #FFFFFF; --popover-foreground: #0F172A; /* Brand */ --primary: #2FB24A; --primary-hover: #27993F; --primary-foreground: #FFFFFF; --accent: #1E8E3E; --accent-foreground: #FFFFFF; /* Neutral */ --secondary: #EEF2F5; --secondary-foreground: #0F172A; --muted: #F1F5F9; --muted-foreground: #475569; /* Semantic */ --destructive: #DC2626; --destructive-foreground: #FFFFFF; /* Form / Input */ --border: #D8E0E7; --input: #D8E0E7; --input-background: #FFFFFF; --switch-background: #E8EEF3; --ring: rgba(47, 178, 74, 0.35); /* Charts */ --chart-1: #2FB24A; --chart-2: #1E8E3E; --chart-3: #0EA5E9; --chart-4: #6366F1; --chart-5: #F59E0B; /* Gradient */ --gradient-start: #E9F8EC; --gradient-end: #FFFFFF; --hero-gradient: linear-gradient(180deg, #E9F8EC 0%, #FFFFFF 70%); /* Badge */ --badge-bg: #E9F8EC; --badge-text: var(--accent); /* Shadows */ --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04); /* Transition */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; } /* ── Optional Dark Override ───────────────────────── Kept for compatibility. Not the default. Apply via or JS toggle. ──────────────────────────────────────────────────── */ .dark { --background: #0F172A; --foreground: #F8FAFC; --card: #1E293B; --card-foreground: #F8FAFC; --popover: #1E293B; --popover-foreground: #F8FAFC; --primary: #2FB24A; --primary-hover: #3DD15F; --primary-foreground: #FFFFFF; --accent: #34C759; --accent-foreground: #0F172A; --secondary: #1E293B; --secondary-foreground: #F8FAFC; --muted: #334155; --muted-foreground: #94A3B8; --destructive: #EF4444; --destructive-foreground: #FFFFFF; --border: rgba(248, 250, 252, 0.12); --input: rgba(248, 250, 252, 0.08); --input-background: #1E293B; --switch-background: #334155; --ring: rgba(47, 178, 74, 0.45); --gradient-start: #0D2017; --gradient-end: #0F172A; --hero-gradient: linear-gradient(180deg, #0D2017 0%, #0F172A 70%); --badge-bg: rgba(47, 178, 74, 0.18); --badge-text: #34C759; --shadow-sm: 0 1px 3px rgba(0,0,0,0.25); --shadow-md: 0 4px 12px rgba(0,0,0,0.3); --shadow-lg: 0 10px 30px rgba(0,0,0,0.35); }