/* ============================================================ FLOW3D 2026 — DESIGN TOKENS /assets/css/tokens.css Single source of truth for all design values. All other stylesheets reference these variables. Update here to propagate changes site-wide. Sections: 1. Brand Colors 2. Neutral Colors 3. State Colors 4. Typography 5. Spacing 6. Layout 7. Border Radius 8. Component Sizing 9. Transitions 10. Elementor Global Color Bridge 11. Elementor Global Typography Bridge ============================================================ */ :root { /* ---------------------------------------------------------- 1. BRAND COLORS ---------------------------------------------------------- */ --fs-color-primary: #1c5b5e; /* Main brand — buttons, nav, footer */ --fs-color-primary-hover: #5e9693; /* Primary hover state */ --fs-color-secondary: #5e9693; /* Secondary buttons, icon fills */ --fs-color-secondary-hover: #84bcb8; /* Secondary hover state */ --fs-color-accent: #178496; /* Links, logo, bullets, focus states */ /* ---------------------------------------------------------- 2. NEUTRAL COLORS ---------------------------------------------------------- */ --fs-color-dark: #30393a; /* Nav, footer, dark cards, accordion headers */ --fs-color-neutral-2: #3f4849; /* Intermediate shades */ --fs-color-text: #545e5e; /* Body text, headings */ --fs-color-neutral-4: #616d6d; /* Intermediate shades */ --fs-color-neutral-5: #6e7f7e; /* Intermediate shades */ --fs-color-text-muted: #829392; /* Muted text */ --fs-color-border: #9cadac; /* Borders, quote block borders */ --fs-color-field-bg: #d0d6d5; /* Light backgrounds, form fields */ --fs-color-page-bg: #FCFBFA; /* Page background */ /* ---------------------------------------------------------- 3. STATE COLORS ---------------------------------------------------------- */ --fs-color-error: #c61c1c; /* Error borders, text */ --fs-color-disabled: #9cadac; /* Disabled buttons */ --fs-color-focus-ring: rgba(28, 91, 94, 0.2); /* Primary at 20% opacity */ --fs-color-table-hover: #f0f9f9; /* Table row hover */ /* ---------------------------------------------------------- 4. TYPOGRAPHY ---------------------------------------------------------- */ --fs-font: 'Gantari', sans-serif; /* Sizes — desktop */ --fs-font-size-h1: 2.5rem; /* 40px */ --fs-font-size-h2: 2.25rem; /* 36px */ --fs-font-size-h3: 1.75rem; /* 28px */ --fs-font-size-h4: 1.5rem; /* 24px */ --fs-font-size-h5: 1.25rem; /* 20px */ --fs-font-size-h6: 1.125rem; /* 18px */ --fs-font-size-base: 1rem; /* 16px */ --fs-font-size-sm: 0.875rem; /* 14px */ /* Sizes — mobile */ --fs-font-size-h1-mobile: 2rem; /* 32px */ --fs-font-size-h2-mobile: 1.75rem; /* 28px */ --fs-font-size-h3-mobile: 1.5rem; /* 24px */ /* Line heights */ --fs-line-height-h1: 2.95rem; --fs-line-height-h2: 2.7rem; --fs-line-height-h3: 2.45rem; --fs-line-height-h4: 2.15rem; --fs-line-height-h5: 1.825rem; --fs-line-height-h6: 1.65rem; --fs-line-height-base: 1.625rem; --fs-line-height-sm: 1.3rem; /* Weights */ --fs-font-weight-regular: 400; --fs-font-weight-semibold: 600; --fs-font-weight-bold: 700; /* ---------------------------------------------------------- 5. SPACING 8px base scale ---------------------------------------------------------- */ --fs-space-xs: 8px; /* 0.5rem */ --fs-space-sm: 16px; /* 1rem */ --fs-space-md: 24px; /* 1.5rem */ --fs-space-lg: 32px; /* 2rem */ --fs-space-xl: 48px; /* 3rem */ --fs-space-2xl: 64px; /* 4rem */ --fs-space-3xl: 96px; /* 6rem */ /* ---------------------------------------------------------- 6. LAYOUT ---------------------------------------------------------- */ --fs-max-width: 1600px; --fs-narrow-width: 900px; /* ---------------------------------------------------------- 7. BORDER RADIUS ---------------------------------------------------------- */ --fs-radius: 8px; /* Inputs, buttons, cards, images */ --fs-radius-sm: 4px; /* Quote blocks */ --fs-radius-full: 50%; /* Circular elements */ /* ---------------------------------------------------------- 8. COMPONENT SIZING ---------------------------------------------------------- */ /* Inputs */ --fs-input-height: 44px; /* Buttons */ --fs-button-height-sm: 36px; --fs-button-height-md: 44px; --fs-button-height-lg: 52px; --fs-button-padding-sm: 16px; --fs-button-padding-md: 24px; --fs-button-padding-lg: 32px; /* Image aspect ratios (used as padding-top % in CSS where needed) */ --fs-ratio-hero: 33.33%; /* 3:1 */ --fs-ratio-card: 75%; /* 4:3 */ --fs-ratio-thumb: 100%; /* 1:1 */ /* ---------------------------------------------------------- 9. TRANSITIONS ---------------------------------------------------------- */ --fs-transition-fast: 0.15s ease; --fs-transition-base: 0.2s ease; --fs-transition-slow: 0.3s ease; /* ---------------------------------------------------------- 10. ELEMENTOR GLOBAL COLOR BRIDGE Maps Elementor's generated variables to FS tokens. Widgets using Elementor global colors stay in sync automatically — no manual updates needed. To verify variable names in your install: Elementor → Settings → Style → Global Colors Inspect the output CSS to confirm variable names. ---------------------------------------------------------- */ --e-global-color-primary: var(--fs-color-primary); --e-global-color-secondary: var(--fs-color-secondary); --e-global-color-accent: var(--fs-color-accent); --e-global-color-text: var(--fs-color-text); /* ---------------------------------------------------------- 11. ELEMENTOR GLOBAL TYPOGRAPHY BRIDGE Maps Elementor's typography variables to FS tokens. ---------------------------------------------------------- */ --e-global-typography-primary-font-family: 'Gantari'; --e-global-typography-primary-font-weight: 700; --e-global-typography-secondary-font-family: 'Gantari'; --e-global-typography-secondary-font-weight: 600; --e-global-typography-text-font-family: 'Gantari'; --e-global-typography-text-font-weight: 400; --e-global-typography-accent-font-family: 'Gantari'; --e-global-typography-accent-font-weight: 600; } /* ============================================================ BREAKPOINTS — REFERENCE CSS custom properties cannot be used inside media query conditions directly, so these are documented here as reference values. Use the pixel values in media queries across all stylesheets. sm: 480px — large phones landscape md: 768px — tablets portrait ← Elementor mobile breakpoint lg: 1024px — tablets landscape ← Elementor tablet breakpoint xl: 1280px — standard desktop 2xl: 1600px — wide / max-width boundary Usage: @media (max-width: 1024px) { ... } ← lg and below @media (max-width: 768px) { ... } ← md and below @media (max-width: 480px) { ... } ← sm and below ============================================================ */ /* ============================================================ RESPONSIVE TOKEN OVERRIDES Overrides larger spacing tokens on mobile to prevent excessive whitespace on small screens. xs through lg spacing unchanged — only xl and above scales. ============================================================ */ /* --- Tablet and below (lg: 1024px) --- */ @media (max-width: 1024px) { :root { --fs-space-3xl: 64px; /* 96px → 64px */ --fs-space-2xl: 48px; /* 64px → 48px */ } } /* --- Mobile (md: 768px) --- */ @media (max-width: 768px) { :root { /* Spacing */ --fs-space-xl: 32px; /* 48px → 32px */ --fs-space-2xl: 40px; /* 64px → 40px */ --fs-space-3xl: 48px; /* 96px → 48px */ /* Container padding — keeps content off screen edges */ --fs-container-padding: var(--fs-space-sm); /* 16px */ /* Typography — mobile heading sizes per design spec */ --fs-font-size-h1: var(--fs-font-size-h1-mobile); /* 32px */ --fs-font-size-h2: var(--fs-font-size-h2-mobile); /* 28px */ --fs-font-size-h3: var(--fs-font-size-h3-mobile); /* 24px */ } } /* --- Small phones (sm: 480px) --- */ @media (max-width: 480px) { :root { --fs-space-xl: 24px; /* further reduction on small screens */ --fs-space-2xl: 32px; --fs-space-3xl: 40px; } }