/**
 * TLDR Africa — intelligence UI design system.
 *
 * Key-facts strips, entity cards, filter chips, preview panels and
 * sparklines, shared by the public intelligence pages and the admin
 * console. Every colour is a token, so dark mode is inherited rather
 * than re-declared per component.
 *
 * Loaded before the theme layer, so the theme's own tokens win where
 * the two overlap.
 */

   ══════════════════════════════════════════════════════════════════════ */

/* The intelligence components are shared with the admin panel, which does not
   sit inside and has no --tldr-* tokens of its own. These
   :root defaults keep those components legible there; wins
   on the public site by specificity. */
:root {
    --surface-color: #ffffff;
    --heading-color: #111119;
    --default-color: #34343f;
    --tldr-muted: #6f6f7d;
    --tldr-faint: #9b9ba8;
    --tldr-border: #ececf1;
    --tldr-border-strong: #dcdce4;
    --tldr-soft: #f5f4fb;
    --tldr-radius-sm: 10px;
    --tldr-radius: 16px;
    --tldr-shadow: 0 1px 2px rgba(17, 17, 26, .05), 0 10px 26px rgba(17, 17, 26, .055);
    --tldr-shadow-md: 0 2px 8px rgba(17, 17, 26, .06), 0 18px 40px rgba(17, 17, 26, .09);

    --intel-neutral:      #6f6f7d;
    --intel-neutral-bg:   #f5f4fb;
    --intel-neutral-bd:   #ececf1;
    --intel-accent:       #8c6222;
    --intel-accent-bg:    #f8efe0;
    --intel-accent-bd:    #ecd9b8;
    --intel-positive:     #1f7a4d;
    --intel-positive-bg:  #e8f4ed;
    --intel-positive-bd:  #c4e0d0;
    --intel-warning:      #8a5a12;
    --intel-warning-bg:   #fdf2de;
    --intel-warning-bd:   #f0dcb1;
    --intel-critical:     #a33131;
    --intel-critical-bg:  #fbeaea;
    --intel-critical-bd:  #eec6c6;
    --intel-info:         #2a5f8f;
    --intel-info-bg:      #e8f0f8;
    --intel-info-bd:      #c6dbee;
    --intel-spark:        #8c6222;
    --intel-spark-fill:   rgba(140, 98, 34, .12);
    --intel-spark-base:   #dcdce4;
}

:root {
    /* Status tones. Deliberately desaturated — pure red/green vibrates on
       a dark background, and these badges sit next to body copy. */
    --intel-neutral:      var(--tldr-muted);
    --intel-neutral-bg:   var(--tldr-soft);
    --intel-neutral-bd:   var(--tldr-border);
    --intel-accent:       #8c6222;
    --intel-accent-bg:    #f8efe0;
    --intel-accent-bd:    #ecd9b8;
    --intel-positive:     #1f7a4d;
    --intel-positive-bg:  #e8f4ed;
    --intel-positive-bd:  #c4e0d0;
    --intel-warning:      #8a5a12;
    --intel-warning-bg:   #fdf2de;
    --intel-warning-bd:   #f0dcb1;
    --intel-critical:     #a33131;
    --intel-critical-bg:  #fbeaea;
    --intel-critical-bd:  #eec6c6;
    --intel-info:         #2a5f8f;
    --intel-info-bg:      #e8f0f8;
    --intel-info-bd:      #c6dbee;

    /* Sparklines: neutral stroke that reads on both themes, gold reserved
       for the primary series only. */
    --intel-spark:        var(--intel-accent);
    --intel-spark-fill:   color-mix(in srgb, var(--intel-accent), transparent 88%);
    --intel-spark-base:   var(--tldr-border-strong);
}

html[data-theme="dark"] {
    --intel-accent:       #dcab68;
    --intel-accent-bg:    #362b19;
    --intel-accent-bd:    #4e3e24;
    --intel-positive:     #74cf9c;
    --intel-positive-bg:  #1d2f26;
    --intel-positive-bd:  #2d4a3a;
    --intel-warning:      #e0b169;
    --intel-warning-bg:   #33291a;
    --intel-warning-bd:   #4b3c26;
    --intel-critical:     #e89191;
    --intel-critical-bg:  #332020;
    --intel-critical-bd:  #4d3030;
    --intel-info:         #8bb9e2;
    --intel-info-bg:      #1e2b37;
    --intel-info-bd:      #2f4356;
}

