/*
 * Cryptobi brand theme.
 *
 * The name is a wordplay: "crypto" (blue, the ledger) + "bi" - business
 * intelligence, and Swedish for bee (black + yellow). The site's own
 * favicon already draws a bee; this file is what turns that into an
 * actual, reusable system instead of colors hardcoded per-template.
 *
 * Hard rule: yellow only ever sits on ink (near-black). Never as text or a
 * large fill directly on a light/paper background - that combination is
 * ~1.4:1 contrast and fails WCAG outright. On ink it's ~11:1 (AAA).
 */

:root {
    --brand-ink: #0a0e14;
    --brand-ink-soft: #141a24;
    --brand-line-on-ink: #262d3a;
    --brand-text-muted-on-ink: #9aa3b5;

    --brand-paper: #f6f7fa;
    --brand-paper-soft: #ececf1;
    --brand-line-on-paper: #dcdfe6;
    --brand-text-muted-on-paper: #565d6b;

    --brand-blue: #2563eb;
    --brand-blue-hover: #1d4ed8;
    --brand-blue-soft: #60a5fa;
    --brand-blue-wash: rgba(37, 99, 235, 0.08);

    --brand-yellow: #f4c430;
    --brand-yellow-deep: #b8860b;
    --brand-yellow-ink: #171204;

    /* Pico consumes these directly - keeps every default-styled button,
       link, and focus ring on-brand across every page with zero
       per-template changes. Values match --brand-blue* above.
       !important is required here: Pico's own light/dark palette rules
       are written as e.g. ":root:not([data-theme=dark])", which is MORE
       specific than a plain ":root" block (the :not() argument's
       specificity counts), so a plain override silently loses no matter
       what order the stylesheets load in. */
    --pico-primary: var(--brand-blue) !important;
    --pico-primary-background: var(--brand-blue) !important;
    --pico-primary-border: var(--brand-blue) !important;
    --pico-primary-hover: var(--brand-blue-hover) !important;
    --pico-primary-hover-background: var(--brand-blue-hover) !important;
    --pico-primary-hover-border: var(--brand-blue-hover) !important;
    --pico-primary-focus: rgba(37, 99, 235, 0.5) !important;
    --pico-primary-inverse: #fff !important;

    --pico-max-width: 1450px;
    --pico-font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html[data-theme="dark"],
body[data-theme="dark"] {
    --pico-primary: var(--brand-blue-soft) !important;
    --pico-primary-background: var(--brand-blue) !important;
    --pico-primary-hover: #7db4fb !important;
    --pico-primary-hover-background: var(--brand-blue-hover) !important;
    --pico-primary-inverse: #0a0e14 !important;
    --pico-primary-focus: rgba(96, 165, 250, 0.45) !important;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --pico-primary: var(--brand-blue-soft) !important;
        --pico-primary-background: var(--brand-blue) !important;
        --pico-primary-hover: #7db4fb !important;
        --pico-primary-hover-background: var(--brand-blue-hover) !important;
        --pico-primary-inverse: #0a0e14 !important;
        --pico-primary-focus: rgba(96, 165, 250, 0.45) !important;
    }
}

body, table, input, select, textarea, button {
    font-variant-numeric: tabular-nums;
}

/* ---------- Wordmark ---------- */
.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    flex-shrink: 0;
}
.brand-mark svg {
    width: 24px;
    height: 24px;
    flex: none;
}
.brand-mark .brand-wordmark {
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    line-height: 1;
}
.brand-mark .brand-crypto {
    color: var(--brand-blue-soft);
}
.brand-mark .brand-bi {
    background: var(--brand-yellow);
    color: var(--brand-yellow-ink);
    font-size: 0.85rem;
    font-weight: 800;
    padding: 0.1em 0.4em 0.15em;
    border-radius: 5px;
    line-height: 1;
}

/* ---------- Brand chip / accent utilities ---------- */
.brand-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    background: var(--brand-ink);
    color: var(--brand-yellow);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    padding: 0.2em 0.55em;
    border-radius: 5px;
}
html[data-theme="dark"] .brand-chip {
    background: var(--brand-yellow);
    color: var(--brand-yellow-ink);
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .brand-chip {
        background: var(--brand-yellow);
        color: var(--brand-yellow-ink);
    }
}

