/* ============================================================
   LEXCORE — Public landing foundations (Light, scoped)
   LexCore-owned replacement for the cases BizLink primitives
   (cases/assets/css/bzl/colors_and_type.css). Token NAMES are kept
   (.bzl-scope / --registry-* / --surface-* …) as a stable interface so
   the landing markup AND its runtime JS (which builds nodes with
   var(--surface-2), var(--font-display), …) need zero changes — only the
   VALUES are Lexcore: Source Serif 4 / IBM Plex Sans / IBM Plex Mono, the
   warm-paper oklch palette, ink primary + claret editorial accent.
   Scoped to .bzl-scope (never :root). Loaded only on the public landing.
   ============================================================ */

.bzl-scope {
    /* ── TYPE — Lexcore editorial trio ──────────────────────── */
    --font-display: 'Source Serif 4', Georgia, serif;
    --font-main:    'IBM Plex Sans', system-ui, sans-serif;
    --font-body:    'IBM Plex Sans', system-ui, sans-serif;
    --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --font-stack:   var(--font-main);
    --font-sans:    var(--font-main);

    --fs-display:  44px;   --lh-display:  1.05;  --tr-display:  -0.028em;
    --fs-h1:       32px;   --lh-h1:       1.15;  --tr-h1:       -0.025em;
    --fs-h2:       24px;   --lh-h2:       1.2;   --tr-h2:       -0.02em;
    --fs-h3:       18px;   --lh-h3:       1.3;   --tr-h3:       -0.015em;
    --fs-h4:       15px;   --lh-h4:       1.35;  --tr-h4:       -0.01em;
    --fs-body:     14px;   --lh-body:     1.5;   --tr-body:     0;
    --fs-small:    13px;   --lh-small:    1.5;
    --fs-caption:  12px;   --lh-caption:  1.4;
    --fs-eyebrow:  11px;   --lh-eyebrow:  1.4;   --tr-eyebrow:  0.14em;
    --fs-micro:    10px;   --tr-micro:    0.12em;

    --tracking-tight:   -0.02em;
    --tracking-normal:  0;
    --tracking-wide:    0.05em;
    --tracking-widest:  0.12em;

    /* ── COLOR — warm-paper neutral ramp (oklch) ────────────── */
    --zinc-50:  oklch(98.5% 0.004 80);
    --zinc-100: oklch(96.5% 0.005 80);
    --zinc-200: oklch(92% 0.005 80);
    --zinc-300: oklch(86% 0.006 80);
    --zinc-400: oklch(72% 0.008 260);
    --zinc-500: oklch(100% 0 0);
    --zinc-600: oklch(45% 0.012 260);
    --zinc-700: oklch(34% 0.013 260);
    --zinc-800: oklch(28% 0.015 260);
    --zinc-900: oklch(20% 0.013 260);
    --zinc-950: oklch(16% 0.012 260);

    --registry-black: oklch(16% 0.012 260);
    --registry-white: oklch(99.2% 0.003 80);

    /* Signal palette — claret / verdant / amber */
    --registry-blue:         oklch(45% 0.09 25);
    --registry-blue-soft:    oklch(94% 0.04 25);
    --registry-emerald:      oklch(48% 0.10 155);
    --registry-emerald-soft: oklch(94% 0.05 155);
    --registry-violet:       oklch(45% 0.12 300);
    --registry-violet-soft:  oklch(94% 0.05 300);
    --registry-indigo:       oklch(45% 0.10 270);
    --registry-amber:        oklch(52% 0.14 68);
    --registry-amber-soft:   oklch(94% 0.06 68);
    --registry-red:          oklch(45% 0.09 25);
    --registry-red-soft:     oklch(94% 0.04 25);

    /* ── SEMANTIC SURFACES ──────────────────────────────────── */
    --body-bg:         oklch(98.5% 0.004 80);
    --component-bg:    oklch(99.2% 0.003 80);
    --surface-1:       oklch(99.2% 0.003 80);
    --surface-2:       oklch(96.5% 0.005 80);
    --surface-3:       oklch(94.5% 0.005 80);
    --surface-inverse: oklch(16% 0.012 260);

    --primary-text:   oklch(18% 0.015 260);
    --secondary-text: oklch(40% 0.012 260);
    --tertiary-text:  oklch(58% 0.008 260);
    --inverse-text:   oklch(98.5% 0.004 80);

    --border-color:   oklch(88% 0.006 80);
    --border-subtle:  oklch(92% 0.005 80);
    --border-strong:  oklch(80% 0.006 80);
    --border-active:  oklch(45% 0.09 25);
    --border-light:   oklch(90% 0.006 80);
    --border-main:    oklch(20% 0.013 260);

    /* Accents — ink primary, claret editorial */
    --accent:          oklch(20% 0.013 260);
    --accent-black:    oklch(16% 0.012 260);
    --registry-accent: oklch(45% 0.09 25);
    --focus-ring:      oklch(45% 0.09 25 / 0.18);

    /* ── STRUCTURAL — squared, editorial radii ──────────────── */
    --radius-none: 0;
    --radius-sm:   2px;
    --radius-md:   2px;
    --radius-lg:   3px;
    --radius-xl:   4px;
    --radius-2xl:  6px;
    --radius-full: 9999px;

    --card-radius:         3px;
    --card-radius-sm:      2px;
    --btn-radius:          2px;
    --border-radius-cards: 3px;
    --border-radius-btn:   2px;

    --gap-unit: 8px;
    --space-0:  0;   --space-1:  4px;  --space-2:  8px;  --space-3:  12px;
    --space-4:  16px; --space-5: 20px; --space-6: 24px;  --space-8: 32px;
    --space-10: 40px; --space-12: 48px; --space-16: 64px;

    --shadow-none:           none;
    --shadow-xs:             0 1px 2px oklch(20% 0.013 260 / 0.04);
    --shadow-sm:             0 1px 3px oklch(20% 0.013 260 / 0.06), 0 1px 2px oklch(20% 0.013 260 / 0.04);
    --shadow-md:             0 4px 6px -1px oklch(20% 0.013 260 / 0.06), 0 2px 4px -2px oklch(20% 0.013 260 / 0.04);
    --shadow-lg:             0 10px 15px -3px oklch(20% 0.013 260 / 0.08), 0 4px 6px -4px oklch(20% 0.013 260 / 0.04);
    --shadow-xl:             0 20px 25px -5px oklch(20% 0.013 260 / 0.10), 0 8px 10px -6px oklch(20% 0.013 260 / 0.05);
    --shadow-registry:       0 4px 20px oklch(16% 0.012 260 / 0.02);
    --shadow-registry-hover: 0 10px 30px -10px oklch(16% 0.012 260 / 0.05);

    --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-base: 200ms;
    --duration-slow: 300ms;

    --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030;
    --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070;

    /* Baseline (scope-local, never bare body/html) */
    font-family: var(--font-body);
    color: var(--primary-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Box-sizing reset, scoped */
.bzl-scope,
.bzl-scope *,
.bzl-scope *::before,
.bzl-scope *::after { box-sizing: border-box; }

/* ── SEMANTIC TYPE RAMP ─────────────────────────────────────── */
.bzl-scope .bzl-display { font-family: var(--font-display); font-size: clamp(2.25rem, 5.5vw, 4.5rem); line-height: 0.96; letter-spacing: -0.028em; font-weight: 500; color: var(--primary-text); margin: 0; }
.bzl-scope .bzl-h1 { font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.1; letter-spacing: -0.025em; font-weight: 500; color: var(--primary-text); margin: 0; }
.bzl-scope .bzl-h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); font-weight: 500; color: var(--primary-text); margin: 0; }
.bzl-scope .bzl-h3 { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); font-weight: 500; color: var(--primary-text); margin: 0; }
.bzl-scope .bzl-h4 { font-family: var(--font-display); font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--tr-h4); font-weight: 600; color: var(--primary-text); margin: 0; }
.bzl-scope .bzl-body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--primary-text); }
.bzl-scope .bzl-small { font-family: var(--font-body); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--secondary-text); }
.bzl-scope .bzl-caption { font-family: var(--font-body); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--tertiary-text); }
.bzl-scope .bzl-eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; font-weight: 500; color: var(--tertiary-text); }
.bzl-scope .bzl-mono { font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 500; line-height: 1.4; }
/* Editorial italic accent for serif headline soft spans */
.bzl-scope .bzl-display em, .bzl-scope h1 em, .bzl-scope h2 em { font-style: italic; }

