/* ============================================================================
   x4digital V5 — Unified Design Tokens
   Design language for the V5 customer-facing landing surface.
   Per Charter NN#5 (anti-templatey) + feedback_aesthetic_is_signal.md
   (we build websites; our chrome IS the credibility test).
   ============================================================================
   Source: selected donor visual-system learnings adapted to V5 contracts.
   ============================================================================ */

@property --emphasis-solid {
  syntax: "<color>";
  inherits: true;
  initial-value: #C8A24A;
}

@property --emphasis-solid-hover {
  syntax: "<color>";
  inherits: true;
  initial-value: #A1822F;
}

@property --emphasis-bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #F4ECCC;
}

@property --emphasis-fg {
  syntax: "<color>";
  inherits: true;
  initial-value: #A1822F;
}

@property --emphasis-on-solid {
  syntax: "<color>";
  inherits: true;
  initial-value: #1A1612;
}

@property --emphasis-glow {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(200, 162, 74, 0.20);
}

:root {
  /* ── Color: warm-paper foundation ── */
  --bg: #FAFAF7;                  /* warm off-white canvas */
  --surface: #FFFFFF;             /* card / panel surface */
  --surface-2: #F5F4EE;           /* deeper warm tone for tabs / sections */
  --surface-3: #EFEDE4;           /* deepest warm tone for hover-rest states */
  --header-bg: rgba(250, 250, 247, 0.86);

  /* ── Color: ink (text) ── */
  --ink-900: #1A1612;             /* headings, primary text */
  --ink-700: #3A332C;             /* body text */
  --ink-600: #5A5048;             /* secondary text */
  --ink-500: #7A6F65;             /* muted text */
  --ink-400: #9A9087;             /* disabled / placeholder */
  --ink-300: #BFB8AF;             /* dividers / borders */
  --ink-200: #DDD7CF;             /* soft borders */
  --ink-100: #EDE9E2;             /* subtle dividers */

  /* ── Color: clay accent (warm orange-red) ── */
  --accent: #D9512C;              /* primary accent — clay */
  --accent-2: #B83E1F;            /* deeper clay (hover, gradient stops) */
  --accent-soft: #FBE9E2;         /* clay-tinted soft surface */
  --accent-foreground: #FFFFFF;

  /* ── Color: gold accent ── */
  --gold: #C8A24A;                /* gold */
  --gold-soft: #F4ECCC;           /* gold-tinted soft surface */
  --gold-deep: #A1822F;           /* deeper gold for text-on-light */

  /* ── Color: tech accent ── */
  --tech-cyan: #00A3FF;           /* original V1 cyan */
  --tech-cyan-deep: #0077CC;      /* deep cyan companion */
  --tech-cyan-bloom: #22D3EE;     /* glow/focus bloom only */

  /* Decorative emphasis starts gold in light mode, then drifts to tech cyan
     in dark mode. Keep these separate from --gold so gold never snaps cyan. */
  --emphasis-solid: var(--gold);
  --emphasis-solid-hover: var(--gold-deep);
  --emphasis-bg: var(--gold-soft);
  --emphasis-fg: var(--gold-deep);
  --emphasis-on-solid: var(--ink-900);
  --emphasis-glow: rgba(200, 162, 74, 0.20);

  /* ── Color: semantic ── */
  --success: #4A7C3F;
  --success-soft: #E5F1E0;
  --warn: #C8842A;
  --warn-soft: #FBEDD8;
  --danger: #B53D2D;
  --danger-soft: #FBDDDB;

  /* ── Type: families ── */
  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ── Type: scale ── */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   19px;
  --text-xl:   23px;
  --text-2xl:  28px;
  --text-3xl:  34px;
  --text-4xl:  44px;
  --text-5xl:  56px;
  --text-6xl:  72px;

  /* ── Type: weight ── */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* ── Type: line-height ── */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* ── Type: letter-spacing ── */
  --tracking-tight: 0;
  --tracking-normal: 0;
  --tracking-wide: 0;
  --tracking-wider: 0;

  /* ── Space: scale ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ── Radius ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --radius-pill: 999px;

  /* ── Shadow (elevation + lift) ── */
  --shadow-0: 0 1px 2px rgba(26, 22, 18, 0.04);
  --shadow-1: 0 4px 12px rgba(26, 22, 18, 0.06), 0 1px 3px rgba(26, 22, 18, 0.04);
  --shadow-2: 0 12px 32px rgba(26, 22, 18, 0.10), 0 4px 12px rgba(26, 22, 18, 0.06);
  --shadow-3: 0 24px 64px rgba(26, 22, 18, 0.14), 0 8px 24px rgba(26, 22, 18, 0.08);
  --shadow-clay: 0 4px 12px rgba(217, 81, 44, 0.20);
  --shadow-clay-lift: 0 12px 32px rgba(217, 81, 44, 0.24);

  /* ── Motion ── */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-deliberate: 480ms;

  /* ── Layout ── */
  --container-narrow: 640px;
  --container-base: 880px;
  --container-wide: 1180px;
  --container-full: 1440px;
}

