/* ========================================================================== S.K. Marine International — Design Tokens Source of truth: DESIGN_SYSTEM.md §18 LIGHT-DOMINANT REVISION The palette is unchanged. What changed is the ratio: light grounds now carry ~70% of the page and navy is reserved for punctuation (hero, cinematic band, CTA, footer). That inversion has a hard consequence. Per DESIGN_SYSTEM.md §0 Finding 2, Teal (2.90:1), Aqua (1.81:1) and Orange (2.71:1) ALL fail as text on light grounds. Two new tokens carry the marine accent where light now dominates: --teal-deep #0A6F6C 5.72:1 on Ice — marine accent, passes AA --slate-deep #586679 5.20:1 on Mist — plain Slate fails there at 4.23 Teal and Aqua remain in use, but only on the dark punctuation sections. ========================================================================== */ @font-face { font-family: 'Manrope'; src: url('../fonts/manrope-var.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ====================================================================== 1. COLOUR — raw palette (unchanged from DESIGN_SYSTEM.md) ====================================================================== */ --navy-deep: #061923; --navy-midnight: #081F2C; --navy-ocean: #0B5269; --charcoal: #17212B; --teal: #0EA5A0; /* DARK grounds only */ --aqua: #36D1C4; /* DARK grounds only */ --ice: #F7FAFC; --mist: #E8F4F3; --white: #FFFFFF; --slate: #64748B; --slate-light: #94A3B8; /* muted text on DARK */ --orange: #FF6B35; --orange-hover: #FF7F4F; /* ----- Added for the light-dominant scheme — both contrast-verified ----- */ --teal-deep: #0A6F6C; /* marine accent on LIGHT — 5.72:1 on Ice */ --slate-deep: #586679; /* muted text on LIGHT — 5.20:1 on Mist */ /* ====================================================================== SEMANTIC — light is now the default ground ====================================================================== */ --surface-page: var(--ice); /* the page's base ground */ --surface-alt: var(--mist); /* alternating band */ --surface-card: var(--white); /* cards on light */ --surface-inset: #F0F5F7; /* subtly recessed panel */ /* Dark punctuation — hero, cinematic band, CTA, footer */ --surface-dark: var(--navy-deep); --surface-dark-alt: var(--navy-midnight); --surface-dark-card: #0A2431; /* ----- Text on LIGHT (the default) ----- */ --text-primary: var(--charcoal); /* 15.54:1 on Ice AAA */ --text-muted: var(--slate-deep); /* 5.20:1 on Mist AA */ --text-accent: var(--navy-ocean); /* 8.26:1 on Ice AAA */ --text-marine: var(--teal-deep); /* 5.72:1 on Ice AA */ /* ----- Text on DARK (punctuation only) ----- */ --text-on-dark: var(--ice); /* 17.11:1 AAA */ --text-on-dark-muted: var(--slate-light); /* 6.99:1 AA */ --text-on-dark-accent: var(--aqua); /* 9.46:1 AAA */ /* ----- Borders ----- */ --border-light: rgba(11, 82, 105, 0.13); --border-light-strong: rgba(11, 82, 105, 0.26); --border-dark: rgba(54, 209, 196, 0.14); --border-dark-strong: rgba(54, 209, 196, 0.28); /* ----- Action ----- */ --action-bg: var(--orange); --action-ink: var(--charcoal); /* 5.75:1 PASS — never white (2.84:1 FAIL) */ --focus-ring: var(--navy-ocean); --focus-ring-dark: var(--aqua); /* ----- Gradients ----- */ --grad-depth: linear-gradient(180deg, #061923 0%, #081F2C 100%); --grad-marine: linear-gradient(135deg, #0B5269 0%, #0A6F6C 100%); --grad-scrim: linear-gradient(180deg, rgba(6, 25, 35, 0.15) 0%, rgba(6, 25, 35, 0.72) 55%, rgba(6, 25, 35, 0.94) 100%); --grad-hairline-light: linear-gradient(90deg, transparent, rgba(11, 82, 105, 0.30), transparent); --grad-hairline: linear-gradient(90deg, transparent, rgba(54, 209, 196, 0.45), transparent); /* ====================================================================== 2–3. TYPOGRAPHY ====================================================================== */ --font-primary: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; --fs-display: clamp(2.75rem, 6.5vw, 5.75rem); --fs-h1: clamp(2.25rem, 4.8vw, 4rem); --fs-h2: clamp(1.875rem, 3.6vw, 3rem); --fs-h3: clamp(1.375rem, 2.2vw, 2rem); --fs-h4: clamp(1.1875rem, 1.6vw, 1.5rem); --fs-h5: 1.125rem; --fs-lead: clamp(1.125rem, 1.6vw, 1.375rem); --fs-body: 1.0625rem; --fs-small: 0.9375rem; --fs-caption: 0.8125rem; --fs-eyebrow: 0.75rem; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --lh-display: 0.98; --lh-tight: 1.08; --lh-snug: 1.25; --lh-body: 1.65; --lh-relaxed: 1.75; --ls-display: -0.035em; --ls-h1: -0.028em; --ls-h2: -0.022em; --ls-h3: -0.015em; --ls-body: 0; --ls-eyebrow: 0.16em; --ls-button: 0.01em; --measure-prose: 68ch; --measure-lead: 54ch; --measure-display: 20ch; /* ====================================================================== 9. SPACING ====================================================================== */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 5rem; --space-11: 6rem; --space-12: 8rem; --space-13: 10rem; --section-py: clamp(4rem, 9vw, 9rem); --section-py-lg: clamp(5rem, 12vw, 12rem); --section-py-sm: clamp(2.5rem, 5vw, 4rem); --section-gap: clamp(2.5rem, 5vw, 4.5rem); --section-gap-tight: clamp(1.5rem, 3vw, 2.5rem); /* ====================================================================== 10. LAYOUT ====================================================================== */ --container-max: 1280px; --container-wide: 1440px; --container-text: 760px; --container-narrow: 620px; --gutter: clamp(1.25rem, 4vw, 3rem); --grid-gap: clamp(1.25rem, 2.5vw, 2rem); --grid-gap-lg: clamp(2rem, 4vw, 3rem); /* ====================================================================== 6. RADIUS ====================================================================== */ --radius-xs: 2px; --radius-sm: 4px; --radius-btn: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 999px; /* ====================================================================== 7. SHADOW — navy-tinted, two-layer. These now do real work, because light grounds dominate and shadows actually read on them. ====================================================================== */ --shadow-sm: 0 1px 2px rgba(6, 25, 35, 0.05), 0 1px 3px rgba(6, 25, 35, 0.08); --shadow-md: 0 2px 4px rgba(6, 25, 35, 0.05), 0 8px 16px rgba(6, 25, 35, 0.07); --shadow-lg: 0 4px 8px rgba(6, 25, 35, 0.05), 0 16px 32px rgba(6, 25, 35, 0.09); --shadow-xl: 0 8px 16px rgba(6, 25, 35, 0.06), 0 24px 48px rgba(6, 25, 35, 0.11); --shadow-cta: 0 8px 24px rgba(255, 107, 53, 0.28); --shadow-dark: 0 12px 32px rgba(0, 0, 0, 0.45); /* ====================================================================== 15. MOTION ====================================================================== */ --dur-instant: 100ms; --dur-fast: 180ms; --dur-base: 280ms; --dur-slow: 480ms; --dur-slower: 720ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --z-base: 1; --z-sticky: 90; --z-header: 100; --z-overlay: 200; }