/* ============================================================================
   BASIS NETWORK -- explorer brand layer
   ----------------------------------------------------------------------------
   Injected into every Blockscout page by the kit's nginx proxy (sub_filter in
   blockscout/proxy/default.conf.template), served from /basis/brand.css.

   Blockscout v2.3.5 runs Chakra UI v3. Chakra emits its entire design system as
   CSS custom properties on three selectors, which this file re-declares:

     :where(html, .chakra-theme)          raw palette + fonts + radii
     :root, .light                        light-mode semantic tokens
     .dark, .dark .chakra-theme:not(.light)   dark-mode semantic tokens

   Re-declaring the *variables* rather than restyling components means every
   Blockscout screen -- including ones this kit never opens -- inherits the
   brand automatically, and nothing breaks when Blockscout reshuffles its
   component internals.

   Source of truth for every value below: the Basis Network landing
   (basisnetwork.com.co) -- src/styles/globals.css + tailwind.config.ts.
       cyan   #00FFCC      sky    #00CCFF
       ink    #0B2540      inkSoft #0F2A47
       type   General Sans (display + body) / JetBrains Mono (code, hashes)
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. PALETTE
   Blockscout drives nearly all of its chrome from Chakra's `blue` and `gray`
   scales plus `black`/`black-alpha`. Remapping those four is what turns the
   whole product Basis rather than only the pages we happen to restyle.
   `blue` becomes the brand ramp: cyan at the light end, sky in the middle,
   basis-ink at the dark end. Steps 600/700 are deliberately dark enough to
   clear WCAG AA on both #FFFFFF and the #F6F9FB page surface, which the raw
   brand cyan (#00FFCC, 1.4:1 on white) cannot do for body-size text.
   --------------------------------------------------------------------------- */
