/* ========================================================================== RRHA design tokens — copied verbatim from the RRHA design system (`RRHA design system complete/tokens/*.css`): fonts, colors, typography, spacing and effects, concatenated in the order styles.css imports them. Edit the design system, not this file. ========================================================================== */ /* RRHA webfonts. Display/headings: Poppins (geometric rounded sans, matches the wordmark energy). Body/UI: Open Sans (clean humanist companion). NOTE: exact site fonts were not supplied — these are close Google Fonts matches. Replace with licensed brand files if the RRHA brand specifies different faces. */ /* Webfonts are loaded from a in the page instead of an @import, so they start downloading in parallel with this stylesheet. Original design-system rule kept here for reference: @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Open+Sans:wght@400;500;600;700&display=swap'); */ /* RRHA color system — extracted from the approved logo + live site */ :root { /* Brand blue (logo wordmark, links, active nav) */ --blue-500: #0757C8; --blue-600: #0757C8; --blue-700: #063A92; --blue-grad: linear-gradient(135deg, #0757C8 0%, #063A92 100%); /* Navy — the workhorse dark. Headings, footer, dark cards, primary buttons */ --navy-900: #08213F; --navy-800: #0A2547; --navy-700: #12335C; --navy-600: #1C4574; /* Gold / amber — eyebrows, phone numbers, check ticks, high-emphasis CTAs */ --gold-400: #FFC21C; --gold-500: #F5A623; --gold-600: #F5A000; --gold-grad: linear-gradient(135deg, #FFA900 0%, #FFC21C 55%, #F5A000 100%); /* Red — logo accent, urgent/booking CTAs */ --red-500: #F10A18; --red-600: #E30613; --red-700: #DD0016; /* Green — success, "best value", positive states */ --green-500: #2E9E5B; --green-600: #248049; /* Neutrals */ --white: #FFFFFF; --gray-50: #F5F7FA; --gray-100: #EDF1F6; --gray-200: #E3E8F0; --gray-300: #CFD8E4; --gray-400: #A6B3C4; --gray-500: #6B7A90; --gray-600: #45566B; --gray-700: #2C3A4E; /* ---- Semantic aliases ---- */ --color-primary: var(--navy-800); --color-primary-hover: var(--navy-900); --color-accent: var(--gold-500); --color-accent-hover: var(--gold-600); --color-link: var(--blue-600); --color-danger: var(--red-600); --color-success: var(--green-500); --surface-page: var(--white); --surface-subtle: var(--gray-50); --surface-card: var(--white); --surface-dark: var(--navy-800); --surface-dark-deep: var(--navy-900); --border-color: var(--gray-200); --border-strong: var(--gray-300); --text-heading: var(--navy-800); --text-body: var(--gray-600); --text-muted: var(--gray-500); --text-inverse: var(--white); --text-eyebrow: var(--gold-500); --text-link: var(--blue-600); /* icon medallions (dark circle with gold/white glyph) */ --icon-medallion-bg: var(--navy-800); --icon-medallion-fg: var(--gold-500); } /* RRHA typography scale */ :root { --font-display: 'Poppins', 'Segoe UI', system-ui, sans-serif; --font-body: 'Open Sans', 'Segoe UI', system-ui, sans-serif; /* Display / headings (Poppins) */ --text-hero: 700 48px/1.12 var(--font-display); /* page hero H1 */ --text-h1: 700 38px/1.15 var(--font-display); --text-h2: 700 30px/1.2 var(--font-display); --text-h3: 600 22px/1.25 var(--font-display); --text-h4: 600 18px/1.3 var(--font-display); --text-eyebrow-type: 600 14px/1.2 var(--font-display); /* pair with letter-spacing + uppercase */ --text-stat: 800 40px/1 var(--font-display); /* Body / UI (Open Sans) */ --text-lead: 400 18px/1.6 var(--font-body); --text-base: 400 16px/1.6 var(--font-body); --text-sm: 400 14px/1.55 var(--font-body); --text-xs: 400 13px/1.5 var(--font-body); --text-label: 600 14px/1.4 var(--font-body); /* form labels */ --text-button: 600 15px/1 var(--font-display); /* letter-spacing helpers */ --tracking-eyebrow: 0.12em; /* uppercase eyebrows / nav */ --tracking-tight: -0.01em; /* large display headings */ } /* RRHA spacing, radii & layout tokens (4px base grid) */ :root { --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; --space-24: 96px; /* section rhythm */ --section-y: 80px; --container-max: 1200px; --container-pad: 24px; /* radii */ --radius-sm: 6px; --radius-md: 8px; /* buttons, inputs */ --radius-lg: 12px; /* cards */ --radius-xl: 16px; /* large panels */ --radius-pill: 999px; --radius-circle: 50%; } /* RRHA shadows, borders & motion */ :root { /* soft, low-contrast elevation — RRHA cards sit on white/subtle-gray with a gentle lift */ --shadow-xs: 0 1px 2px rgba(10, 37, 71, 0.06); --shadow-sm: 0 2px 8px rgba(10, 37, 71, 0.06); --shadow-md: 0 6px 20px rgba(10, 37, 71, 0.08); --shadow-lg: 0 16px 40px rgba(10, 37, 71, 0.12); --shadow-card: 0 4px 16px rgba(10, 37, 71, 0.07); --border-width: 1px; --border-thin: 1px solid var(--border-color); /* accent underline used under eyebrows & section titles */ --accent-underline: 3px solid var(--gold-500); /* motion */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; }