/* ============================================================ KannaAI Design System — CSS Custom Properties ============================================================ Single source of truth for colors, typography, spacing, shadows, borders, transitions, layout, and z-index values. Import this file BEFORE all other stylesheets. ============================================================ */ :root { /* ---------------------------------------------------------- COLORS — Brand ---------------------------------------------------------- */ --color-primary: #ff00ff; --color-primary-dark: #d900d9; --color-secondary: #bd00ff; /* Brand — translucent variants (pink/magenta) */ --color-primary-03: rgba(255, 0, 255, 0.03); --color-primary-05: rgba(255, 0, 255, 0.05); --color-primary-10: rgba(255, 0, 255, 0.1); --color-primary-15: rgba(255, 0, 255, 0.15); --color-primary-20: rgba(255, 0, 255, 0.2); --color-primary-30: rgba(255, 0, 255, 0.3); --color-primary-40: rgba(255, 0, 255, 0.4); --color-primary-50: rgba(255, 0, 255, 0.5); /* Brand — translucent variants (purple) */ --color-secondary-15: rgba(189, 0, 255, 0.15); /* ---------------------------------------------------------- COLORS — Gradients ---------------------------------------------------------- */ --gradient-primary-120: linear-gradient(120deg, var(--color-primary), var(--color-secondary)); --gradient-primary-90: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); --gradient-primary-135: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); --gradient-subtle: linear-gradient(135deg, var(--color-primary-05), rgba(189, 0, 255, 0.05)); --gradient-section-bg: linear-gradient(180deg, #fafafa 0%, #ffffff 100%); /* ---------------------------------------------------------- COLORS — Neutral / Text ---------------------------------------------------------- */ --color-white: #ffffff; --color-black: #000000; --color-text-primary: #333333; --color-text-secondary: #555555; --color-text-muted: #777777; --color-text-hint: #999999; --color-text-disabled: #aaaaaa; --color-gray-800: #333333; --color-gray-700: #444444; --color-gray-600: #555555; --color-gray-500: #666666; --color-gray-400: #888888; /* ---------------------------------------------------------- COLORS — Backgrounds & Borders ---------------------------------------------------------- */ --color-bg-body: #f5f5f5; --color-bg-section: #f9f9f9; --color-bg-section-alt: #fafafa; --color-bg-card: #fdfdfd; --color-bg-light: #f8f9fa; --color-border-light: #f0f0f0; --color-border: #eeeeee; /* ---------------------------------------------------------- COLORS — Overlays & Backdrops ---------------------------------------------------------- */ --overlay-black-05: rgba(0, 0, 0, 0.05); --overlay-black-10: rgba(0, 0, 0, 0.1); --overlay-black-20: rgba(0, 0, 0, 0.2); --overlay-black-30: rgba(0, 0, 0, 0.3); --overlay-black-40: rgba(0, 0, 0, 0.4); --overlay-white-80: rgba(255, 255, 255, 0.8); --overlay-white-85: rgba(255, 255, 255, 0.85); /* ---------------------------------------------------------- COLORS — Semantic ---------------------------------------------------------- */ --color-positive: #2e7d32; --color-negative: #c62828; --color-info: #0087ff; --color-reconnect: #6b9ed2; --color-reconnect-hover: #3b6ea2; /* ---------------------------------------------------------- COLORS — Tier Badges ---------------------------------------------------------- */ --color-tier-1: #cc00cc; --color-tier-2: #9500cc; --color-tier-3: #6600aa; /* ---------------------------------------------------------- TYPOGRAPHY ---------------------------------------------------------- */ --font-family: 'Google Sans Flex', sans-serif; /* Font weights */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; /* Font sizes */ --fs-xs: 0.8rem; --fs-sm: 0.85rem; --fs-sm-md: 0.9rem; --fs-base: 1rem; --fs-md: 1.1rem; --fs-md-lg: 1.2rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-3xl: 2.5rem; --fs-4xl: 3rem; --fs-hero: 3.5rem; --fs-display: 4rem; /* Line heights */ --lh-tight: 1.1; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.6; --lh-loose: 1.7; --lh-spacious: 1.8; /* Letter spacing */ --ls-tight: -0.1rem; --ls-snug: -0.05rem; --ls-normal: 0; --ls-wide: 0.05rem; --ls-wider: 0.08rem; --ls-widest: 0.1rem; /* ---------------------------------------------------------- SPACING ---------------------------------------------------------- */ --space-xxs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-base: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 2.5rem; --space-2xl: 3rem; --space-3xl: 4rem; /* ---------------------------------------------------------- BORDER RADIUS ---------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-pill: 50px; --radius-circle: 50%; /* ---------------------------------------------------------- BORDERS ---------------------------------------------------------- */ --border-thin: 1px; --border-medium: 2px; --border-thick: 3px; --border-accent: 4px; --border-heavy: 5px; /* ---------------------------------------------------------- BOX SHADOWS ---------------------------------------------------------- */ --shadow-subtle: 0 5px 20px var(--overlay-black-05); --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.08); --shadow-card-lg: 0 15px 40px rgba(0, 0, 0, 0.08); --shadow-elevated: 0 20px 50px var(--overlay-black-05); --shadow-primary-sm: 0 4px 10px var(--color-primary-30); --shadow-primary: 0 5px 15px var(--color-primary-30); --shadow-primary-md: 0 6px 15px var(--color-primary-20); --shadow-primary-lg: 0 10px 30px var(--color-primary-15); --shadow-primary-xl: 0 8px 25px var(--color-primary-50); --shadow-primary-hover: 0 12px 35px rgba(255, 0, 255, 0.12); --shadow-modal: 0 10px 40px var(--color-secondary-15); /* ---------------------------------------------------------- TEXT SHADOWS & DROP SHADOWS ---------------------------------------------------------- */ --text-shadow-subtle: 0 0 1px var(--color-primary-50); --text-shadow-glow: 0 0 2px var(--color-primary-40); --text-shadow-strong: 0 0 5px var(--color-primary-30); --text-shadow-standard: 0 2px 4px var(--overlay-black-10); --drop-shadow-glow: drop-shadow(0 0 2px var(--color-primary-40)); --drop-shadow-title: drop-shadow(0 2px 4px var(--overlay-black-10)); /* ---------------------------------------------------------- TRANSITIONS ---------------------------------------------------------- */ --transition-fast: all 0.2s ease; --transition-base: all 0.3s ease; --transition-transform: transform 0.3s ease; --transition-color: color 0.2s; --transition-opacity: opacity 0.3s ease; --transition-bg: background 0.2s ease; /* ---------------------------------------------------------- LAYOUT — Container Max Widths ---------------------------------------------------------- */ --container-sm: 600px; --container-md: 800px; --container-lg: 1000px; --container-xl: 1200px; /* ---------------------------------------------------------- BREAKPOINTS (reference only — use in media queries) ---------------------------------------------------------- */ /* --bp-mobile: 768px; */ /* --bp-tablet: 900px; */ /* --bp-desktop: 1024px; */ /* ---------------------------------------------------------- Z-INDEX SCALE ---------------------------------------------------------- */ --z-base: 1; --z-raised: 2; --z-overlay: 1000; --z-modal: 2000; }