/* ============================================================ TOKENS.CSS — Design Tokens / CSS Custom Properties aventium.ai static rebuild Source: Lovable backup analysis (ETAP_0_RAPORT_ANALIZA.md) ============================================================ */ :root { /* ---------------------------------------------------------- COLORS — Brand palette ---------------------------------------------------------- */ /* Backgrounds */ --background: #0F0D2E; /* Main page background (deep indigo-black) */ --surface-alt: #181540; /* Alternating section background */ --section-alt: #15123A; /* Darker alternating sections (problem, faq, etc.) */ --card: #1C1A45; /* Card background (Tailwind --card) */ --card-bg: #1E1B4B; /* Deep Indigo — card bg (WhyNow, AuditAreas, etc.) */ --footer-bg: #07061A; /* Footer background */ /* Text */ --foreground: #F5F8FC; /* Primary text (Ice White) */ --muted-foreground: #A0A8C0; /* Secondary/muted text */ /* Brand accents */ --primary: #06B6D4; /* Cyan — icons, CTA, borders */ --primary-hover: #22D3EE; /* Cyan hover state (lighter) */ --primary-foreground: #0F0D2E; /* Text on primary/cyan backgrounds */ --warm-gold: #D97706; /* Gold accent (CNC showcase) */ --vivid-indigo: #4338CA; /* Vivid Indigo (gradient mesh accent) */ /* Borders */ --border: #282550; /* Card/section borders */ --border-subtle: rgba(255, 255, 255, 0.06); /* Very subtle border (header scroll) */ --border-primary: rgba(6, 182, 212, 0.2); /* Cyan border (subdued) */ --border-primary-strong: rgba(6, 182, 212, 0.4); /* Cyan border (hover) */ /* Transparency utilities */ --primary-10: rgba(6, 182, 212, 0.10); --primary-15: rgba(6, 182, 212, 0.15); --primary-20: rgba(6, 182, 212, 0.20); --primary-25: rgba(6, 182, 212, 0.25); --primary-40: rgba(6, 182, 212, 0.40); /* ---------------------------------------------------------- TYPOGRAPHY ---------------------------------------------------------- */ --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* Font size scale — fluid with clamp() Pattern: clamp(min, preferred, max) Base: 16px = 1rem */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.375rem; /* 22px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 2rem; /* 32px */ --text-4xl: clamp(2rem, 4vw, 2.5rem); /* 32–40px */ --text-5xl: clamp(2.5rem, 5vw, 3rem); /* 40–48px */ --text-h2: clamp(2rem, 5vw, 4rem); /* 32–64px — section headings */ --text-hero: clamp(3rem, 8vw, 6rem); /* 48–96px — homepage h1 */ --text-subhero: clamp(3rem, 7vw, 4.5rem); /* 48–72px — subpage h1 */ /* Line heights */ --leading-none: 1; --leading-tight: 1.1; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.6; /* Letter spacing */ --tracking-tight: -0.03em; --tracking-tighter: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.25em; /* Uppercase labels */ /* Font weights */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; --font-black: 900; /* ---------------------------------------------------------- SPACING — 4px base scale ---------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ---------------------------------------------------------- SECTION PADDING — from Lovable analysis ---------------------------------------------------------- */ --section-py: 160px; /* Desktop */ --section-py-md: 100px; /* Tablet */ --section-py-sm: 80px; /* Mobile */ /* ---------------------------------------------------------- LAYOUT ---------------------------------------------------------- */ --header-height: 72px; /* Wysokość fixed headera — używana w nav mobile top i padding-top stron */ --container-max: 1280px; --container-padding: 1.5rem; /* 24px horizontal padding */ --content-max: 1024px; /* Narrower content areas (hero text) */ --text-max: 800px; /* Max-width for body text blocks */ --text-max-sm: 700px; /* Narrower text blocks */ /* ---------------------------------------------------------- BORDER RADIUS ---------------------------------------------------------- */ --radius-sm: calc(1rem - 4px); /* ~12px */ --radius-md: calc(1rem - 2px); /* ~14px */ --radius: 1rem; /* 16px — base */ --radius-lg: 1.25rem; /* 20px */ --radius-xl: 1.5rem; /* 24px */ --radius-full: 9999px; /* pill */ /* ---------------------------------------------------------- Z-INDEX SCALE ---------------------------------------------------------- */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 20; --z-sticky: 30; --z-overlay: 40; --z-header: 50; --z-modal: 100; /* ---------------------------------------------------------- TRANSITIONS ---------------------------------------------------------- */ --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 300ms; --duration-reveal: 600ms; --duration-very-slow: 4000ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); /* Scroll reveal */ --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --transition-base: var(--duration-base) var(--ease-default); --transition-fast: var(--duration-fast) var(--ease-default); --transition-slow: var(--duration-slow) var(--ease-default); --transition-reveal: var(--duration-reveal) var(--ease-spring); /* ---------------------------------------------------------- SHADOWS ---------------------------------------------------------- */ --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2); --shadow-strong: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.3); --shadow-glow-cyan: 0 8px 40px rgba(6, 182, 212, 0.15); --shadow-glow-cyan-strong: 0 0 30px rgba(6, 182, 212, 0.4); --shadow-glow-gold: 0 8px 40px rgba(217, 119, 6, 0.15); /* ---------------------------------------------------------- GRADIENTS — reusable ---------------------------------------------------------- */ --gradient-hero-card: linear-gradient(180deg, #1E1B4B, #15123A); --gradient-metric-card: linear-gradient(135deg, #1E1B4B 0%, #14122F 100%); --gradient-mesh-cyan: radial-gradient(circle at center, rgba(6, 182, 212, 0.20) 0%, transparent 50%); --gradient-mesh-indigo: radial-gradient(circle at center, rgba(67, 56, 202, 0.25) 0%, transparent 50%); /* Hex SVG pattern — inline data-URL (shared across CTA sections) */ --hex-pattern-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'%3E%3Cpath d='M30 0 L60 15 L60 37 L30 52 L0 37 L0 15 Z' fill='none' stroke='%2306B6D4' stroke-width='1'/%3E%3C/svg%3E"); }