/* ============================================================ CITANT.AI — DESIGN TOKENS v1.1 tokens.css Single source of truth for all design decisions. Change a value here. It changes everywhere. Load order: reset.css → THIS FILE → base.css → layout.css → components.css → utilities.css → page-specific NEVER hardcode a hex value, pixel spacing, or magic number in any other CSS file. Always use a var(--token-name) from here. ============================================================ */ /* * BREAKPOINTS (reference — media queries use min-width mobile-first): * 640px — large phones and small tablets * 900px — tablets and small laptops * 1100px — standard desktops */ :root { /* ---- BRAND COLORS ---- */ --color-primary: #1A4FDB; --color-primary-dark: #1240BF; --color-primary-light: #EEF3FF; --color-accent: #6C3BF5; --color-accent-light: #F0EBFF; /* ---- SEMANTIC STATE COLORS ---- */ --color-success: #0EA871; --color-success-bg: #EDFBF5; --color-warning: #F59E0B; --color-warning-bg: #FFFBEB; --color-error: #EF4444; --color-error-bg: #FEF2F2; --color-info: #0EA5E9; --color-info-bg: #F0F9FF; /* ---- GRADIENTS ---- */ --gradient-main: linear-gradient(135deg, #1A4FDB 0%, #6C3BF5 100%); --gradient-soft: linear-gradient(135deg, #EEF3FF 0%, #F0EBFF 100%); --gradient-text: linear-gradient(135deg, #1A4FDB 0%, #6C3BF5 100%); --gradient-hero-bg: radial-gradient(ellipse 80% 70% at 50% -5%, rgba(26,79,219,0.09) 0%, transparent 65%), radial-gradient(ellipse 50% 40% at 90% 60%, rgba(108,59,245,0.06) 0%, transparent 60%); /* ---- SURFACE / BACKGROUND COLORS ---- */ --color-bg: #F8F9FD; --color-bg-white: #FFFFFF; --color-bg-card: #FFFFFF; --color-bg-muted: #F2F4FA; --color-bg-alt: #F5F6FF; --color-bg-dark: #0D1226; --color-bg-dark-card: #131929; /* ---- TEXT COLORS ---- */ --color-text: #0D1226; --color-text-secondary: #4B5068; --color-text-muted: #8B90A8; --color-text-white: #FFFFFF; --color-text-white-muted: rgba(255,255,255,0.72); /* ---- BORDER COLORS ---- */ --color-border: #E3E6F0; --color-border-light: #EFF1F8; --color-border-strong: #C8CCDE; --color-border-primary: rgba(26,79,219,0.25); /* ---- TYPOGRAPHY: FONT FAMILIES ---- */ --font-display: 'Bricolage Grotesque', sans-serif; --font-body: 'DM Sans', 'DM Sans Fallback', sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; /* ---- TYPOGRAPHY: FONT SIZES ---- */ --text-xs: 0.6875rem; /* 11px */ --text-sm: 0.75rem; /* 12px */ --text-base: 0.8125rem; /* 13px */ --text-md: 0.875rem; /* 14px */ --text-lg: 0.9375rem; /* 15px */ --text-xl: 1rem; /* 16px */ --text-2xl: 1.0625rem; /* 17px */ --text-3xl: 1.125rem; /* 18px */ --text-4xl: 1.25rem; /* 20px */ --text-h4: 1.0625rem; /* 17px */ --text-h3: clamp(1.0625rem, 2vw, 1.4375rem); --text-h2: clamp(1.625rem, 3.5vw, 2.75rem); --text-h1: clamp(2.125rem, 5vw, 3.75rem); /* ---- TYPOGRAPHY: FONT WEIGHTS ---- */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* ---- TYPOGRAPHY: LINE HEIGHTS ---- */ --leading-tight: 1.08; --leading-snug: 1.2; --leading-normal: 1.6; --leading-relaxed: 1.7; --leading-loose: 1.8; /* ---- TYPOGRAPHY: LETTER SPACING ---- */ --tracking-tightest: -0.04em; --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-wider: 0.1em; --tracking-widest: 0.12em; /* ---- SPACING SCALE (4px base unit) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* ---- BORDER RADIUS ---- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* ---- SHADOWS ---- */ --shadow-sm: 0 1px 3px rgba(13,18,38,0.06), 0 1px 2px rgba(13,18,38,0.04); --shadow-md: 0 4px 16px rgba(13,18,38,0.08), 0 2px 6px rgba(13,18,38,0.04); --shadow-lg: 0 12px 40px rgba(13,18,38,0.10), 0 4px 12px rgba(13,18,38,0.06); --shadow-card: 0 2px 12px rgba(13,18,38,0.07), 0 1px 3px rgba(13,18,38,0.04); --shadow-hover: 0 8px 32px rgba(26,79,219,0.12), 0 2px 8px rgba(13,18,38,0.06); /* ---- 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); --transition-spring: 600ms cubic-bezier(0.34, 1.56, 0.64, 1); /* ---- LAYOUT ---- */ --container-max: 1200px; --container-md: 860px; --container-sm: 640px; --nav-height: 72px; --section-py: 96px; --section-py-sm: 64px; /* ---- Z-INDEX SCALE ---- */ --z-below: -1; --z-base: 0; --z-above: 1; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; } /* ============================================================ REDUCED MOTION — ACCESSIBILITY REQUIREMENT This block is non-negotiable. Never remove it. Placed in tokens.css so it loads before any component CSS. ============================================================ */ @media (prefers-reduced-motion: reduce) { /* Catch-all: zero out all transitions and animations site-wide */ *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } /* Smooth scroll must be explicitly disabled */ html { scroll-behavior: auto !important; } /* FAQ accordion entrance animation */ .faq__answer { animation: none !important; } /* Card hover lift: remove translateY motion but keep shadow change */ .service-card:hover, .testi:hover, .card:hover { transform: none !important; box-shadow: var(--shadow-hover); } /* Button hover lift: remove translateY, keep shadow */ .btn--primary:hover, .btn--secondary:hover { transform: none !important; } /* FAQ icon rotation */ .faq__icon { transition: none !important; } }