/* ===================================================================== NACD Design Tokens --------------------------------------------------------------------- This is the single source of truth for the design system. To re-skin the whole site, edit values here and everything follows. ===================================================================== */ :root { /* ================================================================= BRAND COLOR SCALE Derived from the existing palette and rationalized into a scale. ================================================================= */ --color-primary: #4f7381; /* teal — main brand color */ --color-primary-50: #eef3f4; --color-primary-100: #dfe7ea; --color-primary-200: #c3d3d8; --color-primary-500: #4f7381; --color-primary-600: #3e5c67; --color-primary-700: #324a53; --color-secondary: #91b094; /* sage green */ --color-secondary-100: #e0e9e1; --color-secondary-200: #c6d6c7; --color-secondary-500: #91b094; --color-secondary-600: #6f8e72; --color-sand: #e3d1b0; /* warm tan / gold */ --color-sand-100: #f7f2e9; /* cream background */ --color-sand-200: #faf8f4; /* page background */ --color-sand-300: #ece0c9; --color-sand-500: #e3d1b0; --color-sand-600: #d4bc93; --color-blue-soft: #8cabba; --color-blue-soft-100: #dfe7ec; --color-blue-soft-200: #b1c6d0; --color-blue-soft-500: #8cabba; --color-blue-soft-600: #6e8e9e; --color-accent: #eb6c4f; /* coral / orange accent */ --color-accent-100: #fde8e1; --color-accent-500: #eb6c4f; --color-accent-600: #db7357; --color-accent-700: #c25a3e; /* Neutrals — no pure black; dark teal ink for all text */ --color-ink: #4F7382; /* body text — dark teal, not black */ --color-ink-muted: #5a6470; --color-ink-subtle: #8a929a; --color-line: #dfe7ec; /* borders / dividers */ --color-line-soft: #eef2f4; --color-surface: #ffffff; --color-surface-alt: var(--color-sand-200); --color-surface-raised: #ffffff; /* Semantic aliases */ --color-bg: var(--color-sand-200); --color-text: var(--color-ink); --color-text-muted: var(--color-ink-muted); --color-heading: var(--color-ink); --color-link: var(--color-primary); --color-link-hover: var(--color-primary-600); --color-border: var(--color-line); /* Bootstrap button overrides (kept for compatibility) */ --bs-success-rgb: 79, 115, 130; /* ================================================================= FLUID TYPE SCALE clamp(min, preferred, max) — type scales smoothly with viewport. Fixes "font too small on phone" without per-breakpoint jumps. To revert body to exactly 16px: set --fs-body: 1rem; ================================================================= */ --fs-display: clamp(2.5rem, 4.2vw + 1rem, 4.375rem); /* 40-70px hero */ --fs-h1: clamp(1.9rem, 2.6vw + 1rem, 2.5rem); /* 30-40px title */ --fs-h2: clamp(1.5rem, 1.8vw + 0.9rem, 2rem); /* 24-32px section */ --fs-h3: clamp(1.25rem, 1vw + 0.9rem, 1.625rem); /* 20-26px */ --fs-h4: clamp(1.125rem, 0.6vw + 0.9rem, 1.3125rem); /* 18-21px */ --fs-h5: clamp(1rem, 0.4vw + 0.9rem, 1.125rem); /* 16-18px */ --fs-body: clamp(1rem, 0.3vw + 0.92rem, 1.125rem); /* 16-18px body */ --fs-small: 0.875rem; /* 14px */ --fs-xs: 0.75rem; /* 12px */ /* Font weights */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Line heights */ --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.6; --lh-relaxed: 1.8; /* Letter spacing */ --ls-tight: -0.01em; --ls-normal: 0; --ls-wide: 0.02em; /* Type families */ --font-sans: "IBM Plex Sans Arabic", "Ghaith Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-heading: var(--font-sans); --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; /* ================================================================= SPACING SCALE Replaces ad-hoc 15/20/32/100px values with a consistent ramp. ================================================================= */ --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: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ /* ================================================================= RHYTHM TOKENS — the "unify across the site" levers Every heading, card title, and section uses these so spacing is consistent everywhere. Change one value → all follow. ================================================================= */ --title-margin-block-end: var(--space-4); /* h1-h4 bottom margin */ --title-margin-block-start: 0; --section-margin-block: var(--space-8); /* vertical gap between sections */ --section-margin-block-sm: var(--space-6); --card-title-margin-block-end: var(--space-3); /* card heading bottom */ --card-padding-inline: var(--space-4); --card-padding-block: var(--space-4); --card-gap: var(--space-4); --card-border-radius: var(--radius-lg); /* List / bullet text unification */ --list-item-gap: var(--space-2); --list-item-padding: var(--space-2); --list-marker-color: var(--color-primary); /* ================================================================= PAGE GUTTERS — fixes "margins too small on phone" Grows at each breakpoint. Used by .container and section padding. ================================================================= */ --page-gutter: var(--space-5); /* mobile 375px+ */ --section-padding-x: var(--space-4); /* ================================================================= RADII ================================================================= */ --radius-sm: 0.375rem; --radius: 0.75rem; --radius-lg: 1.5rem; --radius-xl: 2rem; --radius-pill: 999px; /* ================================================================= SHADOWS ================================================================= */ --shadow-sm: 0 1px 2px rgba(33, 37, 41, 0.06); --shadow: 0 4px 16px rgba(33, 37, 41, 0.10); --shadow-lg: 0 12px 32px rgba(33, 37, 41, 0.14); --shadow-xl: 0 24px 48px rgba(33, 37, 41, 0.18); /* ================================================================= LAYOUT ================================================================= */ --container-max: 1200px; --container-wide: 1320px; --header-height: 90px; --header-bg: var(--color-primary); /* ================================================================= TRANSITIONS ================================================================= */ --transition: 0.2s ease; --transition-slow: 0.4s ease; --transition-fast: 0.15s ease; /* ================================================================= Z-INDEX SCALE ================================================================= */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-header: 1000; --z-overlay: 2000; --z-modal: 3000; --z-chatbot: 2500; } /* ===================================================================== BREAKPOINT-DRIVEN TOKEN OVERRIDES Instead of scattering @media overrides across files, we shift the token values here so all responsive rules reference a single source. ===================================================================== */ /* Tablet ≥ 768px */ @media (min-width: 768px) { :root { --page-gutter: var(--space-5); /* 24px */ --section-padding-x: var(--space-5); } } /* Desktop ≥ 1024px */ @media (min-width: 1024px) { :root { --page-gutter: var(--space-6); /* 32px */ --section-padding-x: var(--space-6); --header-height: 100px; } } /* Large desktop ≥ 1280px */ @media (min-width: 1280px) { :root { --section-margin-block: var(--space-9); } }