/*
 * Design tokens for the classic theme.
 *
 * Every visual decision made by css/xchain.css and css/xchain-charts.css
 * reads a token from this file, so a skin is exactly one tokens.css that
 * redefines values and changes no markup and no JavaScript.
 *
 * DARK/LIGHT AUDIT. The explorer's own stylesheets own no value that
 * resolves per mode: every mode-dependent surface on a page comes from
 * Bootstrap's `--bs-*` variables, which `data-bs-theme` already switches.
 * Tokens that must follow the mode therefore either layer over a `--bs-*`
 * variable (the chart tooltip) or are redefined in the dark block at the
 * bottom of this file (the chart empty-state). Everything else is
 * mode-independent as it renders today and stays flat here; the footer bar
 * in particular is dark in both modes, and this file preserves that rather
 * than quietly changing it.
 *
 * Values are the ones that render today, moved verbatim. Two rules that
 * happen to share a number keep separate tokens when they are separate
 * decisions, so a skin can move one without dragging the other.
 *
 * BOOTSTRAP SURFACE BRIDGE (row 22a). The token layer above covers only what
 * xchain.css and xchain-charts.css themselves declared, which measured out at
 * exactly 30 computed values a skin could move on the home page: footer, table
 * borders and density, status tints, highlight and chart chrome. Everything
 * else a reader sees - page background, body text, links, borders, muted text -
 * comes from Bootstrap's own `--bs-*` defaults, which no tokens.css could reach.
 * The operator accepted that as real scope; this is the fix.
 *
 * The bridge below re-points those Bootstrap variables at `--xc-surface-*`
 * tokens. Classic defines them as Bootstrap's own default values, byte for
 * byte from the vendored bootstrap.min.css, so the classic theme renders
 * exactly as it did - the parity gate is the proof, not the intent. A skin now
 * only has to redefine the `--xc-surface-*` names to recolour the whole page.
 *
 * The `-rgb` triples are carried too, and they are not optional: Bootstrap
 * composes translucent surfaces as rgba(var(--bs-body-bg-rgb), .5), so a skin
 * that moved only the hex would leave every translucent overlay on the old
 * palette, which is worse than not moving it at all.
 */

