/* ============================================================ DESIGN TOKENS — Alliance Insurance v1 ============================================================ Two-layer system, ported from ACOCI's v3.2 fluid engine. Layer 1 — brand primitives (--brand-*) project-specific Layer 2 — semantic roles (--color-*) stable across projects Components reference Layer 2 only; never reach for raw hex or for Layer 1 directly outside this file. Sections: 1. Fluid Engine 2. Type Scale 3. Spacing 4. Colors 5. Typography 6. Border Radius 7. Shadows 8. Transitions 9. Z-Index 10. Layout ============================================================ */ /* ──────────────────────────────────────────────────────────── 1. FLUID ENGINE --fluid-progress scales 0rem → 1rem as the viewport moves from --vp-min to --vp-max. ──────────────────────────────────────────────────────────── */ :root { --vp-min: 360; --vp-max: 1340; --fluid-progress: clamp( 0rem, (100vw - (var(--vp-min) * 1px)) / (var(--vp-max) - var(--vp-min)), 1rem ); } /* ──────────────────────────────────────────────────────────── 2. TYPE SCALE Modular scale; Alliance leans slightly more confident than ACOCI's editorial restraint, so max-ratio bumps to 1.5. ──────────────────────────────────────────────────────────── */ :root { --fluid-min-size: 16; --fluid-max-size: 18; --fluid-min-ratio: 1.25; --fluid-max-ratio: 1.5; } :root { --size-min-0: calc(var(--fluid-min-size) / 16); --size-max-0: calc(var(--fluid-max-size) / 16); --step-0: calc((var(--size-min-0) * 1rem) + (var(--size-max-0) - var(--size-min-0)) * var(--fluid-progress)); --size-min--1: calc(var(--size-min-0) / var(--fluid-min-ratio)); --size-max--1: calc(var(--size-max-0) / var(--fluid-max-ratio)); --step--1: calc((var(--size-min--1) * 1rem) + (var(--size-max--1) - var(--size-min--1)) * var(--fluid-progress)); --size-min--2: calc(var(--size-min--1) / var(--fluid-min-ratio)); --size-max--2: calc(var(--size-max--1) / var(--fluid-max-ratio)); --step--2: calc((var(--size-min--2) * 1rem) + (var(--size-max--2) - var(--size-min--2)) * var(--fluid-progress)); --size-min-1: calc(var(--size-min-0) * var(--fluid-min-ratio)); --size-max-1: calc(var(--size-max-0) * var(--fluid-max-ratio)); --step-1: calc((var(--size-min-1) * 1rem) + (var(--size-max-1) - var(--size-min-1)) * var(--fluid-progress)); --size-min-2: calc(var(--size-min-1) * var(--fluid-min-ratio)); --size-max-2: calc(var(--size-max-1) * var(--fluid-max-ratio)); --step-2: calc((var(--size-min-2) * 1rem) + (var(--size-max-2) - var(--size-min-2)) * var(--fluid-progress)); --size-min-3: calc(var(--size-min-2) * var(--fluid-min-ratio)); --size-max-3: calc(var(--size-max-2) * var(--fluid-max-ratio)); --step-3: calc((var(--size-min-3) * 1rem) + (var(--size-max-3) - var(--size-min-3)) * var(--fluid-progress)); --size-min-4: calc(var(--size-min-3) * var(--fluid-min-ratio)); --size-max-4: calc(var(--size-max-3) * var(--fluid-max-ratio)); --step-4: calc((var(--size-min-4) * 1rem) + (var(--size-max-4) - var(--size-min-4)) * var(--fluid-progress)); --size-min-5: calc(var(--size-min-4) * var(--fluid-min-ratio)); --size-max-5: calc(var(--size-max-4) * var(--fluid-max-ratio)); --step-5: calc((var(--size-min-5) * 1rem) + (var(--size-max-5) - var(--size-min-5)) * var(--fluid-progress)); --size-min-6: calc(var(--size-min-5) * var(--fluid-min-ratio)); --size-max-6: calc(var(--size-max-5) * var(--fluid-max-ratio)); --step-6: calc((var(--size-min-6) * 1rem) + (var(--size-max-6) - var(--size-min-6)) * var(--fluid-progress)); } /* ──────────────────────────────────────────────────────────── 3. SPACING ──────────────────────────────────────────────────────────── */ :root { --sp-min: 1; --sp-max: 2; --base-sp: calc( var(--sp-min) * 1rem + (var(--sp-max) - var(--sp-min)) * var(--fluid-progress) ); } :root { /* At 360px: base = 16px · At 1340px: base = 32px */ --space-2xs: calc(var(--base-sp) * 0.125); /* 2 → 4px */ --space-xs: calc(var(--base-sp) * 0.25); /* 4 → 8px */ --space-sm: calc(var(--base-sp) * 0.5); /* 8 → 16px */ --space-md: var(--base-sp); /* 16 → 32px */ --space-lg: calc(var(--base-sp) * 2); /* 32 → 64px */ --space-xl: calc(var(--base-sp) * 3); /* 48 → 96px */ --space-2xl: calc(var(--base-sp) * 4.5); /* 72 → 144px */ --space-3xl: calc(var(--base-sp) * 7); /* 112 → 224px */ } /* ──────────────────────────────────────────────────────────── 4. COLORS Layer 1 — Alliance brand primitives. Anchored in theme.json palette + observed legacy site. No warm accent — Alliance is all teal/blue/navy. ──────────────────────────────────────────────────────────── */ :root { /* Layer 1: Brand primitives — eight colors, each with a defended job. Hover states, soft tints, and gradient ends are *derived* from these via color-mix() at the call site. Don't add a new primitive here without proving the existing palette can't carry the weight. */ --brand-cyprus: #013941; /* Deepest teal — headings, dark surfaces, footer */ --brand-mosque: #055F6B; /* Mid teal — links, secondary action */ --brand-downy: #5CC4CE; /* Light teal — primary action / accent */ --brand-navy: #003C71; /* Sail — gradient anchor */ --brand-ink: #1F2D30; /* Body text */ --brand-mist: #EFF8FA; /* Soft tint band */ --brand-sand: #F5F5F2; /* Warm neutral band */ --brand-surface: #FFFFFF; /* White */ /* Brand gradients — composed from primitives */ --brand-grad-hero: linear-gradient(251.6deg, var(--brand-downy) 18.7%, var(--brand-navy) 84.3%); --brand-grad-deep: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-mosque) 55%, var(--brand-downy) 100%); --brand-grad-cta: linear-gradient(135deg, var(--brand-navy) 0%, color-mix(in srgb, var(--brand-cyprus) 80%, black) 100%); --brand-grad-soft: linear-gradient(135deg, rgba(92,196,206,0.14), rgba(0,60,113,0.08)); /* Shadow tint — anchored to Cyprus */ --shadow-color: 189deg, 97%, 13%; } :root { /* Layer 2: Semantic roles — what components reach for. Hover/soft variants are derived from primitives via color-mix(), not separately defined. */ --color-primary: var(--brand-downy); --color-primary-hover: color-mix(in srgb, var(--brand-downy) 85%, black); --color-primary-soft: color-mix(in srgb, var(--brand-downy) 35%, var(--brand-surface)); --color-secondary: var(--brand-mosque); --color-secondary-hover:color-mix(in srgb, var(--brand-mosque) 80%, white); --color-dark: var(--brand-cyprus); --color-info: var(--brand-navy); --color-text: var(--brand-ink); --color-text-muted: color-mix(in srgb, var(--brand-ink) 70%, white); --color-text-subtle: rgba(31, 45, 48, 0.70); --color-text-on-dark: var(--brand-surface); --color-text-on-dark-muted: rgba(255, 255, 255, 0.78); --color-heading: var(--brand-cyprus); --color-surface: var(--brand-surface); --color-surface-base: var(--brand-surface); --color-surface-soft: var(--brand-mist); --color-surface-warm: var(--brand-sand); --color-surface-dark: var(--brand-cyprus); --color-border: color-mix(in srgb, var(--brand-cyprus) 10%, transparent); --color-overlay: color-mix(in srgb, var(--brand-cyprus) 55%, transparent); --color-link: var(--brand-mosque); --color-link-hover: color-mix(in srgb, var(--brand-mosque) 80%, white); --color-danger: #C0392B; --color-success: #1F8B5C; --grad-hero: var(--brand-grad-hero); --grad-deep: var(--brand-grad-deep); --grad-cta: var(--brand-grad-cta); --grad-soft: var(--brand-grad-soft); } /* ──────────────────────────────────────────────────────────── 5. TYPOGRAPHY ──────────────────────────────────────────────────────────── */ :root { --heading-display: var(--step-5); --heading-1: var(--step-4); --heading-2: var(--step-3); --heading-3: var(--step-2); --heading-4: var(--step-1); --heading-5: var(--step-0); --body-xl: var(--step-1); --body-lg: calc(var(--step-0) * 1.125); --body-base: var(--step-0); --body-sm: var(--step--1); --body-xs: var(--step--2); --leading-tight: 1.08; --leading-snug: 1.18; --leading-normal: 1.5; --leading-relaxed: 1.6; --tracking-tight: -0.03em; --tracking-snug: -0.02em; --tracking-wide: 0.12em; --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; --weight-black: 800; --font-body: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-heading: var(--font-body); } /* ──────────────────────────────────────────────────────────── 6. BORDER RADIUS ──────────────────────────────────────────────────────────── */ :root { --radius-xs: calc(var(--space-sm) * 0.5); --radius-sm: calc(var(--space-sm) * 0.85); --radius-md: calc(var(--space-sm) * 1.325); --radius-lg: calc(var(--space-sm) * 2); --radius-xl: calc(var(--space-sm) * 3); --radius-full: 9999px; } /* ──────────────────────────────────────────────────────────── 7. SHADOWS ──────────────────────────────────────────────────────────── */ :root { --shadow-xs: 0 1px 2px 0 hsl(var(--shadow-color) / 0.06); --shadow-sm: 0 1px 3px 0 hsl(var(--shadow-color) / 0.10), 0 1px 2px -1px hsl(var(--shadow-color) / 0.10); --shadow-md: 0 4px 6px -1px hsl(var(--shadow-color) / 0.10), 0 2px 4px -2px hsl(var(--shadow-color) / 0.10); --shadow-lg: 0 10px 15px -3px hsl(var(--shadow-color) / 0.10), 0 4px 6px -4px hsl(var(--shadow-color) / 0.10); --shadow-xl: 0 20px 25px -5px hsl(var(--shadow-color) / 0.10), 0 8px 10px -6px hsl(var(--shadow-color) / 0.10); --shadow-card: 0 8px 24px hsl(var(--shadow-color) / 0.08); --shadow-hero: 0 20px 48px hsl(var(--shadow-color) / 0.12); } /* ──────────────────────────────────────────────────────────── 8. TRANSITIONS & ANIMATION ──────────────────────────────────────────────────────────── */ :root { --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 100ms; --duration-base: 200ms; --duration-slow: 300ms; --duration-slower: 500ms; --transition-fast: var(--duration-fast) var(--ease-out); --transition-base: var(--duration-base) var(--ease-out); --transition-slow: var(--duration-slow) var(--ease-out); --transition-spring: var(--duration-slow) var(--ease-spring); } /* ──────────────────────────────────────────────────────────── 9. Z-INDEX ──────────────────────────────────────────────────────────── */ :root { --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; } /* ──────────────────────────────────────────────────────────── 10. LAYOUT ──────────────────────────────────────────────────────────── */ :root { --container-xs: 30rem; /* 480px */ --container-sm: 40rem; /* 640px */ --container-md: 48rem; /* 768px */ --container-lg: 64rem; /* 1024px */ --container-xl: 80rem; /* 1280px */ --container-2xl: 90rem; /* 1440px */ /* Alliance content rail — matches existing 1200px max */ --container-inner: 75rem; /* 1200px — main content rail */ --container-outer: 131.25rem; /* 2100px — ultra-wide page cap (matches body max-width) */ --container-prose: 45rem; /* 720px — reading column */ /* Page padding (gutter) — fluid */ --page-pad: clamp(1.25rem, 1rem + 1vw, 2rem); /* Section rhythm */ --section-gap: calc(var(--base-sp) * 4.5); /* 72 → 144px */ --section-gap-sm: calc(var(--base-sp) * 3); /* 48 → 96px */ --section-gap-lg: calc(var(--base-sp) * 6); /* 96 → 192px */ --hero-min-height: calc(var(--base-sp) * 16); --hero-offset: calc(var(--base-sp) * 10); /* Common breakpoints (queryable in clamp/min not @media — keep raw */ --bp-md: 800px; --bp-lg: 1100px; } /* ──────────────────────────────────────────────────────────── LEGACY-NAME COMPATIBILITY SHIM homepage.css and inner-pages.css were authored against the old flat variables before the token system landed. These aliases keep them rendering until they're migrated in a follow-up pass. New code must NOT reference any of these names. ──────────────────────────────────────────────────────────── */ :root { --cyprus: var(--brand-cyprus); --mosque: var(--brand-mosque); --downy: var(--brand-downy); --navy: var(--brand-navy); --sand: var(--brand-sand); --mist: var(--brand-mist); --ink: var(--brand-ink); --white: var(--brand-surface); --border: var(--color-border); --shadow: var(--shadow-hero); --shadow-soft: var(--shadow-card); --grad-brand: var(--brand-grad-deep); --grad-soft: var(--brand-grad-soft); --grad-hero-page: var(--brand-grad-hero); --max-width: 75rem; /* matches --container-inner */ --font-body: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; }