:where(html, .chakra-theme) {
  /* Brand ramp (replaces Chakra's default blue) */
  --chakra-colors-blue-50:  #ECFBFA;
  --chakra-colors-blue-100: #CFF5F1;
  --chakra-colors-blue-200: #A5EBE8;
  --chakra-colors-blue-300: #6FDCE0;
  --chakra-colors-blue-400: #22C3D6;
  --chakra-colors-blue-500: #0C9EC4;
  --chakra-colors-blue-600: #0A7299;
  --chakra-colors-blue-700: #0B5A79;
  --chakra-colors-blue-800: #0D4460;
  --chakra-colors-blue-900: #0B2540;
  --chakra-colors-blue-950: #061525;

  /* Neutrals, tinted toward the brand navy instead of Chakra's warm slate */
  --chakra-colors-gray-50:  #F6F9FB;
  --chakra-colors-gray-100: #EBF0F5;
  --chakra-colors-gray-200: #DCE4EC;
  --chakra-colors-gray-300: #C2CDD9;
  --chakra-colors-gray-400: #8FA0B3;
  --chakra-colors-gray-500: #607285;
  --chakra-colors-gray-600: #47586B;
  --chakra-colors-gray-700: #2C3D52;
  --chakra-colors-gray-800: #17293E;
  --chakra-colors-gray-900: #0F1F31;
  /* inkSoft: dark-mode panels must sit ABOVE the ink page surface, so this
     step is lighter than gray-900 on purpose. */
  --chakra-colors-gray-950: #0F2A47;

  /* `black` is light-mode body text AND the dark-mode page surface. Basis ink
     is the correct value for both. */
  --chakra-colors-black: #0B2540;

  /* Hairlines. The landing draws every divider with rgba(11,37,64,.08); this is
     that colour expressed across Chakra's alpha ladder. 800 is nudged from .80
     to .88 so body copy keeps landing-level weight on the tinted surface. */
  --chakra-colors-black-alpha-50:  rgba(11, 37, 64, 0.04);
  --chakra-colors-black-alpha-100: rgba(11, 37, 64, 0.06);
  --chakra-colors-black-alpha-200: rgba(11, 37, 64, 0.08);
  --chakra-colors-black-alpha-300: rgba(11, 37, 64, 0.16);
  --chakra-colors-black-alpha-400: rgba(11, 37, 64, 0.24);
  --chakra-colors-black-alpha-500: rgba(11, 37, 64, 0.36);
  --chakra-colors-black-alpha-600: rgba(11, 37, 64, 0.50);
  --chakra-colors-black-alpha-700: rgba(11, 37, 64, 0.66);
  --chakra-colors-black-alpha-800: rgba(11, 37, 64, 0.88);
  --chakra-colors-black-alpha-900: rgba(11, 37, 64, 0.94);
  --chakra-colors-black-alpha-950: rgba(11, 37, 64, 0.97);

  /* Accent families used by badges and charts, pulled onto the brand axis.
     red / orange / green keep their meaning (error / warning / success) and are
     only desaturated to sit at the same level as the rest of the palette --
     recolouring a failure state for brand reasons would make the UI lie. */
  --chakra-colors-cyan-50:  #E6FFFA;
  --chakra-colors-cyan-100: #C6FDF3;
  --chakra-colors-cyan-200: #8FF2E4;
  --chakra-colors-cyan-300: #4FE0D4;
  --chakra-colors-cyan-400: #1FC7C2;
  --chakra-colors-cyan-500: #0FA5A8;
  --chakra-colors-cyan-600: #0C8189;
  --chakra-colors-cyan-700: #0D6570;
  --chakra-colors-cyan-800: #0D4C56;
  --chakra-colors-cyan-900: #0A3540;
  --chakra-colors-teal-50:  #E9FBF6;
  --chakra-colors-teal-100: #C6F5E8;
  --chakra-colors-teal-200: #8FE9D2;
  --chakra-colors-teal-300: #4FD6B6;
  --chakra-colors-teal-400: #1FBD98;
  --chakra-colors-teal-500: #0F9C7C;
  --chakra-colors-teal-600: #0C7B63;
  --chakra-colors-teal-700: #0C6150;
  --chakra-colors-teal-800: #0B493D;
  --chakra-colors-teal-900: #08322A;

  /* ---- Typography ----------------------------------------------------------
     Body/heading also arrive through NEXT_PUBLIC_FONT_FAMILY_*; declaring them
     here too means the brand survives if those env vars are ever cleared.
     Chakra has no env hook for `mono`, and mono is what the explorer actually
     renders most of -- every hash, address and block number. */
  --chakra-fonts-heading: 'General Sans', 'Segoe UI', system-ui, sans-serif;
  --chakra-fonts-body:    'General Sans', 'Segoe UI', system-ui, sans-serif;
  --chakra-fonts-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Radii ---------------------------------------------------------------
     The landing is a pill-and-soft-card system: buttons at 999px, cards at
     1.5rem. Chakra's l1/l2/l3 are the "layer" radii every recipe composes from,
     so raising them rounds the whole component set at once. */
  --chakra-radii-sm:   6px;
  --chakra-radii-base: 10px;
  --chakra-radii-md:   14px;
  --chakra-radii-lg:   18px;
  --chakra-radii-xl:   24px;
  --chakra-radii-2xl:  1.25rem;
  --chakra-radii-3xl:  1.5rem;
  --chakra-radii-l1:   var(--chakra-radii-sm);
  --chakra-radii-l2:   var(--chakra-radii-base);
  --chakra-radii-l3:   var(--chakra-radii-md);

  /* ---- Shadows -------------------------------------------------------------
     Chakra's neutral black shadows read grey against a navy-tinted surface.
     These are the landing's shadow-glass / shadow-lift, which are cast in ink. */
  --chakra-shadows-size-xs:   0 0 0 1px rgba(11, 37, 64, 0.05);
  --chakra-shadows-size-sm:   0 1px 2px 0 rgba(11, 37, 64, 0.06);
  --chakra-shadows-size-base: 0 1px 2px 0 rgba(11, 37, 64, 0.06), 0 1px 3px 0 rgba(11, 37, 64, 0.08);
  --chakra-shadows-size-md:   0 2px 6px -1px rgba(11, 37, 64, 0.08), 0 4px 10px -2px rgba(11, 37, 64, 0.08);
  --chakra-shadows-size-lg:   0 8px 24px 0 rgba(11, 37, 64, 0.08);
  --chakra-shadows-size-xl:   0 18px 40px -16px rgba(11, 37, 64, 0.18);
  --chakra-shadows-size-2xl:  0 24px 60px -20px rgba(11, 37, 64, 0.22);

  /* Basis-only tokens, referenced further down. */
  --basis-cyan: #00FFCC;
  --basis-sky:  #00CCFF;
  --basis-ink:  #0B2540;
  --basis-ink-soft: #0F2A47;
  --basis-gradient: linear-gradient(95deg, #00FFCC 0%, #46E5FF 45%, #00CCFF 100%);
  --basis-dot: rgba(11, 37, 64, 0.05);
  --basis-dot-gap: 28px;
}

/* ---------------------------------------------------------------------------
   2. THEME TOKENS
   The 19 `theme-*` variables are Blockscout's own brand seam (the same set
   NEXT_PUBLIC_COLOR_THEME_OVERRIDES writes). They are set in both places on
   purpose: the env var is the supported path and survives without this file,
   these declarations keep the two in sync and cover graph/topbar/stats, which
   the env schema also exposes but which are easy to miss.
   --------------------------------------------------------------------------- */
:where(html, .chakra-theme) {
  /* -- light -- */
  --chakra-colors-theme-bg-primary-_light:              #F6F9FB;
  --chakra-colors-theme-text-primary-_light:            var(--chakra-colors-black-alpha-800);
  --chakra-colors-theme-text-secondary-_light:          #607285;
  --chakra-colors-theme-link-primary-_light:            #0A7299;
  --chakra-colors-theme-button-primary-_light:          #0B2540;
  --chakra-colors-theme-hover-_light:                   #0C9EC4;
  --chakra-colors-theme-icon-primary-_light:            #47586B;
  --chakra-colors-theme-icon-secondary-_light:          #8FA0B3;
  --chakra-colors-theme-topbar-bg-_light:               rgba(0, 255, 204, 0.07);
  --chakra-colors-theme-stats-bg-_light:                #FFFFFF;
  --chakra-colors-theme-tabs-text-primary-_light:       #0B2540;
  --chakra-colors-theme-navigation-bg-selected-_light:  rgba(0, 255, 204, 0.12);
  --chakra-colors-theme-navigation-text-selected-_light:#0B2540;
  --chakra-colors-theme-selected-control-bg-_light:     rgba(0, 255, 204, 0.14);
  --chakra-colors-theme-selected-control-text-_light:   #0B2540;
  --chakra-colors-theme-selected-option-bg-_light:      #0A7299;
  --chakra-colors-theme-graph-line-_light:              #0C9EC4;
  --chakra-colors-theme-graph-gradient-start-_light:    rgba(0, 204, 255, 0.28);
  --chakra-colors-theme-graph-gradient-stop-_light:     rgba(0, 255, 204, 0.00);

  /* -- dark -- */
  --chakra-colors-theme-bg-primary-_dark:               #0B2540;
  --chakra-colors-theme-text-primary-_dark:             rgba(233, 243, 250, 0.92);
  --chakra-colors-theme-text-secondary-_dark:           #8FA0B3;
  --chakra-colors-theme-link-primary-_dark:             #6FDCE0;
  --chakra-colors-theme-button-primary-_dark:           #00FFCC;
  --chakra-colors-theme-hover-_dark:                    #00FFCC;
  --chakra-colors-theme-icon-primary-_dark:             #8FA0B3;
  --chakra-colors-theme-icon-secondary-_dark:           #607285;
  --chakra-colors-theme-topbar-bg-_dark:                rgba(0, 255, 204, 0.08);
  --chakra-colors-theme-stats-bg-_dark:                 #0F2A47;
  --chakra-colors-theme-tabs-text-primary-_dark:        #00FFCC;
  --chakra-colors-theme-navigation-bg-selected-_dark:   rgba(0, 255, 204, 0.12);
  --chakra-colors-theme-navigation-text-selected-_dark: #00FFCC;
  --chakra-colors-theme-selected-control-bg-_dark:      rgba(0, 255, 204, 0.14);
  --chakra-colors-theme-selected-control-text-_dark:    #00FFCC;
  --chakra-colors-theme-selected-option-bg-_dark:       #0A7299;
  --chakra-colors-theme-graph-line-_dark:               #00FFCC;
  --chakra-colors-theme-graph-gradient-start-_dark:     rgba(0, 255, 204, 0.30);
  --chakra-colors-theme-graph-gradient-stop-_dark:      rgba(0, 255, 204, 0.00);
}

/* The primary solid button is basis-ink in light mode and brand cyan in dark;
   its label colour has to follow, and Chakra hardcodes white for both. */
.dark [data-scope="button"][data-variant="solid"],
.dark .chakra-button[data-variant="solid"] {
  color: var(--basis-ink);
}

/* ---------------------------------------------------------------------------
   2b. STATUS COLOUR
   Badges and alerts keep their meanings -- green is success, red is failure,
   amber is an advisory, and the transaction-type badges stay distinguishable
   from one another. Only the rendering changes: on the ink surface Chakra fills
   these chips with a solid 900-step, which comes out as mud (a maroon "scanning
   transactions" bar, a brown "Coin transfer" pill). Replacing the fills with
   low-alpha tints of the same hue, plus a light foreground, gives the same
   information at the same saturation level as the rest of the theme.
   --------------------------------------------------------------------------- */
.dark, .dark .chakra-theme:not(.light) {
  --chakra-colors-badge-blue-bg:   rgba(34, 195, 214, 0.16);
  --chakra-colors-badge-blue-fg:   #6FDCE0;
  --chakra-colors-badge-cyan-bg:   rgba(0, 255, 204, 0.16);
  --chakra-colors-badge-cyan-fg:   #8FF2E4;
  --chakra-colors-badge-teal-bg:   rgba(31, 189, 152, 0.16);
  --chakra-colors-badge-teal-fg:   #8FE9D2;
  --chakra-colors-badge-green-bg:  rgba(52, 199, 123, 0.16);
  --chakra-colors-badge-green-fg:  #86EFAC;
  --chakra-colors-badge-orange-bg: rgba(251, 146, 60, 0.16);
  --chakra-colors-badge-orange-fg: #FDBA74;
  --chakra-colors-badge-yellow-bg: rgba(250, 204, 21, 0.16);
  --chakra-colors-badge-yellow-fg: #FDE68A;
  --chakra-colors-badge-red-bg:    rgba(248, 113, 113, 0.16);
  --chakra-colors-badge-red-fg:    #FCA5A5;
  --chakra-colors-badge-purple-bg: rgba(167, 139, 250, 0.16);
  --chakra-colors-badge-purple-fg: #C4B5FD;
  --chakra-colors-badge-gray-bg:   rgba(233, 243, 250, 0.09);
  --chakra-colors-badge-gray-fg:   rgba(233, 243, 250, 0.78);

  --chakra-colors-alert-bg-info:    rgba(0, 255, 204, 0.08);
  --chakra-colors-alert-bg-success: rgba(52, 199, 123, 0.14);
  --chakra-colors-alert-bg-warning: rgba(251, 146, 60, 0.14);
  --chakra-colors-alert-bg-error:   rgba(248, 113, 113, 0.14);
  --chakra-colors-alert-fg:         rgba(233, 243, 250, 0.88);
}

/* ---------------------------------------------------------------------------
   3. PAGE SURFACE
   The landing's signature: a near-white base carrying a 28px ink dot grid and
   two soft brand washes (cyan top-left, sky right).

   The wash is painted on `#__next > div`, not on a pseudo-element behind the
   app: that element is Blockscout's full-viewport page surface and it paints an
   opaque bg-primary over anything underneath (verified by isolating each layer
   in turn). background-attachment:fixed anchors the pattern to the viewport, so
   it stays put while a long block table scrolls -- the landing's behaviour.
   --------------------------------------------------------------------------- */
body {
  background-color: var(--chakra-colors-theme-bg-primary-_light);
  font-feature-settings: 'ss01', 'ss02', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.dark body { background-color: var(--chakra-colors-theme-bg-primary-_dark); }

#__next > div {
  background-image:
    radial-gradient(circle at var(--basis-dot-gap) var(--basis-dot-gap), var(--basis-dot) 1px, transparent 0),
    radial-gradient(900px 380px at 10% 2%,   rgba(0, 255, 204, 0.13), transparent 70%),
    radial-gradient(1000px 420px at 92% 16%, rgba(0, 204, 255, 0.13), transparent 70%);
  background-size: var(--basis-dot-gap) var(--basis-dot-gap), 100% 100%, 100% 100%;
  background-attachment: fixed, fixed, fixed;
  background-repeat: repeat, no-repeat, no-repeat;
}
.dark #__next > div {
  --basis-dot: rgba(0, 255, 204, 0.07);
  background-image:
    radial-gradient(circle at var(--basis-dot-gap) var(--basis-dot-gap), var(--basis-dot) 1px, transparent 0),
    radial-gradient(900px 380px at 10% 2%,   rgba(0, 255, 204, 0.09), transparent 70%),
    radial-gradient(1000px 420px at 92% 16%, rgba(0, 204, 255, 0.09), transparent 70%);
}

