/* ========================================================================== AXIS PREMIUM DESIGN SYSTEM — tokens.css (thelegalresearcher.com) -------------------------------------------------------------------------- Fleet token structure, domain re-key. THE LEGAL RESEARCHER — a light-first editorial reference publication on warm white paper, with the constitution slate (#203247) as the NAVY SIGNAL ramp and ink. The action ramp is editorial bronze (#8a6a34) — the marginalia accent; the CTA is navy ink on paper. Display face re-keyed to EB Garamond (the desk's serif voice) — Inter and IBM Plex Mono stay as the fleet's UI and mono pair. Type A publication: no lead-gen, no attorney matching, desk brand only. Default theme for this domain: light. ========================================================================== */ :root { /* ======================================================================== 1. TYPE — families & tuned weights ======================================================================== */ --font-sans: "Inter", "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "EB Garamond", "EB Garamond Variable", Georgia, "Times New Roman", serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-display: 480; --display-opsz: 48; /* ======================================================================== 2. TYPE — scale ======================================================================== */ --title-1: 1.0625rem; --title-1-lh: 1.4; --title-1-ls: -.012em; --title-2: 1.25rem; --title-2-lh: 1.3; --title-2-ls: -.012em; --title-3: 1.5rem; --title-3-lh: 1.3; --title-3-ls: -.014em; --title-4: 1.875rem; --title-4-lh: 1.18; --title-4-ls: -.018em; --title-5: 2.25rem; --title-5-lh: 1.14; --title-5-ls: -.02em; --title-6: 2.625rem; --title-6-lh: 1.1; --title-6-ls: -.022em; --title-7: 3.125rem; --title-7-lh: 1.08; --title-7-ls: -.022em; --title-8: 3.625rem; --title-8-lh: 1.06; --title-8-ls: -.024em; --title-9: 4.25rem; --title-9-lh: 1.04; --title-9-ls: -.024em; --display-1: clamp(3.25rem, 7.2vw, 7.75rem); --display-1-lh: 0.98; --display-1-ls: -.028em; --display-2: clamp(2.5rem, 5vw, 5rem); --display-2-lh: 1.02; --display-2-ls: -.026em; --display-3: clamp(2rem, 3.6vw, 3.75rem); --display-3-lh: 1.06; --display-3-ls: -.024em; --text-micro: .6875rem; --text-mini: .8125rem; --text-small: .875rem; --text-regular: 1rem; --text-large: 1.125rem; --text-lede: clamp(1.125rem, 1.6vw, 1.375rem); --body-lh: 1.65; --label-ls: .08em; /* ======================================================================== 3. COLOR — light theme "warm paper" (DOMAIN THEME — editorial white) ======================================================================== */ --bg-canvas: #f3eee5; --bg-0: #fbf9f6; --bg-1: #ffffff; --bg-2: #f6f1e8; --bg-3: #ece5d8; --text-1: #22303c; --text-2: #3e4a57; --text-3: #66727e; --text-4: #98a2ab; --border-faint: rgba(34, 48, 60, .06); --border-thin: rgba(34, 48, 60, .1); --border-solid: rgba(34, 48, 60, .18); --border-strong: rgba(34, 48, 60, .3); --hairline: .5px; /* SIGNAL accent — navy slate, the desk's rule */ --sig-200: #d5dee7; --sig-300: #8fa0b4; --sig-400: #4e6078; --sig-500: #203247; --sig-600: #182638; --sig-glow: rgba(32, 50, 71, .1); --sig-tint: rgba(32, 50, 71, .06); --sig-text: #182638; /* ACTION ramp — editorial bronze */ --action-25: #fbf7ef; --action-50: #f7efe1; --action-100: #efdfc4; --action-200: #dfc294; --action-300: #c9a364; --action-400: #a9843f; --action-500: #8a6a34; --action-600: #6e5226; --action-700: #543f1d; --action-800: #3b2c14; --action-900: #271d0d; --action-975: #140e06; --action: var(--action-600); --action-hover: var(--action-700); --action-tint: rgba(138, 106, 52, .07); --neutral-50: #eef2f8; --neutral-100: #e2e9f2; --neutral-200: #cfd9e8; --neutral-300: #b3c0d4; --neutral-400: #93a1b8; --neutral-500: #74839c; /* SEMANTIC CTA — navy ink on paper */ --cta-bg: #203247; --cta-text: #fbf9f6; --cta-wipe: #182638; --cta-hover: #182638; --cta-secondary-bg: transparent; --cta-secondary-border: var(--border-solid); --cta-secondary-text: var(--text-1); --surface-1: var(--bg-1); --surface-2: var(--bg-2); --lift-1: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); --lift-2: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .3)); --bevel: linear-gradient(135deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .4) 30%, rgba(255, 255, 255, 0) 60%); /* Navy-tinted soft shadows (Stripe discipline: tinted, never black) */ --shadow-stack: 0 8px 2px 0 rgba(32, 50, 71, 0), 0 5px 2px 0 rgba(32, 50, 71, .02), 0 3px 2px 0 rgba(32, 50, 71, .04), 0 1px 1px 0 rgba(32, 50, 71, .07), 0 0 1px 0 rgba(32, 50, 71, .1); --shadow-tiny: 0 1px 4px -1px rgba(32, 50, 71, .14); --shadow-medium: 0 16px 32px rgba(32, 50, 71, .1); --shadow-high: 0 7px 32px rgba(32, 50, 71, .16); /* ======================================================================== 4. SPACING — fluid clamp scale ======================================================================== */ --space-micro: clamp(.5rem, .972vw, .875rem); --space-tiny: clamp(1rem, 1.389vw, 1.25rem); --space-small: clamp(1.5rem, 2.083vw, 1.875rem); --space-medium: clamp(2rem, 2.778vw, 2.5rem); --space-large: clamp(3.25rem, 5.556vw, 5rem); --space-big: clamp(5rem, 10.417vw, 9.375rem); --space-huge: clamp(6.25rem, 13.889vw, 12.5rem); --space-enormous: clamp(8.75rem, 17.361vw, 15.625rem); /* ======================================================================== 5. MOTION — token library ======================================================================== */ --ease-settle: cubic-bezier(.25, 1, .5, 1); --ease-rise: cubic-bezier(.32, .72, 0, 1); --ease-slip: cubic-bezier(.23, 1, .32, 1); --ease-leave: cubic-bezier(.4, 0, .2, 1); --speed-quick: .1s; --speed-fast: .2s; --speed-regular: .25s; --speed-slow: .45s; --speed-counter: 1.2s; --reveal-blur: 10px; --reveal-distance: 20%; --reveal-guard: 30px; --stagger-1: 40ms; --stagger-2: 70ms; --stagger-3: 120ms; --marquee-duration: 30s; /* ======================================================================== 6. GEOMETRY ======================================================================== */ --radius-4: 4px; --radius-6: 6px; --radius-8: 8px; --radius-12: 12px; --radius-16: 16px; --radius-24: 24px; --radius-32: 32px; --radius-pill: 9999px; --radius-circle: 50%; --pill-sm: 32px; --pill-md: 44px; --pill-lg: 56px; --content-max: 1344px; --page-pad-x: clamp(1.25rem, 4vw, 3rem); --page-pad-y: var(--space-large); --header-height: 64px; --header-blur: 20px; --grid-cols: 12; --grid-gap: clamp(1rem, 2vw, 2rem); --section-y: var(--space-big); --focus-ring: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--sig-500); --edge-lamp: rgba(32, 50, 71, .1); --rail-width: 2px; } /* ========================================================================== 7. BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg-0); color: var(--text-1); font-family: var(--font-sans); font-size: var(--text-regular); font-weight: var(--w-regular); line-height: var(--body-lh); letter-spacing: -.011em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--sig-500); color: #fbf9f6; } .display { font-family: var(--font-display); font-weight: var(--w-display); font-variation-settings: "opsz" var(--display-opsz); } .label { font-family: var(--font-mono); font-size: var(--text-micro); font-weight: var(--w-regular); letter-spacing: var(--label-ls); text-transform: uppercase; color: var(--text-4); } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-6); }