/* ---- 15.1 Tones (shared by tags, tiles, borders) ---------- */
.intel-tone-neutral  { --tone: var(--intel-neutral);  --tone-bg: var(--intel-neutral-bg);  --tone-bd: var(--intel-neutral-bd); }
.intel-tone-accent   { --tone: var(--intel-accent);   --tone-bg: var(--intel-accent-bg);   --tone-bd: var(--intel-accent-bd); }
.intel-tone-positive { --tone: var(--intel-positive); --tone-bg: var(--intel-positive-bg); --tone-bd: var(--intel-positive-bd); }
.intel-tone-warning  { --tone: var(--intel-warning);  --tone-bg: var(--intel-warning-bg);  --tone-bd: var(--intel-warning-bd); }
.intel-tone-critical { --tone: var(--intel-critical); --tone-bg: var(--intel-critical-bg); --tone-bd: var(--intel-critical-bd); }
.intel-tone-info     { --tone: var(--intel-info);     --tone-bg: var(--intel-info-bg);     --tone-bd: var(--intel-info-bd); }

/* ---- 15.2 Status / verification tags ---------------------- */
/* No fixed widths and no truncation: translated labels commonly run
   20–30% longer than the English source. */
.intel-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .18rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--tone-bd, var(--tldr-border));
    background: var(--tone-bg, var(--tldr-soft));
    color: var(--tone, var(--tldr-muted));
    font-size: .74rem;
    font-weight: 650;
    line-height: 1.45;
    max-width: 100%;
    white-space: normal;
}
.intel-tag .bi { font-size: .82em; flex: 0 0 auto; }
.intel-tag-plain {
    background: transparent;
    border-color: var(--tldr-border);
    color: var(--tldr-muted);
    font-weight: 550;
}
.intel-tag-sub { opacity: .8; font-weight: 500; }

/* ---- 15.3 Key-facts strip --------------------------------- */
.intel-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.intel-facts-compact { gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }

.intel-fact {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .7rem .85rem .7rem 1rem;
    border: 1px solid var(--tldr-border);
    border-radius: var(--tldr-radius-sm, 10px);
    background: var(--surface-color);
    min-width: 0;
}
/* The tone accent is a border, not generated content — Google Translate
   cannot see ::before text, so nothing readable ever lives there. */
.intel-fact::before {
    content: "";
    position: absolute;
    inset: .55rem auto .55rem 0;
    width: 3px;
    border-radius: 999px;
    background: var(--tone, var(--tldr-border-strong));
}
.intel-fact-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tldr-faint);
    display: flex;
    align-items: center;
    gap: .3rem;
}
.intel-fact-label .bi { color: var(--tone, var(--tldr-faint)); font-size: .9em; }
.intel-fact-value {
    font-size: 1.02rem;
    font-weight: 750;
    color: var(--heading-color);
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.intel-fact-value a { color: inherit; text-decoration: none; }
.intel-fact-value a:hover { color: var(--intel-accent); text-decoration: underline; }
.intel-fact-sub { font-size: .78rem; color: var(--tldr-muted); overflow-wrap: anywhere; }

/* ---- 15.4 Identity header --------------------------------- */
.intel-identity {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}
.intel-avatar {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--intel-accent-bg);
    border: 1px solid var(--intel-accent-bd);
    color: var(--intel-accent);
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: .02em;
}
.intel-avatar-round { border-radius: 50%; }
.intel-avatar-img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; padding: 4px; }
.intel-avatar { overflow: hidden; }
.intel-identity-main { flex: 1 1 260px; min-width: 0; }
.intel-identity-name {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    color: var(--heading-color);
    margin: 0 0 .35rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.intel-identity-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.intel-identity-blurb { color: var(--default-color); margin: .35rem 0 .6rem; max-width: 62ch; }
.intel-identity-actions { display: flex; flex-wrap: wrap; gap: .4rem; }

.intel-action {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--tldr-border);
    background: var(--surface-color);
    color: var(--tldr-muted);
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.intel-action:hover { border-color: var(--intel-accent); color: var(--intel-accent); }

/* ---- 15.5 Block scaffold (the seven-block anatomy) -------- */
.intel-block {
    background: var(--surface-color);
    border: 1px solid var(--tldr-border);
    border-radius: var(--tldr-radius, 16px);
    padding: 1.15rem 1.25rem;
    margin-bottom: 1.25rem;
}
.intel-block-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .85rem;
}
.intel-block-title {
    font-size: 1.02rem;
    font-weight: 750;
    color: var(--heading-color);
    margin: 0;
    display: flex;
    align-items: center;
    gap: .45rem;
}
.intel-block-title .bi { color: var(--intel-accent); }
.intel-block-note { font-size: .82rem; color: var(--tldr-muted); margin: -.5rem 0 .85rem; }
/* An empty block collapses rather than disappearing, so the page keeps
   the same anatomy whether or not a section has data. */