html {
  --emphasis-token-duration: 0s;
  transition:
    --emphasis-solid var(--emphasis-token-duration) ease-in-out,
    --emphasis-solid-hover var(--emphasis-token-duration) ease-in-out,
    --emphasis-bg var(--emphasis-token-duration) ease-in-out,
    --emphasis-fg var(--emphasis-token-duration) ease-in-out,
    --emphasis-on-solid var(--emphasis-token-duration) ease-in-out,
    --emphasis-glow var(--emphasis-token-duration) ease-in-out;
}

html[data-theme-transitioning="enter"] { --emphasis-token-duration: 90s; }
html[data-theme-transitioning="exit"] { --emphasis-token-duration: 2.5s; }

html[data-theme="dark"][data-theme-transitioning="enter"] {
  animation: x4-emphasis-enter 90s ease-in-out both;
  animation-delay: var(--emphasis-enter-delay, 0s);
}

html[data-theme-transitioning="exit"] {
  animation: none;
}

@keyframes x4-emphasis-enter {
  0%, 12% {
    --emphasis-solid: #C8A24A;
    --emphasis-solid-hover: #A1822F;
    --emphasis-bg: color-mix(in srgb, #C8A24A 14%, #0A0F1A);
    --emphasis-fg: #D8B85A;
    --emphasis-on-solid: #1A1612;
    --emphasis-glow: rgba(200, 162, 74, 0.20);
  }
  34% {
    --emphasis-solid: #D9512C;
    --emphasis-solid-hover: #B83E1F;
    --emphasis-bg: color-mix(in srgb, #D9512C 13%, #0A0F1A);
    --emphasis-fg: #F08A64;
    --emphasis-on-solid: #FFFFFF;
    --emphasis-glow: rgba(217, 81, 44, 0.24);
  }
  58% {
    --emphasis-solid: #7C5CFF;
    --emphasis-solid-hover: #5B43D6;
    --emphasis-bg: color-mix(in srgb, #7C5CFF 12%, #0A0F1A);
    --emphasis-fg: #9D8CFF;
    --emphasis-on-solid: #FFFFFF;
    --emphasis-glow: rgba(124, 92, 255, 0.24);
  }
  80% {
    --emphasis-solid: #0077CC;
    --emphasis-solid-hover: #005EA3;
    --emphasis-bg: color-mix(in srgb, #0077CC 12%, #0A0F1A);
    --emphasis-fg: #3BB7FF;
    --emphasis-on-solid: #FFFFFF;
    --emphasis-glow: color-mix(in srgb, var(--tech-cyan-bloom) 22%, transparent);
  }
  100% {
    --emphasis-solid: var(--tech-cyan);
    --emphasis-solid-hover: var(--tech-cyan-deep);
    --emphasis-bg: color-mix(in srgb, var(--tech-cyan) 10%, #0A0F1A);
    --emphasis-fg: var(--tech-cyan);
    --emphasis-on-solid: #06111A;
    --emphasis-glow: color-mix(in srgb, var(--tech-cyan-bloom) 28%, transparent);
  }
}

/* ============================================================================
   Tech Mode (dark) - CMO Batch 2 2026-05-16
   ----------------------------------------------------------------------------
   Dark mode keeps --gold gold. Decorative emphasis moves through the
   --emphasis-* tokens from gold to original V1 cyan over 90s. Functional
   states use the static tech-cyan tokens for accessibility; the bloom cyan is
   reserved for glows and focus rings.
   ============================================================================ */

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0A0F1A;
  --surface: #111827;
  --surface-2: #172033;
  --surface-3: #1E293B;
  --header-bg: rgba(10, 15, 26, 0.9);

  --ink-900: #F8FAFC;
  --ink-700: #E2E8F0;
  --ink-600: #CBD5E1;
  --ink-500: #94A3B8;
  --ink-400: #64748B;
  --ink-300: #475569;
  --ink-200: #334155;
  --ink-100: #1E293B;

  /* Functional cyan (focus rings, link/button states - static, no pulse) */
  --accent: var(--tech-cyan);
  --accent-2: var(--tech-cyan-deep);
  --accent-soft: color-mix(in srgb, var(--tech-cyan) 10%, transparent);
  --accent-foreground: #0A0F12;

  /* Gold remains gold; --emphasis-* is the animated gold -> cyan layer. */
  --gold: #C8A24A;
  --gold-soft: color-mix(in srgb, #C8A24A 14%, #0A0F1A);
  --gold-deep: #D8B85A;

  --emphasis-solid: var(--tech-cyan);
  --emphasis-solid-hover: var(--tech-cyan-deep);
  --emphasis-bg: color-mix(in srgb, var(--tech-cyan) 10%, #0A0F1A);
  --emphasis-fg: var(--tech-cyan);
  --emphasis-on-solid: #06111A;
  --emphasis-glow: color-mix(in srgb, var(--tech-cyan-bloom) 28%, transparent);

  --success: #7BD88F;
  --success-soft: rgba(123, 216, 143, 0.14);
  --warn: #D8B55D;
  --warn-soft: rgba(216, 181, 93, 0.14);
  --danger: #FF7B6C;
  --danger-soft: rgba(255, 123, 108, 0.14);

  --shadow-0: 0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-1: 0 6px 18px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.22);
  --shadow-2: 0 16px 42px rgba(0, 0, 0, 0.34), 0 4px 12px rgba(0, 0, 0, 0.24);
  --shadow-3: 0 28px 76px rgba(0, 0, 0, 0.44), 0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-clay: 0 4px 16px color-mix(in srgb, var(--tech-cyan) 16%, transparent);
  --shadow-clay-lift: 0 14px 40px color-mix(in srgb, var(--tech-cyan) 20%, transparent);
}

/* User-initiated dark entry must begin from the brand gold state even though
   the dark theme's resting accent is cyan. Browsers with custom-property
   animation support drift from these values via x4-emphasis-enter; browsers
   without it still avoid the jarring instant cyan snap during the entry
   window. */
/* ----------------------------------------------------------------------------
   Asymmetric transitions on decorative-emphasis consumers (dark mode only).
   ----------------------------------------------------------------------------
   - Light → Dark: 90s ease-in-out (subliminal drift to cyan)
   - Dark → Light: 2.5s ease-in-out (snappy feedback)
     JS sets [data-theme-transitioning="enter"] before a user-initiated dark
     entry so transitions are in place before values change, and
     [data-theme-transitioning="exit"] on <html> for ~3s during exit.
   - prefers-reduced-motion: instant snap, no transition.

   Selector scope: decorative emphasis-using elements only. NOT functional
   surfaces (focus rings, button state borders, link hovers) — those use
   --accent which is static, and they need stable color for accessibility.
   ---------------------------------------------------------------------------- */

[data-theme-transitioning="enter"] .eyebrow,
[data-theme-transitioning="enter"] .accent-text,
[data-theme-transitioning="enter"] .decorative-numeral,
[data-theme-transitioning="enter"] .brand-accent-overlay,
[data-theme-transitioning="enter"] .brand-mark::before,
[data-theme-transitioning="enter"] .btn--gold,
[data-theme-transitioning="enter"] .pill--gold,
[data-theme-transitioning="enter"] .panel__header::after,
[data-theme-transitioning="enter"] .hero__lede,
[data-theme-transitioning="enter"] .hero__lede strong,
[data-theme-transitioning="enter"] .mobile-proof,
[data-theme-transitioning="enter"] .mobile-proof__headline,
[data-theme-transitioning="enter"] .compare-card,
[data-theme-transitioning="enter"] .compare-card--lead,
[data-theme-transitioning="enter"] .compare-card__label,
[data-theme-transitioning="enter"] .compare-card h3,
[data-theme-transitioning="enter"] .compare__col--us,
[data-theme-transitioning="enter"] .compare__col--us-th,
[data-theme-transitioning="enter"] .step__icon,
[data-theme-transitioning="enter"] .step__num,
[data-theme-transitioning="enter"] .faq__toggle,
[data-theme-transitioning="enter"] .card__eyebrow,
[data-theme-transitioning="enter"] .pricing-hero__title span,
[data-theme-transitioning="enter"] .pricing-card__badge,
[data-theme-transitioning="enter"] .pricing-card__price sup,
[data-theme-transitioning="enter"] .pricing-featured__item::before,
[data-theme-transitioning="enter"] [data-decorative-gold] {
  transition:
    color 90s ease-in-out,
    background-color 90s ease-in-out,
    border-color 90s ease-in-out,
    box-shadow 90s ease-in-out,
    fill 90s ease-in-out;
}

[data-theme="dark"] .eyebrow,
[data-theme="dark"] .accent-text,
[data-theme="dark"] .decorative-numeral,
[data-theme="dark"] .brand-accent-overlay,
[data-theme="dark"] .brand-mark::before,
[data-theme="dark"] .btn--gold,
[data-theme="dark"] .pill--gold,
[data-theme="dark"] .panel__header::after,
[data-theme="dark"] .hero__lede,
[data-theme="dark"] .hero__lede strong,
[data-theme="dark"] .mobile-proof,
[data-theme="dark"] .mobile-proof__headline,
[data-theme="dark"] .compare-card,
[data-theme="dark"] .compare-card--lead,
[data-theme="dark"] .compare-card__label,
[data-theme="dark"] .compare-card h3,
[data-theme="dark"] .compare__col--us,
[data-theme="dark"] .compare__col--us-th,
[data-theme="dark"] .step__icon,
[data-theme="dark"] .step__num,
[data-theme="dark"] .faq__toggle,
[data-theme="dark"] .card__eyebrow,
[data-theme="dark"] .pricing-hero__title span,
[data-theme="dark"] .pricing-card__badge,
[data-theme="dark"] .pricing-card__price sup,
[data-theme="dark"] .pricing-featured__item::before,
[data-theme="dark"] [data-decorative-gold] {
  transition:
    color 90s ease-in-out,
    background-color 90s ease-in-out,
    border-color 90s ease-in-out,
    box-shadow 90s ease-in-out,
    fill 90s ease-in-out;
}

[data-theme-transitioning="exit"] .eyebrow,
[data-theme-transitioning="exit"] .accent-text,
[data-theme-transitioning="exit"] .decorative-numeral,
[data-theme-transitioning="exit"] .brand-accent-overlay,
[data-theme-transitioning="exit"] .brand-mark::before,
[data-theme-transitioning="exit"] .btn--gold,
[data-theme-transitioning="exit"] .pill--gold,
[data-theme-transitioning="exit"] .panel__header::after,
[data-theme-transitioning="exit"] .hero__lede,
[data-theme-transitioning="exit"] .hero__lede strong,
[data-theme-transitioning="exit"] .mobile-proof,
[data-theme-transitioning="exit"] .mobile-proof__headline,
[data-theme-transitioning="exit"] .compare-card,
[data-theme-transitioning="exit"] .compare-card--lead,
[data-theme-transitioning="exit"] .compare-card__label,
[data-theme-transitioning="exit"] .compare-card h3,
[data-theme-transitioning="exit"] .compare__col--us,
[data-theme-transitioning="exit"] .compare__col--us-th,
[data-theme-transitioning="exit"] .step__icon,
[data-theme-transitioning="exit"] .step__num,
[data-theme-transitioning="exit"] .faq__toggle,
[data-theme-transitioning="exit"] .card__eyebrow,
[data-theme-transitioning="exit"] .pricing-hero__title span,
[data-theme-transitioning="exit"] .pricing-card__badge,
[data-theme-transitioning="exit"] .pricing-card__price sup,
[data-theme-transitioning="exit"] .pricing-featured__item::before,
[data-theme-transitioning="exit"] [data-decorative-gold] {
  transition:
    color 2.5s ease-in-out,
    background-color 2.5s ease-in-out,
    border-color 2.5s ease-in-out,
    box-shadow 2.5s ease-in-out,
    fill 2.5s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  html {
    --emphasis-token-duration: 0s;
    animation: none !important;
    transition: none !important;
  }

  [data-theme="dark"] .eyebrow,
  [data-theme="dark"] .accent-text,
  [data-theme="dark"] .decorative-numeral,
  [data-theme="dark"] .brand-accent-overlay,
  [data-theme="dark"] .brand-mark::before,
  [data-theme="dark"] .btn--gold,
  [data-theme="dark"] .pill--gold,
  [data-theme="dark"] .panel__header::after,
  [data-theme="dark"] .hero__lede,
  [data-theme="dark"] .hero__lede strong,
  [data-theme="dark"] .mobile-proof,
  [data-theme="dark"] .mobile-proof__headline,
  [data-theme="dark"] .compare-card,
  [data-theme="dark"] .compare-card--lead,
  [data-theme="dark"] .compare-card__label,
  [data-theme="dark"] .compare-card h3,
  [data-theme="dark"] .compare__col--us,
  [data-theme="dark"] .compare__col--us-th,
  [data-theme="dark"] .theme-toggle__state,
  [data-theme="dark"] .step__icon,
  [data-theme="dark"] .step__num,
  [data-theme="dark"] .faq__toggle,
  [data-theme="dark"] .card__eyebrow,
  [data-theme="dark"] .pricing-hero__title span,
  [data-theme="dark"] .pricing-card__badge,
  [data-theme="dark"] .pricing-card__price sup,
  [data-theme="dark"] .pricing-featured__item::before,
  [data-theme="dark"] [data-decorative-gold],
  [data-theme-transitioning="exit"] .eyebrow,
  [data-theme-transitioning="exit"] .accent-text,
  [data-theme-transitioning="exit"] .decorative-numeral,
  [data-theme-transitioning="exit"] .brand-accent-overlay,
  [data-theme-transitioning="exit"] .brand-mark::before,
  [data-theme-transitioning="exit"] .btn--gold,
  [data-theme-transitioning="exit"] .pill--gold,
  [data-theme-transitioning="exit"] .panel__header::after,
  [data-theme-transitioning="exit"] .hero__lede,
  [data-theme-transitioning="exit"] .hero__lede strong,
  [data-theme-transitioning="enter"] .mobile-proof,
  [data-theme-transitioning="enter"] .mobile-proof__headline,
  [data-theme-transitioning="enter"] .compare-card,
  [data-theme-transitioning="enter"] .compare-card--lead,
  [data-theme-transitioning="enter"] .compare-card__label,
  [data-theme-transitioning="enter"] .compare-card h3,
  [data-theme-transitioning="enter"] .compare__col--us,
  [data-theme-transitioning="enter"] .compare__col--us-th,
  [data-theme-transitioning="exit"] .mobile-proof,
  [data-theme-transitioning="exit"] .mobile-proof__headline,
  [data-theme-transitioning="exit"] .compare-card,
  [data-theme-transitioning="exit"] .compare-card--lead,
  [data-theme-transitioning="exit"] .compare-card__label,
  [data-theme-transitioning="exit"] .compare-card h3,
  [data-theme-transitioning="exit"] .compare__col--us,
  [data-theme-transitioning="exit"] .compare__col--us-th,
  [data-theme-transitioning="exit"] .step__icon,
  [data-theme-transitioning="exit"] .step__num,
  [data-theme-transitioning="exit"] .faq__toggle,
  [data-theme-transitioning="exit"] .card__eyebrow,
  [data-theme-transitioning="exit"] .pricing-hero__title span,
  [data-theme-transitioning="exit"] .pricing-card__badge,
  [data-theme-transitioning="exit"] .pricing-card__price sup,
  [data-theme-transitioning="exit"] .pricing-featured__item::before,
  [data-theme-transitioning="exit"] [data-decorative-gold] {
    transition: none !important;
  }
}

/* ----------------------------------------------------------------------------
   CTA hover bloom (dark mode only)
   ---------------------------------------------------------------------------- */

[data-theme="dark"] .btn--accent:hover,
[data-theme="dark"] .btn--lg:hover {
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--tech-cyan-bloom) 15%, transparent),
    0 0 24px color-mix(in srgb, var(--tech-cyan-bloom) 40%, transparent);
  transition: box-shadow 200ms ease-out;
}

/* ----------------------------------------------------------------------------
   Demo widget send-button focus glow (dark mode only)
   ---------------------------------------------------------------------------- */

[data-theme="dark"] .demo__send:focus,
[data-theme="dark"] .demo__send:focus-visible {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--tech-cyan-bloom) 30%, transparent),
    0 0 12px color-mix(in srgb, var(--tech-cyan-bloom) 50%, transparent);
  outline: 1px solid var(--tech-cyan-bloom);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

/* ── Body baseline ── */
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-700);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Headings: serif with tight tracking ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--ink-900);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
  font-weight: var(--weight-semibold);
}

/* ── Eyebrow caps (gold uppercase tracked-out) ── */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--emphasis-fg);
}

/* ── Focus ring (consistent across all interactive surfaces) ── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── Selection ── */
::selection {
  background: var(--accent-soft);
  color: var(--ink-900);
}

/* ── Scrollbars (subtle, warm) ── */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--ink-200);
  border: 3px solid var(--bg);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ink-300);
}