/* ── PAGE CHROME + LEXCORE HELPERS ──────────────────────────── */
html, body { background: var(--body-bg); }
::selection { background: oklch(45% 0.09 25); color: oklch(98.5% 0.004 80); }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb { background: var(--zinc-300); }

.lxc-ms { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; }

@keyframes lxcPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes lxcRing  { 0%,100% { box-shadow: 0 0 0 0 rgba(72,170,120,0.5); } 70% { box-shadow: 0 0 0 6px rgba(72,170,120,0); } }
.lxc-link { position: relative; text-decoration: none; color: inherit; }
.lxc-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1px; background: oklch(45% 0.09 25); transition: right .28s cubic-bezier(.2,.7,.2,1); }
.lxc-link:hover::after { right: 0; }

/* anchor buttons keep readable text colour */
a.bzl-btn, a.bzl-btn:hover, a.bzl-btn:focus, a.bzl-btn:visited { text-decoration: none; }
a.bzl-btn-primary, a.bzl-btn-primary:hover, a.bzl-btn-primary:focus { color: var(--inverse-text, #fafafa); }
a.bzl-btn-secondary, a.bzl-btn-secondary:hover, a.bzl-btn-secondary:focus { color: var(--primary-text, #18181b); }
a.bzl-btn-ghost, a.bzl-btn-ghost:hover, a.bzl-btn-ghost:focus { color: var(--secondary-text, #52525b); }

/* Public-landing layout variable — LexCore-owned (previously supplied only by
   the bizlink_theme module's landing_pages.css :root). Taller than the old 64px
   so the navbar's 20px vertical padding has room to breathe. */
:root { --navbar-height: 80px; --stats-bar-height: 0px; --header-height: var(--navbar-height); }
@media (max-width: 767px) { :root { --navbar-height: 60px; } }