.intel-empty {
    padding: .85rem 1rem;
    border: 1px dashed var(--tldr-border-strong);
    border-radius: var(--tldr-radius-sm, 10px);
    color: var(--tldr-muted);
    font-size: .86rem;
    background: transparent;
}

/* ---- 15.6 Entity cards ------------------------------------ */
.intel-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface-color);
    border: 1px solid var(--tldr-border);
    border-left: 3px solid var(--tone, var(--tldr-border-strong));
    border-radius: var(--tldr-radius, 16px);
    padding: 1rem 1.1rem;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.intel-card:hover {
    box-shadow: var(--tldr-shadow-md);
    transform: translateY(-1px);
}
.intel-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .4rem;
}
.intel-card-head { flex: 1 1 auto; min-width: 0; }
.intel-card-title {
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.3;
    margin: 0 0 .15rem;
    color: var(--heading-color);
    overflow-wrap: anywhere;
}
.intel-card-title a { color: inherit; text-decoration: none; }
.intel-card-title a:hover { color: var(--intel-accent); }
.intel-card-subtitle { font-size: .84rem; color: var(--tldr-muted); margin: 0 0 .5rem; overflow-wrap: anywhere; }
.intel-card-summary {
    font-size: .86rem;
    color: var(--default-color);
    margin: 0 0 .6rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.intel-card-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.1rem;
    margin: 0 0 .6rem;
    padding: .55rem 0 0;
    border-top: 1px solid var(--tldr-border);
    list-style: none;
}
.intel-card-fact { min-width: 0; }
.intel-card-fact-label,
.intel-card-fact-value,
.intel-card-fact-sub { display: block; }
.intel-card-fact-label {
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tldr-faint);
}
.intel-card-fact-value { font-size: .88rem; font-weight: 700; color: var(--tone, var(--heading-color)); overflow-wrap: anywhere; }
.intel-card-fact-sub { font-size: .72rem; color: var(--tldr-muted); line-height: 1.3; }
.intel-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin-top: auto;
    padding-top: .5rem;
}
.intel-card-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.intel-card-spark { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.intel-card-date { font-size: .74rem; color: var(--tldr-faint); white-space: nowrap; }

/* The whole card is clickable, but the preview button and inner links
   must stay reachable above the overlay. */
.intel-card-hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.intel-card-title a,
.intel-card-foot,
.intel-card-actions { position: relative; z-index: 2; }
.intel-card-actions { display: flex; gap: .3rem; flex: 0 0 auto; }
.intel-card-icon-btn {
    border: 1px solid var(--tldr-border);
    background: var(--surface-color);
    color: var(--tldr-muted);
    border-radius: 8px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: .85rem;
    padding: 0;
}
.intel-card-icon-btn:hover { border-color: var(--intel-accent); color: var(--intel-accent); }

/* ---- 15.7 Expandable rows --------------------------------- */
/* Both labels are rendered and toggled with a class. Swapping the text of
   a node Google Translate has already rewritten makes it revert to the
   source language, so we never replace the text node itself. */
.intel-expand-toggle {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 0;
    background: transparent;
    color: var(--intel-accent);
    font-size: .78rem;
    font-weight: 650;
    padding: .2rem 0;
    cursor: pointer;
}
.intel-expand-toggle .bi { transition: transform .18s ease; }
.intel-expand-toggle[aria-expanded="true"] .bi { transform: rotate(180deg); }
.intel-expand-toggle .intel-label-collapsed { display: inline; }
.intel-expand-toggle .intel-label-expanded { display: none; }
.intel-expand-toggle[aria-expanded="true"] .intel-label-collapsed { display: none; }
.intel-expand-toggle[aria-expanded="true"] .intel-label-expanded { display: inline; }
.intel-expand-body {
    margin-top: .6rem;
    padding-top: .6rem;
    border-top: 1px dashed var(--tldr-border-strong);
}

/* ---- 15.8 Filter chips ------------------------------------ */
.intel-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1rem;
}
.intel-chips-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tldr-faint);
}
.intel-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .22rem .3rem .22rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--intel-accent-bd);
    background: var(--intel-accent-bg);
    color: var(--intel-accent);
    font-size: .76rem;
    font-weight: 650;
    max-width: 100%;
    white-space: normal;
}
.intel-chip-key { opacity: .7; font-weight: 550; }
.intel-chip-x {
    border: 0;
    background: transparent;
    color: inherit;
    line-height: 1;
    padding: 0 .25rem;
    cursor: pointer;
    border-radius: 999px;
    opacity: .75;
}
.intel-chip-x:hover { opacity: 1; background: color-mix(in srgb, var(--intel-accent), transparent 85%); }
.intel-chips-clear {
    border: 0;
    background: transparent;
    color: var(--tldr-muted);
    font-size: .76rem;
    font-weight: 650;
    text-decoration: underline;
    cursor: pointer;
    padding: .1rem .2rem;
}
.intel-chips-clear:hover { color: var(--intel-accent); }

