/* * Design Tokens — Everflow * * Sourced directly from Figma Foundation page (shadcn framework). * File key: 0ftXUddwHQwLjJwAFGqPur — nodes: 4159:12425 (Typography), * 4164:10790 (Color Primitives), 4166:16685 (Color Semantics). * * ACF-driven brand values (--primary, --font1, --font2) override the * fallbacks below via theme-settings-css.php in . */ :root { /* ------------------------------------------------------------------------- * Color — Semantic tokens * Direct from Figma "Color - Semantics" layer (shadcn convention). * --primary / --font1 / --font2 come from ACF and override fallbacks. * ---------------------------------------------------------------------- */ --color-background: #ffffff; --color-foreground: #1c1917; /* stone/900 */ --color-primary: var(--primary, #00205b); --color-primary-foreground: #ffffff; --color-primary-hover: #000F35; --color-secondary: #f5f5f4; /* stone/100 */ --color-secondary-foreground: #57534e; /* stone/600 */ --color-secondary-hover: rgba(245, 245, 244, 0.8); --color-muted: #f5f5f4; /* stone/100 */ --color-muted-foreground: #171717; /* stone/500 */ --color-accent: #fff8f5; /* brand/50 */ --color-accent-foreground: #d64d00; /* brand/700 */ --color-card: #ffffff; --color-card-foreground: #1c1917; --color-popover: #ffffff; --color-popover-foreground: #1c1917; --color-border: #d6d3d1; /* stone/300 */ --color-input: #d6d3d1; --color-ring: var(--primary, #00205b); --color-destructive: #dc2626; --color-destructive-hover: #b91c1c; --color-destructive-foreground: #ffffff; /* ------------------------------------------------------------------------- * Color — Primitive scale (Tailwind stone — matches Figma neutral scale) * Use semantic tokens in components, not these directly. * ---------------------------------------------------------------------- */ --color-neutral-50: #fafaf9; --color-neutral-100: #f5f5f4; --color-neutral-200: #e7e5e4; --color-neutral-300: #d6d3d1; --color-neutral-400: #a8a29e; --color-neutral-500: #171717; --color-neutral-600: #57534e; --color-neutral-700: #44403c; --color-neutral-800: #292524; --color-neutral-900: #1c1917; /* Everflow brand navy (used for CTAs, header, footer accents) */ --color-navy: #00205b; --color-navy-dark: #001a4e; --color-navy-darker: #000f35; /* Everflow Extended brand accents (Figma: Everflow/Extended) */ --color-brand-orange: #ff8200; --color-brand-light-blue: #418fde; --color-brand-gray: #7a7d81; --color-brand-secondary-blue: #003087; --color-card-navy: #001541; --color-brand-primary-50: #e2e7ee; --color-brand-primary-25: #eef2f8; /* ------------------------------------------------------------------------- * Typography — Font families * Figma: Display/Heading → Inter Tight | Paragraph/Label → Inter * ACF overrides --font1 / --font2 via WP Admin → Theme Settings → Styles. * Set --font1 = "Inter Tight" and --font2 = "Inter" in WP Admin. * ---------------------------------------------------------------------- */ --font-heading: var(--font1, "Inter Tight", "Inter", sans-serif); --font-body: var(--font2, "Inter", sans-serif); --font-mono: "IBM Plex Mono", monospace; /* ------------------------------------------------------------------------- * Typography — Scale * All values sourced verbatim from Figma Foundation → Typography page. * ---------------------------------------------------------------------- */ /* Display — Inter Tight, weight 800 */ --text-display-xl: clamp(60px, 7vw, 96px); --text-display-lg: clamp(48px, 6vw, 72px); --text-display-md: clamp(40px, 5vw, 60px); --text-display-sm: clamp(34px, 4vw, 48px); /* Heading — Inter Tight, weight 700, line-height 110% */ --text-heading-xl: clamp(32px, 4vw, 48px); --text-heading-lg: clamp(26px, 3vw, 36px); --text-heading-md: clamp(22px, 2.5vw, 30px); --text-heading-sm: clamp(18px, 2vw, 24px); --text-heading-xs: clamp(16px, 1.5vw, 20px); /* Paragraph — Inter, weight 300, letter-spacing 2% */ --text-paragraph-lg: 18px; --text-paragraph-md: 16px; --text-paragraph-sm: 14px; --text-paragraph-xs: 12px; /* Label — Inter, weight 600, line-height 120% */ --text-label-lg: 18px; --text-label-md: 16px; --text-label-sm: 14px; --text-label-xs: 12px; /* Mono — IBM Plex Mono, weight 400, line-height 100% */ --text-mono-lg: 18px; --text-mono-md: 16px; --text-mono-sm: 14px; --text-mono-xs: 12px; /* ------------------------------------------------------------------------- * Container * Figma canvas: 1440px. Side padding: 64px. Content width: 1312px. * ---------------------------------------------------------------------- */ --container-max: 1440px; --container-padding: 64px; /* ------------------------------------------------------------------------- * Border radius * ---------------------------------------------------------------------- */ --radius-none: 0px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; /* ------------------------------------------------------------------------- * Shadow * ---------------------------------------------------------------------- */ --shadow-sm: 0 2px 8px rgba(28, 25, 23, 0.07); --shadow-md: 0 6px 20px rgba(28, 25, 23, 0.1); --shadow-lg: 0 12px 40px rgba(28, 25, 23, 0.14); /* ------------------------------------------------------------------------- * Spacing (component-level) * Section padding → --section-padding-top / bottom via ACF. * ---------------------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* ------------------------------------------------------------------------- * Z-index * ---------------------------------------------------------------------- */ --z-base: 0; --z-raised: 1; --z-dropdown: 100; --z-sticky: 200; --z-modal: 300; --z-toast: 400; /* ------------------------------------------------------------------------- * Transition * ---------------------------------------------------------------------- */ --ease-default: 0.2s ease; --ease-fast: 0.15s ease; --ease-slow: 0.35s ease; /* ------------------------------------------------------------------------- * Brand + legacy compatibility * Colours, buttons and spacing live here (design system) — no longer set * via Theme Settings → Styles. Legacy CSS reads --primary/--secondary/etc. * ---------------------------------------------------------------------- */ --primary: var(--color-navy); /* #00205B */ --secondary: var(--color-brand-orange); /* #FF8200 */ --tertiary: var(--color-brand-light-blue); /* #418FDE */ --button-radius: var(--radius-sm); /* 4px */ --button-padding: 10px 20px; --spacing-small: 15px; --spacing-medium: 30px; --spacing-large: 60px; --section-padding-top: 32px; --section-padding-bottom: 32px; } @media (max-width: 767px) { :root { --section-padding-top: 32px; --section-padding-bottom: 32px; } }