/* TWS Wallet brand layer, loaded by every page shell (public, auth, dashboard, admin).

   Two things live here, each defined separately for night and for day:
     --logo-*   the inline logo (templates/includes/_brand.html, from tools/make_logo.py)
     --il-*     the illustrations (templates/includes/_illustrations.html)

   Every shell sets data-theme="dark" or "light" on <html>; nothing here is a guess from
   the system setting, so the art always matches the rest of the page. Night is the
   default when no theme has been set yet. */

:root, html[data-theme="dark"] {
    --logo-top: #3A6BF5;
    --logo-bottom: #1E40D8;
    --logo-word: #F5F7FA;
    --logo-accent: #6EA2FF;
    --logo-rim0: #FAFBFD;              /* the seal's silver rim, top to bottom */
    --logo-rim1: #C9D1E0;
    --logo-rim2: #F0F3F8;
    --logo-rim3: #8E9AB6;
    --logo-line: #0A1A5C;              /* the hairline between rim and face */
    --logo-inner: #7AA7FF;             /* the sapphire face: lit centre, middle, edge */
    --logo-mid: #2F62F0;
    --logo-inner2: #0E2A9E;

    --il-ink: #E9EDF6;                 /* strongest lines and marks */
    --il-ink-2: #9AA3B8;               /* secondary lines */
    --il-surface: #1B2130;             /* cards and objects */
    --il-surface-2: #242C3E;           /* inner panels */
    --il-line: rgba(255, 255, 255, .14);
    --il-soft: rgba(59, 130, 255, .16);   /* background blobs */
    --il-soft-2: rgba(52, 211, 153, .14);
    --il-primary: #3B82FF;
    --il-primary-2: #22B8FF;
    --il-accent: #34D399;
    --il-accent-2: #0D9488;
    --il-warm: #F5B544;
    --il-warm-2: #E0892B;
    --il-on: #FFFFFF;                  /* marks drawn on a coloured shape */
    --il-shadow: rgba(0, 0, 0, .55);
    --il-gloss: .42;                   /* the shine on coins and cards */
}

html[data-theme="light"] {
    --logo-top: #285AEB;
    --logo-bottom: #1433C4;
    --logo-word: #0B1220;
    --logo-accent: #1F4FE0;
    --logo-rim0: #F7F9FC;
    --logo-rim1: #C3CCDC;
    --logo-rim2: #EEF1F7;
    --logo-rim3: #7C89A6;
    --logo-line: #0A1A5C;
    --logo-inner: #6A9BFF;
    --logo-mid: #2557EA;
    --logo-inner2: #0B248F;

    --il-ink: #0F1629;
    --il-ink-2: #5B6479;
    --il-surface: #FFFFFF;
    --il-surface-2: #EEF2F9;
    --il-line: rgba(15, 22, 41, .12);
    --il-soft: rgba(5, 0, 255, .07);
    --il-soft-2: rgba(16, 185, 129, .10);
    --il-primary: #1F3BFF;
    --il-primary-2: #0094FF;
    --il-accent: #10B981;
    --il-accent-2: #0F766E;
    --il-warm: #F2A23A;
    --il-warm-2: #D97706;
    --il-on: #FFFFFF;
    --il-shadow: rgba(31, 59, 255, .18);
    --il-gloss: .6;
}

/* line charts (build/tw-chart.js): the box, its loading shimmer and its empty message */
.tw-chart { position: relative; height: 260px; }
.tw-chart canvas { width: 100% !important; height: 100% !important; }
.tw-chart .tw-chart-msg { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: var(--text-muted); font-size: .86rem; text-align: center; padding: 1rem; }
.tw-chart.tw-chart-empty .tw-chart-msg { display: flex; }
.tw-chart.tw-chart-empty canvas { visibility: hidden; }
.tw-chart.tw-chart-loading::after { content: ''; position: absolute; inset: 10% 0 12%; border-radius: 14px; pointer-events: none;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text-muted) 10%, transparent), transparent);
    background-size: 200% 100%; animation: tw-shimmer 1.2s linear infinite; }
@keyframes tw-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .tw-chart.tw-chart-loading::after { animation: none; } }

/* the logo: an inline <svg>, sized by height like the <img> it replaced */
.tw-logo { display: block; width: auto; height: 34px; }
.tw-mark { display: block; }
.tw-logo path, .tw-mark path, .tw-logo stop, .tw-mark stop { transition: fill .3s, stop-color .3s; }