/* Option counts in the filter panel */
.intel-opt-count {
    margin-left: auto;
    font-size: .7rem;
    color: var(--tldr-faint);
    font-variant-numeric: tabular-nums;
}
.intel-sidebar .form-check { display: flex; align-items: center; gap: .4rem; }
.intel-sidebar .form-check .form-check-input { margin: 0; flex: 0 0 auto; float: none; }
.intel-sidebar .form-check-label { flex: 1 1 auto; }
.intel-sidebar .form-check.is-empty .form-check-label { opacity: .55; }

/* Busy indicator while an in-place filter change is in flight */
.intel-results { position: relative; transition: opacity .15s ease; }
.intel-results.is-loading { opacity: .45; pointer-events: none; }
.intel-results-spinner {
    position: sticky;
    top: 96px;
    z-index: 3;
    display: flex;
    justify-content: center;
    height: 0;
}
.intel-results-spinner span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: var(--surface-color);
    border: 1px solid var(--tldr-border);
    box-shadow: var(--tldr-shadow);
    font-size: .76rem;
    color: var(--tldr-muted);
}

/* ---- 15.9 Preview panel ----------------------------------- */
.intel-preview-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 26, .38);
    z-index: 1080;
}
.intel-preview {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(430px, 100vw);
    z-index: 1081;
    display: flex;
    flex-direction: column;
    background: var(--surface-color);
    border-left: 1px solid var(--tldr-border);
    box-shadow: -18px 0 48px rgba(17, 17, 26, .18);
}
.intel-preview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.15rem .85rem;
    border-bottom: 1px solid var(--tldr-border);
}
.intel-preview-kicker {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tldr-faint);
}
.intel-preview-title { font-size: 1.12rem; font-weight: 800; color: var(--heading-color); margin: .15rem 0 .2rem; overflow-wrap: anywhere; }
.intel-preview-subtitle { font-size: .85rem; color: var(--tldr-muted); overflow-wrap: anywhere; }
.intel-preview-body { flex: 1 1 auto; overflow-y: auto; padding: 1rem 1.15rem; }
.intel-preview-foot {
    padding: .85rem 1.15rem;
    border-top: 1px solid var(--tldr-border);
    display: flex;
    gap: .5rem;
}
.intel-preview-close {
    flex: 0 0 auto;
    border: 1px solid var(--tldr-border);
    background: transparent;
    color: var(--tldr-muted);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.intel-preview-close:hover { border-color: var(--intel-accent); color: var(--intel-accent); }

.intel-preview-enter-active,
.intel-preview-leave-active { transition: transform .22s ease, opacity .22s ease; }
.intel-preview-enter-from,
.intel-preview-leave-to { transform: translateX(12px); opacity: 0; }

@media (max-width: 575.98px) {
    .intel-preview { width: 100vw; top: auto; height: 88vh; border-left: 0; border-top-left-radius: 18px; border-top-right-radius: 18px; }
    .intel-preview-enter-from,
    .intel-preview-leave-to { transform: translateY(16px); opacity: 0; }
}

/* ---- 15.10 Sourced mentions ------------------------------- */
.intel-mention-list { list-style: none; margin: 0; padding: 0; }
.intel-mention-item {
    padding: .65rem 0;
    border-bottom: 1px solid var(--tldr-border);
}
.intel-mention-item:last-child { border-bottom: 0; padding-bottom: 0; }
.intel-mention-link { font-weight: 650; color: var(--heading-color); text-decoration: none; overflow-wrap: anywhere; }
.intel-mention-link:hover { color: var(--intel-accent); }
.intel-mention-meta { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .25rem; font-size: .74rem; color: var(--tldr-faint); }
.intel-mention-excerpt {
    margin: .35rem 0 0;
    padding-left: .7rem;
    border-left: 2px solid var(--tldr-border-strong);
    font-size: .82rem;
    color: var(--tldr-muted);
}

/* ---- 15.11 Timeline (shared with the hub) ----------------- */
.intel-story { list-style: none; margin: 0; padding: 0 0 0 1.35rem; position: relative; }
.intel-story::before {
    content: "";
    position: absolute;
    left: 5px;
    top: .4rem;
    bottom: .4rem;
    width: 2px;
    background: var(--tldr-border);
}
.intel-story-item { position: relative; padding-bottom: 1rem; }
.intel-story-item:last-child { padding-bottom: 0; }
.intel-story-dot {
    position: absolute;
    left: -1.35rem;
    top: .3rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--tone, var(--tldr-border-strong));
    box-shadow: 0 0 0 3px var(--surface-color);
}
.intel-story-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .2rem; }
.intel-story-title { font-weight: 650; color: var(--heading-color); overflow-wrap: anywhere; }
.intel-story-desc { font-size: .85rem; color: var(--tldr-muted); }

