85 lines
3.1 KiB
CSS
85 lines
3.1 KiB
CSS
/* ===================================================================
|
|
CurcuVance BioSciences - Design Tokens & Variables
|
|
Theme: Science & Nature (Deep Clinical Emerald + Curcumin Warm Gold)
|
|
=================================================================== */
|
|
|
|
:root {
|
|
/* Brand Primary Colors */
|
|
--primary-900: #06231c; /* Deepest forest pine */
|
|
--primary-800: #0b3b2c; /* Clinical deep emerald */
|
|
--primary-700: #10523e; /* Botanical pine */
|
|
--primary-600: #186b52; /* Vibrant botanical green */
|
|
--primary-500: #218c6c; /* Sage/mint accent */
|
|
--primary-100: #e7f5ef; /* Light tint */
|
|
--primary-50: #f2f9f5; /* Ultra light emerald tint */
|
|
|
|
/* Curcumin Accent Colors */
|
|
--accent-900: #8c5800; /* Deep roasted turmeric */
|
|
--accent-700: #c27803; /* Amber */
|
|
--accent-600: #d97706; /* Warm curcumin gold */
|
|
--accent-500: #f59e0b; /* Pure curcumin vibrant yellow-gold */
|
|
--accent-400: #fbbf24; /* Golden highlight */
|
|
--accent-100: #fef3c7; /* Soft gold tint */
|
|
--accent-50: #fffbeb; /* Warm light gold background */
|
|
|
|
/* Neutrals & Slate */
|
|
--neutral-950: #0f172a; /* Darkest slate text */
|
|
--neutral-900: #1e293b; /* Dark heading text */
|
|
--neutral-800: #334155; /* Body copy text */
|
|
--neutral-700: #475569; /* Secondary text */
|
|
--neutral-600: #64748b; /* Muted text */
|
|
--neutral-400: #94a3b8; /* Subtle border */
|
|
--neutral-300: #cbd5e1; /* Light border */
|
|
--neutral-200: #e2e8f0; /* Divider */
|
|
--neutral-100: #f1f5f9; /* Light card background */
|
|
--neutral-50: #f8fafc; /* Soft page background */
|
|
--white: #ffffff;
|
|
|
|
/* Scientific Accents */
|
|
--science-blue: #0284c7;
|
|
--science-blue-light: #e0f2fe;
|
|
--science-violet: #7c3aed;
|
|
--success: #10b981;
|
|
--warning: #f59e0b;
|
|
--danger: #ef4444;
|
|
|
|
/* Typography */
|
|
--font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
|
|
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
|
|
--font-mono: 'JetBrains Mono', monospace;
|
|
|
|
/* Spacing */
|
|
--spacing-xs: 0.25rem;
|
|
--spacing-sm: 0.5rem;
|
|
--spacing-md: 1rem;
|
|
--spacing-lg: 1.5rem;
|
|
--spacing-xl: 2rem;
|
|
--spacing-2xl: 3rem;
|
|
--spacing-3xl: 4.5rem;
|
|
--spacing-4xl: 6rem;
|
|
|
|
/* Container */
|
|
--container-max: 1240px;
|
|
--container-wide: 1380px;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
|
|
--shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
|
|
--shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
|
|
--shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
|
|
--shadow-glow-gold: 0 0 25px rgba(245, 158, 11, 0.35);
|
|
--shadow-glow-green: 0 0 25px rgba(16, 82, 62, 0.3);
|
|
|
|
/* Radius */
|
|
--radius-sm: 6px;
|
|
--radius-md: 10px;
|
|
--radius-lg: 16px;
|
|
--radius-xl: 24px;
|
|
--radius-full: 9999px;
|
|
|
|
/* Transitions */
|
|
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|