/* ---------------------------------------------------------------------------
   4. TYPOGRAPHY DETAIL
   Headings take the landing's tight optical tracking; the mono face carries
   every hash and address.
   --------------------------------------------------------------------------- */
h1, h2, h3, h4,
[data-scope="heading"],
.chakra-heading {
  font-family: var(--chakra-fonts-heading);
  letter-spacing: -0.018em;
  font-weight: 600;
}
h1, .chakra-heading[data-size="xl"] { letter-spacing: -0.024em; }

code, kbd, samp, pre {
  font-family: var(--chakra-fonts-mono);
}

/* Blockscout v2.3.5 renders hashes and addresses in the body face; the landing
   sets long hex in JetBrains Mono (.mono-long), and hex is materially easier to
   compare character-by-character in a monospace face. These three selectors
   cover every hex string the explorer shows: `.address-entity` wraps addresses
   (identicon + text), and /tx/ and /block/ links only ever contain a hash or a
   height. Token and contract *names* live in other entities and stay in
   General Sans. */
.address-entity,
a[href^="/tx/"],
a[href^="/block/"] {
  font-family: var(--chakra-fonts-mono);
  font-variant-ligatures: none;
  letter-spacing: -0.01em;
}
/* Full-length hashes: page-title hash, "Transaction hash" row, contract
   bytecode, raw input. Blockscout renders every one of these as a plain span in
   a wrapper immediately followed by its copy button, and it puts a copy button
   on exactly the values that are raw machine data -- so "the thing you can copy"
   is a precise stand-in for "the thing that should be monospace". */