:root {

    /* Primitives shared across families */
    --xc-space-none: 0px;
    --xc-border-width-none: 0px;
    --xc-radius-lg: 6px;

    /* Main-menu glyphs (.fa-xchain and the per-chain / external-explorer icons) */
    --xc-glyph-width: 20px;
    --xc-glyph-height: 20px;
    --xc-glyph-xchain-height: 18px;
    --xc-glyph-xchain-offset-top: 2px;
    --xc-glyph-coin-offset-top: 5px;
    --xc-glyph-explorer-offset-top: 0px;

    /* Footer bar. Dark in both modes by design, so these are flat values.
       The two colors are written in rgb() rather than hex because the
       :hover / :visited rules that read them are compared as declared text. */
    --xc-footer-width: 100%;
    --xc-footer-height: 50px;
    --xc-footer-bg: #222;
    --xc-footer-color: rgb(255, 255, 255);
    --xc-footer-link-color: rgb(136, 136, 136);

    /* Cell truncation: how wide a cell may grow before it ellipsizes */
    --xc-cell-truncate-max-width: 200px;
    --xc-cell-truncate-min-width: 5px;

    /* DataTables chrome */
    --xc-datatable-info-padding-top: 0em;
    --xc-datatable-length-select-padding: 2px;
    --xc-datatable-paginate-padding-y: 0em;
    --xc-datatable-paginate-padding-x: 0.5em;
    --xc-datatable-placeholder-padding-y: 20px;

    /* Table borders and density */
    --xc-table-border-width: 1px;
    --xc-table-border-color: #ddd;
    --xc-table-cell-padding: 5px;
    /* The legs or members a list row opens under itself (action_markers.js) */
    --xc-legs-child-padding-y: 0.25rem;
    --xc-legs-child-indent: 2rem;
    --xc-legs-cell-font-size: 0.875em;
    --xc-legs-cell-padding-y: 0.15rem;
    --xc-legs-cell-padding-x: 0.5rem;

    /* Market page */
    --xc-market-info-height: 100px;
    --xc-market-header-height: 65px;
    --xc-market-header-padding-top: 5px;
    --xc-market-icons-width: 135px;
    --xc-market-icons-margin-x: 5px;
    --xc-market-name-font-size: 1.5em;
    --xc-market-name-font-weight: bold;
    --xc-market-name-line-height: 1.0em;
    --xc-market-pair-margin-top: 5px;
    --xc-market-description-margin: 5px;
    --xc-market-stats-th-width: 120px;

    /* Icon sizing utilities */
    --xc-wrapicon-25-width: 25px;
    --xc-wrapicon-25-margin-right: 5px;
    --xc-icon-size-20: 20px;
    --xc-icon-size-48: 48px;
    --xc-icon-size-64: 64px;

    /* Status row backgrounds, applied to rows by the client */
    --xc-row-bg-danger: #EFC9CA;
    --xc-row-bg-success: #E0F2DF;
    --xc-row-bg-warning: #FFFAA0;

    /* Bridge invariant badges (token page bridged-copies panel, transfer list).
       The invariant is escrow >= supply, never equality, so the three states are
       not a pass/fail pair: balanced is the resting state, SURPLUS is a warning
       (a stranger can SEND to the escrow role address and nothing refuses it)
       and DEFICIT is the alarm that says a destination credit is not backed.
       Unknown is its own colour rather than a reuse of balanced, because a
       missing number must never paint the healthy badge. Declared here and in
       skin-demo so a skin can repaint the alarm to its own palette (D30). */
    --xc-bridge-state-ok-bg: #E0F2DF;
    --xc-bridge-state-ok-color: #14532d;
    --xc-bridge-state-surplus-bg: #FFFAA0;
    --xc-bridge-state-surplus-color: #664d03;
    --xc-bridge-state-deficit-bg: #EFC9CA;
    --xc-bridge-state-deficit-color: #7f1d1d;
    --xc-bridge-state-unknown-bg: #e9ecef;
    --xc-bridge-state-unknown-color: #495057;
    --xc-bridge-origin-bg: #dee2e6;
    --xc-bridge-origin-color: #212529;
    /* The row a reader is already on, marked so the page's own chain is findable
       in a per-chain table without a second colour vocabulary. */
    --xc-bridge-this-chain-bg: rgba(0, 0, 0, 0.04);

    /* Fixed column widths, one per column class */
    --xc-th-width-record: 75px;
    --xc-th-width-time: 150px;
    --xc-th-width-amount: 100px;
    --xc-th-width-quantity: 250px;
    --xc-th-width-quantity-small: 100px;
    --xc-th-width-view: 50px;
    --xc-th-width-transactions: 120px;
    --xc-th-width-address: 320px;

    /* Stat tables */
    --xc-table-stats-th-width: 120px;
    --xc-table-address-stats-th-width: 175px;

    /* Token and lock detail tables */
    --xc-token-info-th-width: 120px;
    --xc-enhanced-token-info-th-width: 140px;
    --xc-lock-info-th-width: 120px;

    /* Custom-content warning panel */
    --xc-custom-content-warning-height: 200px;
    --xc-custom-content-warning-bg: #D0D0D0;
    --xc-custom-content-warning-padding-top: 20px;
    --xc-custom-content-danger-margin: 20px;
    --xc-custom-content-viewer-width: 100%;

    /* Terms of use and search-term highlighting */
    --xc-terms-item-margin-bottom: 10px;
    --xc-highlight-bg: yellow;
    --xc-highlight-font-weight: bold;

    /* Chart layer: container and toolbar */
    --xc-chart-width: 100%;
    --xc-chart-canvas-width: 100%;
    --xc-chart-toolbar-gap: .35rem;
    --xc-chart-toolbar-padding-top: .25rem;
    --xc-chart-toolbar-padding-bottom: .4rem;
    --xc-chart-btn-padding-y: .1rem;
    --xc-chart-btn-padding-x: .4rem;
    --xc-chart-btn-font-size: .75rem;

    /* Chart empty state. The only explorer-owned color that follows the
       mode; its dark value is at the bottom of this file. */
    --xc-chart-nodata-min-height: 200px;
    --xc-chart-nodata-font-size: 15px;
    --xc-chart-nodata-font-weight: bold;
    --xc-chart-nodata-color: #303030;

    /* Chart tooltip. Its surface follows the mode through Bootstrap, which
       is the honest source for body background, text and border color. */
    --xc-chart-tooltip-z-index: 1080;
    --xc-chart-tooltip-transition-duration: .1s;
    --xc-chart-tooltip-padding-y: .4rem;
    --xc-chart-tooltip-padding-x: .6rem;
    --xc-chart-tooltip-border-width: 1px;
    --xc-chart-tooltip-border-color: var(--bs-border-color, #ced4da);
    --xc-chart-tooltip-radius: .25rem;
    --xc-chart-tooltip-bg: var(--bs-body-bg, #fff);
    --xc-chart-tooltip-color: var(--bs-body-color, #212529);
    --xc-chart-tooltip-shadow: 0 .25rem .6rem rgba(0, 0, 0, .18);
    --xc-chart-tooltip-font-size: .8125rem;
    --xc-chart-tooltip-table-margin-top: .2rem;
    --xc-chart-tooltip-cell-padding-x: .25rem;
    --xc-chart-tooltip-separator-padding-x: .15rem;


    /* --- Bootstrap surface bridge (row 22a) ---------------------------------
       Values are Bootstrap 5's own light defaults, copied from the vendored
       bootstrap.min.css so classic renders unchanged. Redefine these in a skin
       to recolour the page itself rather than only the explorer's chrome. */
    --xc-surface-body-bg: #fff;
    --xc-surface-body-bg-rgb: 255,255,255;
    --xc-surface-body-color: #212529;
    --xc-surface-body-color-rgb: 33,37,41;
    --xc-surface-emphasis-color: #000;
    --xc-surface-emphasis-color-rgb: 0,0,0;
    --xc-surface-secondary-color: rgba(33, 37, 41, 0.75);
    --xc-surface-secondary-color-rgb: 33,37,41;
    --xc-surface-secondary-bg: #e9ecef;
    --xc-surface-secondary-bg-rgb: 233,236,239;
    --xc-surface-tertiary-color: rgba(33, 37, 41, 0.5);
    --xc-surface-tertiary-color-rgb: 33,37,41;
    --xc-surface-tertiary-bg: #f8f9fa;
    --xc-surface-tertiary-bg-rgb: 248,249,250;
    --xc-surface-link-color: #0d6efd;
    --xc-surface-link-color-rgb: 13,110,253;
    --xc-surface-link-hover-color: #0a58ca;
    --xc-surface-link-hover-color-rgb: 10,88,202;
    --xc-surface-code-color: #d63384;
    --xc-surface-highlight-color: #212529;
    --xc-surface-highlight-bg: #fff3cd;
    --xc-surface-border-color: #dee2e6;
    --xc-surface-border-color-translucent: rgba(0, 0, 0, 0.175);

}

/* Mode-dependent overrides. Values only: no rule in the stylesheets is
   selected per mode, so a theme changes the mode by changing tokens. */
[data-bs-theme="dark"] {

    --xc-chart-nodata-color: #dee2e6;

    /* Bootstrap surface bridge, dark values. Only the --xc-surface-* tokens are
       restated: the --bs-* bridge above already points at them, so the mode
       switch flows through one layer rather than two. */
    --xc-surface-body-bg: #212529;
    --xc-surface-body-bg-rgb: 33,37,41;
    --xc-surface-body-color: #dee2e6;
    --xc-surface-body-color-rgb: 222,226,230;
    --xc-surface-emphasis-color: #fff;
    --xc-surface-emphasis-color-rgb: 255,255,255;
    --xc-surface-secondary-color: rgba(222, 226, 230, 0.75);
    --xc-surface-secondary-color-rgb: 222,226,230;
    --xc-surface-secondary-bg: #343a40;
    --xc-surface-secondary-bg-rgb: 52,58,64;
    --xc-surface-tertiary-color: rgba(222, 226, 230, 0.5);
    --xc-surface-tertiary-color-rgb: 222,226,230;
    --xc-surface-tertiary-bg: #2b3035;
    --xc-surface-tertiary-bg-rgb: 43,48,53;
    --xc-surface-link-color: #6ea8fe;
    --xc-surface-link-color-rgb: 110,168,254;
    --xc-surface-link-hover-color: #8bb9fe;
    --xc-surface-link-hover-color-rgb: 139,185,254;
    --xc-surface-code-color: #e685b5;
    --xc-surface-highlight-color: #dee2e6;
    --xc-surface-highlight-bg: #664d03;
    --xc-surface-border-color: #495057;
    --xc-surface-border-color-translucent: rgba(255, 255, 255, 0.15);

}

/* The Bootstrap bridge, on every selector that can carry the mode.
   updateTheme() writes data-bs-theme onto BODY, not onto the html element, so
   Bootstrap re-declares its own --bs-* surface variables directly on body for
   both modes. A bridge declared only on :root would be inherited by body and
   then immediately overridden there, which looks like the bridge working in
   light mode and silently failing in dark. Declaring it on the same elements
   Bootstrap uses, from a stylesheet that loads after Bootstrap, is what makes
   the theme win at equal specificity. */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {

    --bs-body-bg: var(--xc-surface-body-bg);
    --bs-body-bg-rgb: var(--xc-surface-body-bg-rgb);
    --bs-body-color: var(--xc-surface-body-color);
    --bs-body-color-rgb: var(--xc-surface-body-color-rgb);
    --bs-emphasis-color: var(--xc-surface-emphasis-color);
    --bs-emphasis-color-rgb: var(--xc-surface-emphasis-color-rgb);
    --bs-secondary-color: var(--xc-surface-secondary-color);
    --bs-secondary-color-rgb: var(--xc-surface-secondary-color-rgb);
    --bs-secondary-bg: var(--xc-surface-secondary-bg);
    --bs-secondary-bg-rgb: var(--xc-surface-secondary-bg-rgb);
    --bs-tertiary-color: var(--xc-surface-tertiary-color);
    --bs-tertiary-color-rgb: var(--xc-surface-tertiary-color-rgb);
    --bs-tertiary-bg: var(--xc-surface-tertiary-bg);
    --bs-tertiary-bg-rgb: var(--xc-surface-tertiary-bg-rgb);
    --bs-link-color: var(--xc-surface-link-color);
    --bs-link-color-rgb: var(--xc-surface-link-color-rgb);
    --bs-link-hover-color: var(--xc-surface-link-hover-color);
    --bs-link-hover-color-rgb: var(--xc-surface-link-hover-color-rgb);
    --bs-code-color: var(--xc-surface-code-color);
    --bs-highlight-color: var(--xc-surface-highlight-color);
    --bs-highlight-bg: var(--xc-surface-highlight-bg);
    --bs-border-color: var(--xc-surface-border-color);
    --bs-border-color-translucent: var(--xc-surface-border-color-translucent);

}