/* InsurEco design tokens — generated from the InsurEco design system. * * SOURCE OF TRUTH. Do not hand-edit: regenerate from the design system's * tokens.json. Served at https://brand.insureco.io/tokens.css, which the * iec-portal artifact CSP trusts (style-src / font-src allow *.insureco.io). * * THEMING * Dark is the default and lives on bare `:root` — it is the theme the brand * was designed in (insureco.io). * Light lives on `[data-theme="light"]`. Set that attribute on to opt in. * Nothing here reads prefers-color-scheme: a product that wants to follow the * OS decides that itself, because only the product knows whether its users * want to. * * OVERRIDING * Every selector below is `:root` or a single attribute, so a plain `:root` * block of your own after the import wins on source order. Redefine the * VARIABLE, never the rule. */ /* ── Faces, self-hosted so the portal's font-src allows them ─────────── */ @font-face { font-family: "Exo 2"; src: url("/fonts/exo2-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Exo 2"; src: url("/fonts/exo2-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Exo 2"; src: url("/fonts/exo2-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Exo 2"; src: url("/fonts/exo2-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Exo 2"; src: url("/fonts/exo2-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Exo 2"; src: url("/fonts/exo2-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Exo 2"; src: url("/fonts/exo2-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Exo 2"; src: url("/fonts/exo2-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "Space Mono"; src: url("/fonts/space-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Space Mono"; src: url("/fonts/space-mono-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } /* ── Colour · dark (default) ─────────────────────────────────────────── */ :root { --bg: #050810; --bg-raised: #0b1021; --bg-inset: #111827; --border: #1e293b; --border-strong: #64748b; --text: #e2e8f0; --text-muted: #94a3b8; --text-dim: #475569; --text-inverse: #050810; --navy: #2e3192; --navy-lift: #4a50c8; --magenta: #ec008c; --yellow: #ffcb05; --on-navy: #ffffff; --on-magenta: #ffffff; --on-yellow: #0c0d1c; --focus-ring: #3b82f6; --domain-intake: #8b5cf6; --domain-uw: #f59e0b; --domain-policy: #3b82f6; --domain-treasury: #10b981; --domain-docs: #ec008c; --domain-claims: #ef4444; --domain-programs: #14b8a6; --domain-compliance: #ffcb05; --domain-ops: #6366f1; --domain-platform: #2e3192; --logo-ink: #334047; --logo-tagline: #83a3b3; --role-neutral-fg: #8b95a3; --role-neutral-bg: #1e2430; --role-neutral-dot: #64748b; --role-neutral-bd: #39424f; --role-quiet-fg: #7d8797; --role-quiet-bg: #1b2029; --role-quiet-dot: #6b7280; --role-quiet-bd: #333b47; --role-attention-fg: #f0b429; --role-attention-bg: #3a2c0d; --role-attention-dot: #d99a3f; --role-attention-bd: #a67c1a; --role-pending-fg: #b79cf0; --role-pending-bg: #2a1f42; --role-pending-dot: #9d7bd8; --role-pending-bd: #6d54a8; --role-active-fg: #5cb8f0; --role-active-bg: #10293a; --role-active-dot: #4ea8de; --role-active-bd: #2d6a91; --role-good-fg: #5cd48f; --role-good-bg: #102b1c; --role-good-dot: #4ec98a; --role-good-bd: #2e7a4f; --role-warn-fg: #f59e5b; --role-warn-bg: #351f11; --role-warn-dot: #e8894a; --role-warn-bd: #9a5a2b; --role-bad-fg: #f08078; --role-bad-bg: #351717; --role-bad-dot: #e8736b; --role-bad-bd: #9c3f3b; --role-info-fg: #7dabf5; --role-info-bg: #142239; --role-info-dot: #6f9fe8; --role-info-bd: #3a5f9e; --pillar-0: #34d399; --pillar-1: #fb923c; --pillar-2: #a3e635; --pillar-3: #a78bfa; --pillar-4: #60a5fa; --pillar-5: #94a3b8; --pillar-6: #fb7185; --pillar-7: #2dd4bf; --shadow-card: 0 8px 24px rgba(0,0,0,.3); --shadow-layer: 0 12px 40px rgba(0,0,0,.3); --shadow-none: none; } /* ── Colour · light ──────────────────────────────────────────────────── */ [data-theme="light"] { --bg: #ffffff; --bg-raised: #f8fafc; --bg-inset: #f1f5f9; --border: #e2e8f0; --border-strong: #64748b; --text: #0f172a; --text-muted: #475569; --text-dim: #64748b; --text-inverse: #ffffff; --navy: #2e3192; --navy-lift: #4a50c8; --magenta: #ec008c; --yellow: #ffcb05; --on-navy: #ffffff; --on-magenta: #ffffff; --on-yellow: #0c0d1c; --focus-ring: #2563eb; --domain-intake: #7c3aed; --domain-uw: #b45309; --domain-policy: #2563eb; --domain-treasury: #047857; --domain-docs: #be185d; --domain-claims: #dc2626; --domain-programs: #0f766e; --domain-compliance: #a16207; --domain-ops: #4f46e5; --domain-platform: #2e3192; --logo-ink: #334047; --logo-tagline: #83a3b3; --role-neutral-fg: #64748b; --role-neutral-bg: #f1f5f9; --role-neutral-dot: #94a3b8; --role-neutral-bd: #cbd5e1; --role-quiet-fg: #6b7280; --role-quiet-bg: #f3f4f6; --role-quiet-dot: #9ca3af; --role-quiet-bd: #d1d5db; --role-attention-fg: #b45309; --role-attention-bg: #fef3c7; --role-attention-dot: #f0a020; --role-attention-bd: #f59e0b; --role-pending-fg: #6d28d9; --role-pending-bg: #ede9fe; --role-pending-dot: #8b5cf6; --role-pending-bd: #a78bfa; --role-active-fg: #0369a1; --role-active-bg: #e0f2fe; --role-active-dot: #0ea5e9; --role-active-bd: #38bdf8; --role-good-fg: #15803d; --role-good-bg: #dcfce7; --role-good-dot: #22c55e; --role-good-bd: #4ade80; --role-warn-fg: #c2410c; --role-warn-bg: #ffedd5; --role-warn-dot: #f97316; --role-warn-bd: #fb923c; --role-bad-fg: #b91c1c; --role-bad-bg: #fee2e2; --role-bad-dot: #ef4444; --role-bad-bd: #f87171; --role-info-fg: #1d4ed8; --role-info-bg: #dbeafe; --role-info-dot: #3b82f6; --role-info-bd: #60a5fa; --pillar-0: #059669; --pillar-1: #ea580c; --pillar-2: #65a30d; --pillar-3: #7c3aed; --pillar-4: #2563eb; --pillar-5: #475569; --pillar-6: #e11d48; --pillar-7: #0d9488; --shadow-card: 0 8px 24px rgba(15,23,42,.08); --shadow-layer: 0 12px 40px rgba(15,23,42,.1); --shadow-none: none; } /* ── Scales, families and the brand gradient (theme-independent) ─────── */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-16: 64px; --space-24: 96px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 100px; --radius-round: 50%; --opacity-grain: 0.02; --opacity-ghost: 0.06; --font-sans: "Exo 2", system-ui, -apple-system, sans-serif; --font-serif: "Instrument Serif", Georgia, serif; --font-mono: "Space Mono", ui-monospace, SFMono-Regular, monospace; --brand-gradient: linear-gradient(135deg, #2e3192 0%, #ec008c 55%, #ffcb05 100%); } /* ── Type styles ─────────────────────────────────────────────────────── */ /* Display */ .display-italic { font-family: var(--font-serif); font-size: 72px; line-height: 1.1; font-weight: 400; font-style: italic; } /* Headings */ .h1 { font-family: var(--font-sans); font-size: 72px; line-height: 1.1; font-weight: 300; letter-spacing: 0; } .h2 { font-family: var(--font-sans); font-size: 40px; line-height: 1.15; font-weight: 300; } .h3 { font-family: var(--font-sans); font-size: 22.4px; line-height: 1.25; font-weight: 600; } .h4 { font-family: var(--font-mono); font-size: 16px; line-height: 1.4; font-weight: 600; letter-spacing: 0.02em; } /* Text */ .body { font-family: var(--font-sans); font-size: 16px; line-height: 1.7; font-weight: 400; } .body-sm { font-family: var(--font-sans); font-size: 15.2px; line-height: 1.7; font-weight: 400; } .caption { font-family: var(--font-sans); font-size: 13.6px; line-height: 1.6; font-weight: 400; } .fine { font-family: var(--font-sans); font-size: 12.8px; line-height: 1.6; font-weight: 400; } /* Mono */ .mono-numeral { font-family: var(--font-mono); font-size: 40px; line-height: 1; font-weight: 700; } .mono-symbol { font-family: var(--font-mono); font-size: 19.2px; line-height: 1; font-weight: 700; } .mono-ui { font-family: var(--font-mono); font-size: 12px; line-height: 1.4; font-weight: 400; letter-spacing: 0.03em; } .mono-label { font-family: var(--font-mono); font-size: 11.2px; line-height: 1.4; font-weight: 400; letter-spacing: 0.1em; } .mono-eyebrow { font-family: var(--font-mono); font-size: 10.4px; line-height: 1.4; font-weight: 400; letter-spacing: 0.18em; } .mono-tag { font-family: var(--font-mono); font-size: 10.4px; line-height: 1.4; font-weight: 400; } .mono-micro { font-family: var(--font-mono); font-size: 9.6px; line-height: 1.3; font-weight: 400; letter-spacing: 0.08em; } /* ── The one gradient device ─────────────────────────────────────────── */ .iec-gradient-text { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .iec-gradient-rule { height: 3px; border: 0; margin: 0; display: block; background: var(--brand-gradient); } /* ==== BRANDS: generated by tools/build-brand-tokens.py — do not hand-edit ==== */ /* Per-brand accents, so a page says WHICH brand it is and the components stop caring. Put data-brand on for a whole property, or on a section to scope one shelf of a page. --brand-accent the registered colour, exact. A FILL or a large mark. --brand-accent-2 the registered secondary, exact. --brand-accent-ink the readable variant: text, borders, symbols, icons. Derived to clear 4.5:1 on both the page and --brand-wash, per theme. Reach for this unless you are filling a shape. --brand-wash the chip tint behind --brand-accent-ink. --on-brand-accent the label on a --brand-accent fill. The light overrides are (0,2,0) because data-theme sits on an ancestor while data-brand may sit anywhere below it; a plain :root of your own will NOT beat them. Override with the same shape, or set the variable on the element itself. */ /* InsurEco System */ :root, [data-brand="insureco"] { --brand-accent: #2E3192; --brand-accent-2: #EC008C; --brand-accent-ink: #7375b6; --brand-wash: #080b1a; --on-brand-accent: #ffffff; } [data-theme="light"], [data-theme="light"] [data-brand="insureco"], [data-theme="light"][data-brand="insureco"] { --brand-accent-ink: #2e3192; --brand-wash: #f0f1f7; } /* Tawa */ [data-brand="tawa"] { --brand-accent: #639CF8; --brand-accent-2: #60A5FA; --brand-accent-ink: #639cf8; --brand-wash: #0d1423; --on-brand-accent: #0c0d1c; } [data-theme="light"] [data-brand="tawa"], [data-theme="light"][data-brand="tawa"] { --brand-accent-ink: #4872b5; --brand-wash: #f4f8ff; } /* raterSpot */ [data-brand="raterspot"] { --brand-accent: #069091; --brand-accent-2: #0ABCBD; --brand-accent-ink: #069091; --brand-wash: #05131a; --on-brand-accent: #0c0d1c; } [data-theme="light"] [data-brand="raterspot"], [data-theme="light"][data-brand="raterspot"] { --brand-accent-ink: #057d7e; --brand-wash: #eef7f7; } /* PolicyPay */ [data-brand="policypay"] { --brand-accent: #DF4E44; --brand-accent-2: #CC4E45; --brand-accent-ink: #df4e44; --brand-wash: #160e14; --on-brand-accent: #0c0d1c; } [data-theme="light"] [data-brand="policypay"], [data-theme="light"][data-brand="policypay"] { --brand-accent-ink: #c4453c; --brand-wash: #fdf3f2; } /* insureCap Solutions */ [data-brand="insurecap"] { --brand-accent: #7F3F97; --brand-accent-2: #F16A21; --brand-accent-ink: #9a67ad; --brand-wash: #0f0c1b; --on-brand-accent: #ffffff; } [data-theme="light"] [data-brand="insurecap"], [data-theme="light"][data-brand="insurecap"] { --brand-accent-ink: #7f3f97; --brand-wash: #f6f2f8; } /* Moonshot Foundry Chosen from the four registered Moonshot colours as the one nearest the violet shop.moonshot actually ships (#9184D9, which is registered nowhere). Swap with accentSecondary if #3B6CF6 is the real primary, then rerun the generator. */ [data-brand="moonshot-foundry"] { --brand-accent: #7B3F8E; --brand-accent-2: #3B6CF6; --brand-accent-ink: #9869a7; --brand-wash: #0e0c1a; --on-brand-accent: #ffffff; } [data-theme="light"] [data-brand="moonshot-foundry"], [data-theme="light"][data-brand="moonshot-foundry"] { --brand-accent-ink: #7b3f8e; --brand-wash: #f6f2f7; } /* BindDesk */ [data-brand="binddesk"] { --brand-accent: #337AB7; --brand-accent-2: #5BC0DE; --brand-accent-ink: #3d81bb; --brand-wash: #09111d; --on-brand-accent: #ffffff; } [data-theme="light"] [data-brand="binddesk"], [data-theme="light"][data-brand="binddesk"] { --brand-accent-ink: #3074ae; --brand-wash: #f1f6fa; } /* ==== end brands ==== */