.btn-accent {
    background: var(--brand-yellow) !important;
    color: var(--brand-yellow-ink) !important;
    border-color: var(--brand-yellow) !important;
}
.btn-accent:hover, .btn-accent:focus {
    background: var(--brand-yellow-deep) !important;
    border-color: var(--brand-yellow-deep) !important;
    color: #fff !important;
}

/* ---------- Flash messages: category-differentiated ----------
   Previously every flash message (success/danger/info/warning) rendered
   identically via a plain Pico <mark>. Category-specific styling both
   looks more finished and, deliberately, keeps "warning" visually distinct
   from brand yellow (pale amber pill vs. the solid ink/yellow brand chip). */
.flash {
    display: block;
    border-radius: 8px;
    padding: 0.7rem 1rem;
    margin-bottom: 0.75rem;
    border: 1px solid transparent;
    font-size: 0.92rem;
    transition: opacity 0.4s ease, max-height 0.4s ease, margin 0.3s ease, padding 0.3s ease;
    max-height: 200px;
}
.flash.fade {
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-width: 0;
}
.flash-success { background: #e7f6ec; color: #14532d; border-color: #bbe6c8; }
.flash-danger, .flash-error { background: #fdecec; color: #7a1212; border-color: #f6c6c6; }
.flash-info { background: var(--brand-blue-wash); color: var(--brand-blue-hover); border-color: rgba(37, 99, 235, 0.25); }
.flash-warning { background: #fff7e0; color: #7a5b00; border-color: #f0d98c; }
html[data-theme="dark"] .flash-success { background: #123420; color: #86e0a6; border-color: #1e5c37; }
html[data-theme="dark"] .flash-danger, html[data-theme="dark"] .flash-error { background: #3a1414; color: #f5a3a3; border-color: #5c2020; }
html[data-theme="dark"] .flash-info { background: rgba(37, 99, 235, 0.14); color: var(--brand-blue-soft); border-color: rgba(96, 165, 250, 0.3); }
html[data-theme="dark"] .flash-warning { background: #2a2308; color: #f0d98c; border-color: #4a3e12; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .flash-success { background: #123420; color: #86e0a6; border-color: #1e5c37; }
    html:not([data-theme="light"]) .flash-danger, html:not([data-theme="light"]) .flash-error { background: #3a1414; color: #f5a3a3; border-color: #5c2020; }
    html:not([data-theme="light"]) .flash-info { background: rgba(37, 99, 235, 0.14); color: var(--brand-blue-soft); border-color: rgba(96, 165, 250, 0.3); }
    html:not([data-theme="light"]) .flash-warning { background: #2a2308; color: #f0d98c; border-color: #4a3e12; }
}

/* Persistent notice banner — same visual language and color tokens as
   .flash-warning/.flash-info, but deliberately NOT matched by the
   `.flash` auto-dismiss JS in layout.html (querySelectorAll('.flash')),
   since these are standing configuration reminders that should stay
   visible on every page load, not fade out after 3s. */
.notice {
    display: block;
    border-radius: 8px;
    padding: 0.7rem 1rem;
    margin-bottom: 0.75rem;
    border: 1px solid transparent;
    font-size: 0.92rem;
}
.notice-warning { background: #fff7e0; color: #7a5b00; border-color: #f0d98c; }
html[data-theme="dark"] .notice-warning { background: #2a2308; color: #f0d98c; border-color: #4a3e12; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .notice-warning { background: #2a2308; color: #f0d98c; border-color: #4a3e12; }
}

/* Gain/loss text — same semantic colors as the flash-success/danger text,
   reused here for %-change figures (price tickers, wizard browse list). */
.pct-up { color: #14532d; }
.pct-down { color: #7a1212; }
html[data-theme="dark"] .pct-up { color: #86e0a6; }
html[data-theme="dark"] .pct-down { color: #f5a3a3; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .pct-up { color: #86e0a6; }
    html:not([data-theme="light"]) .pct-down { color: #f5a3a3; }
}