/* ============================================================================= XIMGlobal — Design Tokens Phase 2 deliverable • CSS custom properties ============================================================================= This is the single source of truth for all design values in Phase 5. Every component and page reads from these tokens — do not hard-code. Token naming: --{category}-{role}-{modifier?} e.g. --color-brand-primary --color-text-default --space-6 --shadow-md ============================================================================= */ :root { /* --------------------------------------------------------------------------- COLOR — Brand Deep marine blue retained from original brand; gold refined to a warmer, more editorial saffron; teal introduced as complementary accent. --------------------------------------------------------------------------- */ --color-brand-primary: #0B4F8A; /* marine blue — hero, primary buttons */ --color-brand-primary-dark: #083966; /* hover / pressed state */ --color-brand-primary-light: #2A74B4; /* link hover, subtle emphasis */ --color-brand-accent: #D4920C; /* saffron — CTA, highlights */ --color-brand-accent-dark: #A87008; /* hover on accent */ --color-brand-accent-light: #F0C35A; /* subtle accent backgrounds */ --color-brand-support: #0E5D5D; /* teal — data viz, success chips */ --color-brand-support-dark: #0A4646; /* --------------------------------------------------------------------------- COLOR — Text All primary content reads against white. Every value here passes WCAG AA (4.5:1) on a white surface; most pass AAA. --------------------------------------------------------------------------- */ --color-text-default: #0F1623; /* body, paragraphs — 18.4:1 on white (AAA) */ --color-text-strong: #000000; /* headings when max emphasis needed */ --color-text-muted: #4A5668; /* captions, helper — 8.3:1 (AAA) */ --color-text-subtle: #6B7280; /* timestamps, meta — 5.2:1 (AA) */ --color-text-inverse: #FFFFFF; /* text on dark/brand backgrounds */ --color-text-link: var(--color-brand-primary); --color-text-link-hover: var(--color-brand-primary-dark); /* NOTE: Any shade between --color-text-subtle (#6B7280) and --color-text-default is FORBIDDEN for primary content. This prevents the "grey text looks unprofessional" problem flagged in the client brief. */ /* --------------------------------------------------------------------------- COLOR — Surfaces Backgrounds and card fills, ordered from lightest to darkest. --------------------------------------------------------------------------- */ --color-surface-canvas: #FFFFFF; /* default page background */ --color-surface-subtle: #F7F5F0; /* warm off-white — alternating sections */ --color-surface-raised: #FFFFFF; /* cards */ --color-surface-sunken: #EDEAE2; /* input backgrounds, inset wells */ --color-surface-brand: var(--color-brand-primary); /* hero / brand sections */ --color-surface-brand-dark: #062747; /* deep brand surface */ /* --------------------------------------------------------------------------- COLOR — Border --------------------------------------------------------------------------- */ --color-border-subtle: #E5E1D6; /* hairline dividers */ --color-border-default: #CFC9BA; /* input borders, card outlines */ --color-border-strong: #9B9482; /* emphasized borders */ --color-border-brand: var(--color-brand-primary); --color-border-focus: var(--color-brand-accent); /* --------------------------------------------------------------------------- COLOR — Semantic (states) --------------------------------------------------------------------------- */ --color-success: #1B7A3F; /* 4.9:1 on white */ --color-success-bg: #E8F5ED; --color-warning: #B45309; /* 5.2:1 on white */ --color-warning-bg: #FDF3E3; --color-danger: #B42318; /* 5.5:1 on white */ --color-danger-bg: #FDE8E6; --color-info: #1251A3; /* 6.3:1 on white */ --color-info-bg: #E7F0FB; /* --------------------------------------------------------------------------- TYPOGRAPHY — Families Fraunces: editorial serif with optical sizing, humanist warmth + authority. Manrope: geometric sans with rounded terminals, refined body/UI. JetBrains Mono: reserved for data tables (pricing, stats) and code. --------------------------------------------------------------------------- */ --font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif; --font-body: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace; /* --------------------------------------------------------------------------- TYPOGRAPHY — Scale (desktop defaults) Modular scale, ratio ≈ 1.25 (major third). All values in rem. Body base = 17px (1.0625rem) — preserves current density, meets brief's "readable without zooming" requirement on every screen ≥ 360px. --------------------------------------------------------------------------- */ --font-size-2xs: 0.75rem; /* 12px — legal fine print only */ --font-size-xs: 0.8125rem; /* 13px — metadata, tags */ --font-size-sm: 0.9375rem; /* 15px — captions, small buttons */ --font-size-base: 1.0625rem; /* 17px — DEFAULT body */ --font-size-md: 1.1875rem; /* 19px — lead paragraphs, emphasized body */ --font-size-lg: 1.375rem; /* 22px — H4 / subheading */ --font-size-xl: 1.75rem; /* 28px — H3 */ --font-size-2xl: 2.25rem; /* 36px — H2 */ --font-size-3xl: 3rem; /* 48px — H1 */ --font-size-4xl: 4rem; /* 64px — hero display */ --font-size-5xl: 5.5rem; /* 88px — 404 / very large display only */ /* --------------------------------------------------------------------------- TYPOGRAPHY — Weight Fraunces: 400 regular, 500 medium, 600 semibold, 900 black (variable font) Manrope: 400 regular, 500 medium, 600 semibold, 700 bold (variable font) --------------------------------------------------------------------------- */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-black: 900; /* --------------------------------------------------------------------------- TYPOGRAPHY — Line-height & tracking --------------------------------------------------------------------------- */ --line-height-tight: 1.25; /* display headings, H1–H2 */ --line-height-snug: 1.45; /* H3–H4, short punchy copy */ --line-height-normal: 1.75; /* DEFAULT body */ --line-height-relaxed:1.9; /* long-form reading (policy pages) */ --tracking-tight: -0.02em; /* large Fraunces headings — optical correction */ --tracking-normal: 0; --tracking-wide: 0.04em; /* all-caps eyebrows & labels */ --tracking-wider: 0.12em; /* small all-caps chips, section kickers */ /* --------------------------------------------------------------------------- SPACING SCALE 8px-based grid. Every padding/margin on the site must come from this scale. Exception: hairline values (1–2px) for borders. --------------------------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 2.5rem; /* 40px */ --space-8: 3rem; /* 48px */ --space-9: 4rem; /* 64px */ --space-10: 5rem; /* 80px */ --space-11: 6rem; /* 96px */ --space-12: 8rem; /* 128px */ /* Section rhythm — use these, not raw space values, for section padding */ --section-pad-y: var(--space-7); /* 40px desktop */ --section-pad-y-sm: var(--space-5); /* 24px for dense sections */ --section-pad-y-lg: var(--space-8); /* 48px for flagship sections */ --container-pad-x: var(--space-5); /* 24px — default container side padding */ --container-max: 1280px; /* reduced from 1500px for better reading measure */ /* --------------------------------------------------------------------------- RADIUS Restrained — no pill buttons on cards, no random radii. Two primary options (sm for controls, md for cards) plus the pill CTA. --------------------------------------------------------------------------- */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 6px; /* inputs, small buttons, chips */ --radius-md: 12px; /* cards, modals, form wells */ --radius-lg: 20px; /* hero image crops, pricing cards */ --radius-pill: 999px; /* CTA buttons, badges */ --radius-full: 50%; /* avatars, stat circles */ /* --------------------------------------------------------------------------- SHADOW — paired depth system Two "moods" of shadow: neutral (for UI cards) and brand-tinted (for CTAs and hover states on primary surfaces). --------------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px 0 rgba(15, 22, 35, 0.04); --shadow-sm: 0 2px 4px -1px rgba(15, 22, 35, 0.06), 0 1px 2px 0 rgba(15, 22, 35, 0.04); --shadow-md: 0 4px 12px -2px rgba(15, 22, 35, 0.08), 0 2px 4px -1px rgba(15, 22, 35, 0.04); --shadow-lg: 0 12px 28px -4px rgba(15, 22, 35, 0.12), 0 4px 8px -2px rgba(15, 22, 35, 0.06); --shadow-xl: 0 24px 48px -8px rgba(15, 22, 35, 0.16), 0 8px 16px -4px rgba(15, 22, 35, 0.08); /* Brand-tinted glow — use sparingly, only on hover of primary CTAs and the floating WhatsApp button. Never on plain text links. */ --shadow-brand: 0 8px 24px -4px rgba(11, 79, 138, 0.35); --shadow-accent:0 8px 24px -4px rgba(212, 146, 12, 0.38); /* Inset for pressed / sunken inputs */ --shadow-inset: inset 0 1px 2px 0 rgba(15, 22, 35, 0.08); /* Focus ring — NEVER remove focus outlines, only restyle them. */ --focus-ring: 0 0 0 3px rgba(212, 146, 12, 0.45); /* saffron at 45% alpha */ --focus-ring-on-dark: 0 0 0 3px rgba(240, 195, 90, 0.6); /* --------------------------------------------------------------------------- MOTION — duration Tier-1: instant feedback (<150ms). Tier-2: state change (200-300ms). Tier-3: scene change (400-600ms, reserved for modals / page transitions). --------------------------------------------------------------------------- */ --duration-instant: 100ms; --duration-fast: 180ms; --duration-base: 260ms; --duration-slow: 420ms; --duration-slower: 600ms; /* --------------------------------------------------------------------------- MOTION — easing These four curves cover every scenario. Do not introduce arbitrary beziers. --------------------------------------------------------------------------- */ --ease-linear: linear; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* default: accelerate in, settle out */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* symmetrical state change */ --ease-emphatic: cubic-bezier(0.2, 0.9, 0.3, 1.2); /* slight overshoot — dropdown reveals, toasts */ --ease-decel: cubic-bezier(0, 0, 0.2, 1); /* element entering viewport */ /* --------------------------------------------------------------------------- Z-INDEX SCALE Named layers — never write raw z-index: 9999 anywhere. --------------------------------------------------------------------------- */ --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; /* sticky header */ --z-overlay: 300; /* mobile menu backdrop */ --z-drawer: 400; /* mobile nav drawer */ --z-modal: 500; --z-toast: 600; --z-tooltip: 700; --z-float: 800; /* WhatsApp float button */ /* --------------------------------------------------------------------------- BREAKPOINTS Mobile-first. These match the media queries used across the site. Use in JS via getComputedStyle or matchMedia('(min-width: 48em)'). --------------------------------------------------------------------------- */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1440px; /* --------------------------------------------------------------------------- TAP TARGETS (accessibility floor) Every clickable element must meet these minimums. --------------------------------------------------------------------------- */ --tap-min: 44px; /* WCAG 2.5.5 target-size AA */ } /* ============================================================================= RESPONSIVE TYPOGRAPHY OVERRIDES Mobile gets a slightly smaller display tier but preserves body/caption sizes. Small-mobile (≤480px) lifts the ABSOLUTE floor: no text below 14px anywhere. ============================================================================= */ @media (max-width: 767px) { :root { --font-size-4xl: 2.75rem; /* 44px — hero display (down from 64) */ --font-size-3xl: 2.25rem; /* 36px — H1 (down from 48) */ --font-size-2xl: 1.75rem; /* 28px — H2 (down from 36) */ --font-size-xl: 1.4375rem; /* 23px — H3 (down from 28) */ --font-size-lg: 1.1875rem; /* 19px — H4 */ --font-size-md: 1.0625rem; /* 17px — lead */ --font-size-base:1rem; /* 16px — body FLOOR on mobile */ --font-size-sm: 0.9375rem; /* 15px */ --font-size-xs: 0.875rem; /* 14px — ABSOLUTE minimum, no text below this */ --section-pad-y: var(--space-5); /* 24px */ --section-pad-y-sm: var(--space-4); /* 16px */ --section-pad-y-lg: var(--space-6); /* 32px */ --container-pad-x: var(--space-4); /* 16px */ } } @media (max-width: 479px) { :root { --font-size-4xl: 2.25rem; /* 36px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-xl: 1.25rem; /* 20px */ /* body / sm / xs stay at mobile floors — DO NOT shrink further */ } } /* ============================================================================= REDUCED MOTION — accessibility requirement (WCAG 2.3.3) When the user has prefers-reduced-motion enabled, slash durations to the shortest tier. Fade animations remain (they don't cause vestibular issues); slide, parallax, and scale animations become instantaneous. ============================================================================= */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0.01ms; --duration-fast: 0.01ms; --duration-base: 0.01ms; --duration-slow: 0.01ms; --duration-slower: 0.01ms; } } /* ============================================================================= DARK MODE (future / opt-in) Not a Phase-5 deliverable, but tokens are structured to make it trivial. Uncomment and tune when ready. ============================================================================= */ /* @media (prefers-color-scheme: dark) { :root { --color-text-default: #E8EAED; --color-text-strong: #FFFFFF; --color-text-muted: #A9B0BA; --color-text-subtle: #7B8390; --color-surface-canvas: #0F1623; --color-surface-subtle: #151D2C; --color-surface-raised: #1C2638; --color-border-subtle: #2A3547; --color-border-default: #3A4558; } } */