/* ───────────────────────────────────────────────────────────── Bingo Solutions design tokens. Canonical source — synced into apps/claims/src/static/css/tokens.css via tools/sync_tokens.sh. Edit here, never in the Claims app. Color tokens live inside [data-theme="light"] and [data-theme="dark"] blocks. Non-color tokens (font, spacing, type scale, radii, shadows, sidebar widths, easing) stay on :root and apply to both themes. Theme is set on documentElement: . Marketing site defaults to light. Claims app supports both. ─────────────────────────────────────────────────────────────── */ :root { /* Typography */ --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; /* Type scale — display-grade for marketing impact */ --text-xs: 11px; --text-sm: 12px; --text-base: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px; --text-4xl: 52px; --text-5xl: 72px; --text-6xl: 96px; --text-display: 128px; /* Tracking */ --track-tight: -0.04em; --track-display: -0.045em; --track-wide: 0.08em; /* Spacing scale (4px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-11: 44px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* Shape & motion */ --radius: 10px; --radius-sm: 6px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Motion durations — per skill guidance, 200-300ms is the sweet spot */ --dur-fast: 150ms; --dur-base: 240ms; --dur-slow: 480ms; /* Layout */ --sidebar-w: 68px; --sidebar-exp: 220px; --container-max: 1180px; /* Elevation — layered, soft shadows (per skill: "soft shadows + smooth transitions") */ --shadow-sm: 0 1px 2px rgba(15, 20, 30, 0.04), 0 1px 3px rgba(15, 20, 30, 0.06); --shadow-md: 0 4px 8px rgba(15, 20, 30, 0.04), 0 8px 24px rgba(15, 20, 30, 0.06); --shadow-lg: 0 8px 16px rgba(15, 20, 30, 0.05), 0 20px 48px rgba(15, 20, 30, 0.08); --shadow-xl: 0 16px 32px rgba(15, 20, 30, 0.06), 0 32px 80px rgba(15, 20, 30, 0.10); --shadow-accent: 0 12px 32px rgba(232, 102, 74, 0.20), 0 4px 12px rgba(232, 102, 74, 0.12); --elev-1: 0 1px 2px rgba(15, 20, 30, 0.04); --elev-2: var(--shadow-md); --elev-3: var(--shadow-lg); --elev-4: var(--shadow-xl); /* Cross-theme constants */ --pdf-canvas-bg: #525659; --on-accent: #FFFFFF; --ink: #0A0E1A; --ink-soft-2: #1A1F2C; --ink-text: #E8EAF0; --ink-text-dim: #8B92A5; --ink-border: rgba(255, 255, 255, 0.08); /* Gradient compositions */ --mesh-hero: radial-gradient(ellipse 60% 50% at 80% 0%, rgba(232,102,74,0.12) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 0% 30%, rgba(232,102,74,0.06) 0%, transparent 50%), radial-gradient(ellipse 80% 60% at 50% 110%, rgba(255, 220, 200, 0.30) 0%, transparent 60%); --mesh-soft: radial-gradient(ellipse 40% 60% at 100% 0%, rgba(232,102,74,0.06) 0%, transparent 60%), radial-gradient(ellipse 40% 60% at 0% 100%, rgba(232,102,74,0.04) 0%, transparent 60%); --grid-fade: linear-gradient(to bottom, var(--bg) 0%, transparent 20%, transparent 80%, var(--bg) 100%), linear-gradient(rgba(15, 20, 30, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 20, 30, 0.04) 1px, transparent 1px); } /* ── LIGHT THEME ────────────────────────────────────────────── */ :root, [data-theme="light"] { --bg: #FFFFFF; --surface: #F7F7F5; --surface2: #EDEDEB; --border: #E0E0DC; --border-hover: #C8C8C4; --text: #1A1A1A; --text-dim: #6B6B6B; --text-muted: #999999; --ink-soft: #4A4A4A; --accent: #E8664A; --accent-dim: #D4553B; --accent-subtle: rgba(232,102,74,0.08); --accent-tint: rgba(232,102,74,0.12); --accent-tint-strong: rgba(232,102,74,0.25); --accent-soft: rgba(232,102,74,0.04); --accent-glow: rgba(232,102,74,0.10); --green: #27AE60; --yellow: #D4A017; --orange: #E67E22; --blue: #2980B9; --red: #E74C3C; /* Status tints (light) */ --success-tint: rgba(39,174,96,0.12); --success-soft: rgba(39,174,96,0.04); --success-strong: rgba(39,174,96,0.25); --success-border: rgba(39,174,96,0.30); --warn-tint: rgba(212,160,23,0.12); --warn-soft: rgba(212,160,23,0.04); --warn-strong: rgba(212,160,23,0.25); --warn-border: rgba(212,160,23,0.30); --danger-tint: rgba(231,76,60,0.12); --danger-soft: rgba(231,76,60,0.04); --danger-strong: rgba(231,76,60,0.25); --danger-border: rgba(231,76,60,0.30); --info-tint: rgba(41,128,185,0.10); --info-soft: rgba(41,128,185,0.04); --info-strong: rgba(41,128,185,0.25); --orange-tint: rgba(230,126,34,0.12); --orange-soft: rgba(230,126,34,0.04); --orange-strong: rgba(230,126,34,0.30); /* Surface helpers */ --card-bg: #FFFFFF; /* solid card on light page */ --row-alt: rgba(0,0,0,0.025); --scrim: rgba(0,0,0,0.45); --excerpt-bg: #FFFDE7; --excerpt-border: #FFF9C4; --landing-gradient: linear-gradient(135deg, #FBF8F6 0%, #F3EFEB 50%, #EDE8E3 100%); /* Semantic + decision aliases (theme-stable bindings) */ --success: var(--green); --warn: var(--yellow); --danger: var(--red); --info: var(--blue); --decision-approve: var(--green); --decision-deny: var(--red); --decision-pend: var(--yellow); --decision-conditional: var(--orange); /* Misc */ --wave-color: #f97316; } /* ── DARK THEME ─────────────────────────────────────────────── */ [data-theme="dark"] { --bg: #0F1115; --surface: #181B21; --surface2: #20242C; --border: #2C313B; --border-hover: #3A4150; --text: #E8E8E5; --text-dim: #A0A4AB; --text-muted: #6F7480; --ink-soft: #C0C2C8; --accent: #E8664A; --accent-dim: #D4553B; --accent-subtle: rgba(232,102,74,0.18); --accent-tint: rgba(232,102,74,0.22); --accent-tint-strong: rgba(232,102,74,0.35); --accent-soft: rgba(232,102,74,0.10); --accent-glow: rgba(232,102,74,0.20); --green: #2ECC71; --yellow: #F1C40F; --orange: #F39C12; --blue: #3498DB; --red: #E74C3C; /* Status tints (dark — slightly stronger so colored fills read on dark surfaces) */ --success-tint: rgba(46,204,113,0.20); --success-soft: rgba(46,204,113,0.10); --success-strong: rgba(46,204,113,0.40); --success-border: rgba(46,204,113,0.45); --warn-tint: rgba(241,196,15,0.20); --warn-soft: rgba(241,196,15,0.08); --warn-strong: rgba(241,196,15,0.40); --warn-border: rgba(241,196,15,0.45); --danger-tint: rgba(231,76,60,0.22); --danger-soft: rgba(231,76,60,0.10); --danger-strong: rgba(231,76,60,0.40); --danger-border: rgba(231,76,60,0.45); --info-tint: rgba(52,152,219,0.20); --info-soft: rgba(52,152,219,0.08); --info-strong: rgba(52,152,219,0.40); --orange-tint: rgba(243,156,18,0.20); --orange-soft: rgba(243,156,18,0.08); --orange-strong: rgba(243,156,18,0.45); /* Surface helpers */ --card-bg: var(--surface); --row-alt: rgba(255,255,255,0.04); --scrim: rgba(0,0,0,0.65); --excerpt-bg: rgba(241,196,15,0.12); --excerpt-border: rgba(241,196,15,0.30); --landing-gradient: linear-gradient(135deg, #14171D 0%, #181B21 50%, #0F1115 100%); /* Semantic + decision aliases */ --success: var(--green); --warn: var(--yellow); --danger: var(--red); --info: var(--blue); --decision-approve: var(--green); --decision-deny: var(--red); --decision-pend: var(--yellow); --decision-conditional: var(--orange); /* Misc */ --wave-color: #FB8C3C; }