:is(div, span):has(+ button[aria-label="copy"]) {
  font-family: var(--chakra-fonts-mono);
  font-variant-ligatures: none;
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------------------
   5. CONTROLS
   Pill buttons and pill inputs, per the landing's .btn / .input.
   --------------------------------------------------------------------------- */
button, [role="button"],
[data-scope="button"],
.chakra-button {
  border-radius: 9999px;
  letter-spacing: -0.005em;
}
/* Icon-only and segmented controls stay square-ish; forcing them to pills
   deforms the hit area. */
[data-scope="button"][data-variant="ghost"]:not(:has(span)),
[aria-label][data-scope="button"]:not(:has(span)),
[data-scope="tabs"] button,
[data-scope="pagination"] button {
  border-radius: var(--chakra-radii-base);
}

input, textarea, select,
[data-scope="input"] input,
.chakra-input {
  border-radius: var(--chakra-radii-md);
}
input:focus-visible, textarea:focus-visible,
.chakra-input:focus-visible {
  border-color: var(--basis-cyan);
  box-shadow: 0 0 0 4px rgba(0, 255, 204, 0.20);
}

/* ---------------------------------------------------------------------------
   6. SURFACES
   Blockscout paints panels flat white on white. The landing's card is a
   translucent glass plate with an ink hairline -- which is also what makes the
   dot grid legible behind the content.
   --------------------------------------------------------------------------- */
[data-scope="dialog"] [data-part="content"],
[data-scope="popover"] [data-part="content"],
[data-scope="menu"] [data-part="content"],
[data-scope="drawer"] [data-part="content"] {
  border-radius: var(--chakra-radii-2xl);
  border: 1px solid var(--chakra-colors-black-alpha-200);
  box-shadow: var(--chakra-shadows-size-xl);
}
.dark [data-scope="dialog"] [data-part="content"],
.dark [data-scope="popover"] [data-part="content"],
.dark [data-scope="menu"] [data-part="content"],
.dark [data-scope="drawer"] [data-part="content"] {
  border-color: rgba(0, 255, 204, 0.14);
}

/* Table headers: the landing's mono eyebrow treatment. */
table thead th,
[data-scope="table"] [data-part="columnHeader"] {
  font-family: var(--chakra-fonts-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
   7. CHROME
   Scrollbars, selection, focus ring -- the details that betray a default theme.
   --------------------------------------------------------------------------- */
* { scrollbar-color: rgba(11, 37, 64, 0.22) transparent; }
.dark * { scrollbar-color: rgba(0, 255, 204, 0.28) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(11, 37, 64, 0.22);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(11, 37, 64, 0.38); background-clip: content-box; }
.dark ::-webkit-scrollbar-thumb { background: rgba(0, 255, 204, 0.28); background-clip: content-box; }
.dark ::-webkit-scrollbar-thumb:hover { background: rgba(0, 255, 204, 0.45); background-clip: content-box; }

::selection { background: rgba(0, 255, 204, 0.30); color: var(--basis-ink); }
.dark ::selection { background: rgba(0, 255, 204, 0.30); color: #FFFFFF; }

:focus-visible { outline-color: var(--basis-cyan); }

/* ---------------------------------------------------------------------------
   8. ATTRIBUTION
   The footer credit stays -- this IS Blockscout, and removing the credit would
   misrepresent whose software it is. It is restyled to sit inside the brand
   instead of fighting it.
   --------------------------------------------------------------------------- */
footer a[href*="blockscout"] { color: var(--chakra-colors-theme-text-secondary-_light); }
.dark footer a[href*="blockscout"] { color: var(--chakra-colors-theme-text-secondary-_dark); }
footer a[href*="blockscout"]:hover { color: var(--chakra-colors-theme-hover-_light); }
.dark footer a[href*="blockscout"]:hover { color: var(--basis-cyan); }