/* =============================================================================
* HONORICH — Design Tokens
* Source of truth for colour, typography, spacing, motion, layout.
* Insert the Google Fonts preconnect / stylesheet block (see header comment) into
* the of every HTML page before any local stylesheet that uses these vars.
*
*
*
*
* ===========================================================================*/
:root {
/* ---------------------------------------------------------------------------
* Colour — brand palette
* ----------------------------------------------------------------------- */
--c-navy: #0B1F3A; /* primary brand — deep navy */
--c-navy-deep: #06122A; /* deeper navy for gradients & dark sections */
--c-navy-soft: #1B2F50; /* lighter navy tint for surfaces */
--c-gold: #C8A055; /* accent — premium gold */
--c-gold-soft: #D9BC7C; /* lighter gold for hover / sheen */
--c-gold-deep: #A6843B; /* darker gold for borders / pressed */
--c-bg: #FAF8F4; /* warm white — primary background */
--c-bg-soft: #F2EEE5; /* slightly darker cream for surfaces */
--c-text: #1A1A1A; /* primary text on light surfaces */
--c-text-muted: #5A6470; /* secondary text */
--c-line: #E5E0D4; /* hairline divider on warm white */
--c-line-dark: #2A3B57; /* hairline divider on navy */
--c-success: #2E7D5B; /* positive state */
--c-danger: #B23A3A; /* error / warning state */
/* ---------------------------------------------------------------------------
* Typography — families
* ----------------------------------------------------------------------- */
--ff-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
--ff-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
/* Type scale — clamp-based, fluid between 360px and 1920px */
--fs-display-1: clamp(3.5rem, 1.5rem + 6.5vw, 6rem); /* 56 → 96 */
--fs-display-2: clamp(2.75rem, 1.4rem + 4.5vw, 4.5rem); /* 44 → 72 */
--fs-h1: clamp(2.25rem, 1.2rem + 3.4vw, 3.5rem); /* 36 → 56 */
--fs-h2: clamp(1.75rem, 1rem + 2.4vw, 2.5rem); /* 28 → 40 */
--fs-h3: clamp(1.375rem, 0.95rem + 1.4vw, 1.875rem);/* 22 → 30 */
--fs-h4: clamp(1.125rem, 0.95rem + 0.6vw, 1.375rem);/* 18 → 22 */
--fs-body-lg: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);/* 17 → 20 */
--fs-body: 1rem; /* 16 base */
--fs-eyebrow: 0.8125rem; /* 14 — uppercase tracked label */
/* Line-heights */
--lh-display: 1.05;
--lh-heading: 1.15;
--lh-body: 1.6;
/* Letter-spacing */
--ls-display: -0.02em;
--ls-eyebrow: 0.14em;
/* Font weights */
--fw-light: 300;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-black: 800;
/* ---------------------------------------------------------------------------
* Spacing scale — 4 px base, 16 steps
* ----------------------------------------------------------------------- */
--sp-1: 0.25rem; /* 4 */
--sp-2: 0.5rem; /* 8 */
--sp-3: 0.75rem; /* 12 */
--sp-4: 1rem; /* 16 */
--sp-5: 1.5rem; /* 24 */
--sp-6: 2rem; /* 32 */
--sp-7: 2.5rem; /* 40 */
--sp-8: 3rem; /* 48 */
--sp-9: 4rem; /* 64 */
--sp-10: 5rem; /* 80 */
--sp-11: 6rem; /* 96 */
--sp-12: 7.5rem; /* 120 */
--sp-13: 9rem; /* 144 */
--sp-14: 11rem; /* 176 */
--sp-15: 13rem; /* 208 */
--sp-16: 16rem; /* 256 */
/* Section rhythm */
--section-y: clamp(4rem, 2rem + 6vw, 8rem);
/* ---------------------------------------------------------------------------
* Radius
* ----------------------------------------------------------------------- */
--r-sm: 4px;
--r-md: 8px;
--r-lg: 16px;
--r-xl: 28px;
--r-pill: 999px;
/* ---------------------------------------------------------------------------
* Shadow — three tiers + focus
* ----------------------------------------------------------------------- */
--sh-1: 0 1px 2px rgba(11, 31, 58, 0.06), 0 1px 1px rgba(11, 31, 58, 0.04);
--sh-2: 0 8px 24px rgba(11, 31, 58, 0.08), 0 2px 6px rgba(11, 31, 58, 0.05);
--sh-3: 0 24px 56px rgba(11, 31, 58, 0.14), 0 8px 16px rgba(11, 31, 58, 0.08);
--sh-focus: 0 0 0 3px rgba(200, 160, 85, 0.45);
/* ---------------------------------------------------------------------------
* Motion — durations + easing
* ----------------------------------------------------------------------- */
--d-fast: 150ms;
--d-base: 280ms;
--d-slow: 520ms;
--d-deliberate: 900ms;
--e-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* ease-out, default for hover */
--e-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ease-in-out, for scroll */
--e-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle spring for enter */
/* ---------------------------------------------------------------------------
* Layout — container, grid, breakpoint refs
* ----------------------------------------------------------------------- */
--container-max: 1240px;
--container-pad: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
--grid-cols: 12;
--grid-gap: clamp(1rem, 0.5rem + 1vw, 1.75rem);
--grid-gap-lg: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
/* Breakpoints — exposed as raw values for reference only; use @media in CSS */
--bp-sm: 640px;
--bp-md: 768px;
--bp-lg: 1024px;
--bp-xl: 1280px;
--bp-xxl: 1536px;
/* ---------------------------------------------------------------------------
* Z-index stack
* ----------------------------------------------------------------------- */
--z-base: 1;
--z-raised: 10;
--z-nav: 100;
--z-drawer: 200;
--z-modal: 1000;
--z-toast: 1100;
}
/* Honour reduced-motion preferences globally */
@media (prefers-reduced-motion: reduce) {
:root {
--d-fast: 0.01ms;
--d-base: 0.01ms;
--d-slow: 0.01ms;
--d-deliberate: 0.01ms;
}
}