/* ---- 15.12 Sparkline -------------------------------------- */
/* Clipped, not visible: the series is inset by 2px in Sparkline.vue, so
   nothing is lost, and the stroke can never spill past the card edge. */
.intel-spark { display: block; overflow: hidden; }
.intel-spark-line { fill: none; stroke: var(--intel-spark); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.intel-spark-area { fill: var(--intel-spark-fill); stroke: none; }
.intel-spark-base { stroke: var(--intel-spark-base); stroke-width: 1; }
.intel-spark-dot { fill: var(--intel-spark); }

/* ---- 15.13 Tone bar (per-mention sentiment) --------------- */
.intel-tonebar {
    display: flex;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--tldr-soft);
    border: 1px solid var(--tldr-border);
}
.intel-tonebar-seg { background: var(--tone, var(--tldr-border-strong)); min-width: 3px; }

/* A topic chip reads lighter than a country/sector chip: it says what the
   entity is currently about, not what it is. */
.intel-tag-topic {
    border-style: dashed;
    font-weight: 550;
}

/* ---- 15.14 Reduced motion --------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .intel-card,
    .intel-results,
    .intel-preview-enter-active,
    .intel-preview-leave-active,
    .intel-expand-toggle .bi { transition: none; }
    .intel-card:hover { transform: none; }
}

/* ---- Dark neutrals -----------------------------------------------------
   The tone tokens above already flip for dark; these are the surface and
   text neutrals the same components lean on. They are declared here rather
   than in either theme layer because the intelligence UI is shared by the
   public site and the admin console, and only one of those has its own
   token system. Each theme's own layer loads afterwards and may refine
   them. */
html[data-theme="dark"] {
    --surface-color: #191b21;
    --heading-color: #f3f4f7;
    --default-color: #d6d7dd;
    --tldr-muted: #9296a3;
    --tldr-faint: #767a86;
    --tldr-border: #262931;
    --tldr-border-strong: #343842;
    --tldr-soft: #16181d;
    --tldr-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 26px rgba(0, 0, 0, .4);
    --tldr-shadow-md: 0 2px 8px rgba(0, 0, 0, .4), 0 18px 40px rgba(0, 0, 0, .5);
    --intel-spark-base: #343842;
}