/* styles.css — token system for Merger Control Navigator 3 aesthetic directions: chambers | counsel | operator Tokens are scoped to [data-direction="..."] on . */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: var(--font-body); font-size: var(--text-base); background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv11"; line-height: 1.45; } button { font: inherit; color: inherit; } /* Keyboard-navigation focus ring — ties the purple accent into wayfinding */ :where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } /* ── Base tokens — overridden per direction ──────────────────────────── */ :root { --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 14px; --density-row: 44px; --density-pad: 14px; --gap: 16px; --text-xs: 11px; --text-sm: 12.5px; --text-base: 14px; --text-md: 15px; --text-lg: 17px; --text-xl: 22px; --text-2xl: 28px; } /* ── Density modifiers ──────────────────────────────────────────────── */ body[data-density="compact"] { --density-row: 34px; --density-pad: 8px; --gap: 10px; --text-base: 13px; --text-xs: 10.5px; } body[data-density="balanced"] { --density-row: 42px; --density-pad: 12px; --gap: 14px; } body[data-density="spacious"] { --density-row: 56px; --density-pad: 20px; --gap: 22px; --text-base: 15px; } /* ────────────────────────────────────────────────────────────────────── DIRECTION 1 — CHAMBERS (editorial serif, warm cream, burgundy) ────────────────────────────────────────────────────────────────────── */ body[data-direction="chambers"] { --font-body: "Source Serif 4", "Source Serif Pro", Georgia, serif; --font-heading: "Source Serif 4", Georgia, serif; --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace; --font-ui: "Inter", system-ui, sans-serif; --text-2xl: 32px; --bg: oklch(0.972 0.008 75); --bg-elev: oklch(0.985 0.005 75); --bg-deep: oklch(0.955 0.012 75); --fg: oklch(0.20 0.012 60); --fg-muted: oklch(0.42 0.012 60); --fg-faint: oklch(0.60 0.010 60); --border: oklch(0.88 0.010 75); --border-strong: oklch(0.78 0.012 60); --accent: #6B176B; --accent-fg: #FCF6FC; --accent-soft: #F3E4F3; --required-bg: oklch(0.94 0.06 28); --required-fg: oklch(0.38 0.14 28); --borderline-bg: oklch(0.93 0.07 70); --borderline-fg: oklch(0.45 0.13 60); --info-bg: oklch(0.93 0.05 90); --info-fg: oklch(0.48 0.10 85); --notreq-bg: oklch(0.93 0.04 145); --notreq-fg: oklch(0.40 0.09 145); --excluded-bg: oklch(0.93 0.005 75); --excluded-fg: oklch(0.55 0.008 75); } /* ────────────────────────────────────────────────────────────────────── DIRECTION 2 — COUNSEL (modern legal-tech, cool, soft cards) ────────────────────────────────────────────────────────────────────── */ body[data-direction="counsel"] { --font-body: "Inter", system-ui, sans-serif; --font-heading: "Fraunces", "Inter", serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --font-ui: "Inter", system-ui, sans-serif; --bg: oklch(0.985 0.004 240); --bg-elev: oklch(1.00 0 0); --bg-deep: oklch(0.965 0.006 240); --fg: oklch(0.20 0.012 260); --fg-muted: oklch(0.46 0.014 255); --fg-faint: oklch(0.62 0.012 250); --border: oklch(0.91 0.006 250); --border-strong: oklch(0.82 0.010 250); --accent: #6B176B; --accent-fg: #FCF6FC; --accent-soft: #F1E4F3; --required-bg: oklch(0.95 0.04 25); --required-fg: oklch(0.46 0.16 25); --borderline-bg: oklch(0.95 0.06 75); --borderline-fg: oklch(0.50 0.14 60); --info-bg: oklch(0.94 0.05 95); --info-fg: oklch(0.50 0.11 85); --notreq-bg: oklch(0.95 0.04 165); --notreq-fg: oklch(0.44 0.10 165); --excluded-bg: oklch(0.95 0.006 250); --excluded-fg: oklch(0.55 0.010 250); } /* ────────────────────────────────────────────────────────────────────── DIRECTION 3 — OPERATOR (terminal density, monospaced, paper-tape) ────────────────────────────────────────────────────────────────────── */ body[data-direction="operator"] { --font-body: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace; --font-heading: "JetBrains Mono", ui-monospace, monospace; --font-mono: "JetBrains Mono", ui-monospace, monospace; --font-ui: "JetBrains Mono", ui-monospace, monospace; --bg: oklch(0.96 0.004 100); --bg-elev: oklch(0.99 0.003 100); --bg-deep: oklch(0.93 0.006 100); --fg: oklch(0.18 0.008 100); --fg-muted: oklch(0.40 0.010 100); --fg-faint: oklch(0.58 0.010 100); --border: oklch(0.78 0.010 100); --border-strong: oklch(0.55 0.014 100); --accent: #6B176B; --accent-fg: #FBF5FB; --accent-soft: #EEDBEE; --required-bg: oklch(0.88 0.10 28); --required-fg: oklch(0.32 0.16 28); --borderline-bg: oklch(0.88 0.13 70); --borderline-fg: oklch(0.38 0.14 60); --info-bg: oklch(0.90 0.10 90); --info-fg: oklch(0.40 0.12 85); --notreq-bg: oklch(0.90 0.10 145); --notreq-fg: oklch(0.32 0.12 145); --excluded-bg: oklch(0.90 0.005 100); --excluded-fg: oklch(0.50 0.010 100); --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; } /* ── Dark mode overlay (applies on top of any direction) ─────────────── */ body[data-dark="true"][data-direction="chambers"] { --bg: oklch(0.18 0.012 75); --bg-elev: oklch(0.22 0.014 75); --bg-deep: oklch(0.14 0.010 75); --fg: oklch(0.94 0.008 75); --fg-muted: oklch(0.72 0.012 75); --fg-faint: oklch(0.55 0.010 75); --border: oklch(0.30 0.012 75); --border-strong: oklch(0.42 0.014 75); --accent: #C76FC7; --accent-fg: #1C0F1C; --accent-soft: #3B203B; --required-bg: oklch(0.27 0.09 28); --required-fg: oklch(0.85 0.10 28); --borderline-bg: oklch(0.27 0.09 70); --borderline-fg: oklch(0.86 0.11 70); --info-bg: oklch(0.27 0.07 90); --info-fg: oklch(0.86 0.09 90); --notreq-bg: oklch(0.25 0.06 145); --notreq-fg: oklch(0.82 0.08 145); --excluded-bg: oklch(0.22 0.008 75); --excluded-fg: oklch(0.60 0.010 75); } body[data-dark="true"][data-direction="counsel"] { --bg: oklch(0.17 0.012 260); --bg-elev: oklch(0.21 0.014 260); --bg-deep: oklch(0.13 0.010 260); --fg: oklch(0.95 0.005 240); --fg-muted: oklch(0.72 0.012 250); --fg-faint: oklch(0.55 0.010 250); --border: oklch(0.30 0.012 250); --border-strong: oklch(0.42 0.014 250); --accent: #C76FC7; --accent-fg: #1C0F1C; --accent-soft: #3B203B; --required-bg: oklch(0.27 0.08 25); --required-fg: oklch(0.85 0.11 25); --borderline-bg: oklch(0.28 0.10 75); --borderline-fg: oklch(0.88 0.12 75); --info-bg: oklch(0.27 0.08 95); --info-fg: oklch(0.86 0.10 90); --notreq-bg: oklch(0.25 0.07 165); --notreq-fg: oklch(0.82 0.09 165); --excluded-bg: oklch(0.22 0.008 260); --excluded-fg: oklch(0.62 0.010 260); } body[data-dark="true"][data-direction="operator"] { --bg: oklch(0.15 0.008 100); --bg-elev: oklch(0.19 0.010 100); --bg-deep: oklch(0.11 0.008 100); --fg: oklch(0.92 0.012 100); --fg-muted: oklch(0.70 0.012 100); --fg-faint: oklch(0.52 0.010 100); --border: oklch(0.30 0.010 100); --border-strong: oklch(0.50 0.014 100); --accent: #CE78CE; --accent-fg: #1C0F1C; --accent-soft: #3E223E; --required-bg: oklch(0.25 0.10 28); --required-fg: oklch(0.85 0.13 28); --borderline-bg: oklch(0.27 0.13 70); --borderline-fg: oklch(0.88 0.14 70); --info-bg: oklch(0.27 0.10 90); --info-fg: oklch(0.86 0.12 90); --notreq-bg: oklch(0.24 0.10 145); --notreq-fg: oklch(0.82 0.13 145); --excluded-bg: oklch(0.19 0.006 100); --excluded-fg: oklch(0.58 0.010 100); } /* ── Outcome-palette modes ────────────────────────────────────────────── */ body[data-palette="muted"] { --required-bg: oklch(0.93 0.02 28); --required-fg: oklch(0.40 0.05 28); --borderline-bg: oklch(0.93 0.02 70); --borderline-fg: oklch(0.45 0.05 60); --info-bg: oklch(0.93 0.015 90); --info-fg: oklch(0.48 0.04 85); --notreq-bg: oklch(0.93 0.015 145); --notreq-fg: oklch(0.42 0.04 145); } body[data-palette="accessible"] { --required-bg: oklch(0.45 0.18 28); --required-fg: oklch(0.98 0.005 28); --borderline-bg: oklch(0.55 0.16 70); --borderline-fg: oklch(0.10 0.02 70); --info-bg: oklch(0.60 0.14 90); --info-fg: oklch(0.10 0.02 90); --notreq-bg: oklch(0.45 0.13 145); --notreq-fg: oklch(0.98 0.005 145); } /* ── Chambers — editorial typography refinements ────────────────────── */ body[data-direction="chambers"] .matter-header .title-block h1 { font-style: normal; } body[data-direction="chambers"] .section-label, body[data-direction="chambers"] .filters .right, body[data-direction="chambers"] .card-hd, body[data-direction="chambers"] .j-table thead th, body[data-direction="chambers"] .region-row .label { font-variant: small-caps; text-transform: none; letter-spacing: 0.04em; font-feature-settings: "smcp"; } body[data-direction="chambers"] .matter-header .meta { font-style: italic; font-family: var(--font-heading); font-size: var(--text-md); } body[data-direction="chambers"] .matter-header .meta .pill { font-style: normal; font-family: var(--font-ui); white-space: nowrap; } body[data-direction="chambers"] .detail .body { font-feature-settings: "onum"; } body[data-direction="chambers"] .topbar .brand { font-style: normal; font-weight: 600; letter-spacing: -0.005em; } /* Matter index ornament — inline so it flows with the H1 */ .matter-index { font-family: var(--font-heading); font-style: italic; font-weight: 500; color: var(--fg-faint); margin-right: 12px; font-size: 0.55em; letter-spacing: 0.04em; vertical-align: 0.25em; white-space: nowrap; } body:not([data-direction="chambers"]) .matter-index { display: none; }