/* Illustration paint. SVG attributes cannot read CSS variables, so every shape takes its
   colour from one of these classes instead of a fill="#..." that would be right in only
   one theme. f- is a fill, s- a stroke, g- a gradient stop. */
.tw-il .f-surface { fill: var(--il-surface); } .tw-il .f-surface2 { fill: var(--il-surface-2); }
.tw-il .f-ink { fill: var(--il-ink); } .tw-il .f-ink2 { fill: var(--il-ink-2); }
.tw-il .f-primary { fill: var(--il-primary); } .tw-il .f-accent { fill: var(--il-accent); }
.tw-il .f-warm { fill: var(--il-warm); } .tw-il .f-warm2 { fill: var(--il-warm-2); }
.tw-il .f-on { fill: var(--il-on); } .tw-il .f-line { fill: var(--il-line); }
.tw-il .f-soft { fill: var(--il-soft); } .tw-il .f-soft2 { fill: var(--il-soft-2); }
.tw-il .s-line { stroke: var(--il-line); } .tw-il .s-ink { stroke: var(--il-ink); } .tw-il .s-ink2 { stroke: var(--il-ink-2); }
.tw-il .s-primary { stroke: var(--il-primary); } .tw-il .s-accent { stroke: var(--il-accent); }
.tw-il .s-warm { stroke: var(--il-warm); } .tw-il .s-on { stroke: var(--il-on); } .tw-il .s-surface { stroke: var(--il-surface); }
.tw-il [class*="s-"] { stroke-linecap: round; stroke-linejoin: round; }
.tw-il [class*="s-"]:not([class*="f-"]):not([fill]) { fill: none; }
.tw-il .g-p1 { stop-color: var(--il-primary); } .tw-il .g-p2 { stop-color: var(--il-primary-2); }
.tw-il .g-a1 { stop-color: var(--il-accent); } .tw-il .g-a2 { stop-color: var(--il-accent-2); }
.tw-il .g-w1 { stop-color: var(--il-warm); } .tw-il .g-w2 { stop-color: var(--il-warm-2); }
.tw-il .g-s1 { stop-color: var(--il-soft); } .tw-il .g-s0 { stop-color: var(--il-soft); stop-opacity: 0; }
.tw-il .g-t1 { stop-color: var(--il-soft-2); } .tw-il .g-t0 { stop-color: var(--il-soft-2); stop-opacity: 0; }
/* depth: the dark edge of a coin, the card body, the gloss and the drop shadow */
.tw-il .g-p3 { stop-color: color-mix(in srgb, var(--il-primary) 58%, #000); }
.tw-il .g-a3 { stop-color: color-mix(in srgb, var(--il-accent-2) 70%, #000); }
.tw-il .g-w3 { stop-color: color-mix(in srgb, var(--il-warm-2) 70%, #000); }
.tw-il .g-c1 { stop-color: var(--il-surface); } .tw-il .g-c2 { stop-color: var(--il-surface-2); }
.tw-il .g-h1 { stop-color: #FFFFFF; stop-opacity: var(--il-gloss); } .tw-il .g-h0 { stop-color: #FFFFFF; stop-opacity: 0; }
.tw-il .fl-sh { flood-color: var(--il-shadow); }
.tw-il .f-edge { fill: var(--il-line); }

/* the illustrations: scale to their box, keep their shape */
.tw-il { display: block; width: 100%; height: auto; max-width: 100%; overflow: visible; }
.tw-il * { transition: fill .3s, stroke .3s, stop-color .3s, opacity .3s; }
.tw-il .float { animation: tw-il-float 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.tw-il .float.d2 { animation-delay: -2s; } .tw-il .float.d3 { animation-delay: -4s; }
.tw-il .spin { animation: tw-il-spin 14s linear infinite; transform-box: fill-box; transform-origin: center; }
.tw-il .pulse { animation: tw-il-pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes tw-il-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes tw-il-spin { to { transform: rotate(360deg); } }
@keyframes tw-il-pulse { 0%, 100% { opacity: .35; transform: scale(.94); } 50% { opacity: .9; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .tw-il .float, .tw-il .spin, .tw-il .pulse { animation: none; } }