/* ============================================================================
   CoinLobster brand system — "character-forward" (2026-07-14)
   The lobster mascot (top hat + BTC + monocle) is the character. Warm, witty,
   confident, anti-terminal. Palette sampled from the ORIGINAL logo:
   deep brand blue surface + orange-red (the lobster) + gold (BTC) + cream ink.
   Mint = up-move, red = down. Load AFTER terminal-tokens.css.
   Voice note: never say "receipts" as a product noun; use radar/detection copy.
   ========================================================================== */
:root {
    /* ── surface: deep brand blue (from the logo's blue splash, darkened) ── */
    --cl-blue-950: #071E33;
    --cl-blue-900: #0A2A44;   /* page bg */
    --cl-blue-850: #0D3152;
    --cl-blue-800: #103756;   /* panel */
    --cl-blue-700: #17466B;   /* raised / hover */
    --cl-hair:      rgba(255,246,234,0.12);
    --cl-hair-soft: rgba(255,246,234,0.07);

    /* ── the lobster: orange-red is the brand accent ── */
    --cl-orange:      #EE5A2C;
    --cl-orange-deep: #C8431E;
    --cl-orange-light:#F58150;

    /* ── secondary lights ── */
    --cl-sky:    #2FB1E6;   /* bright brand blue (links / focus / info) */
    --cl-gold:   #F7C11E;   /* BTC gold — highlight / notable */

    /* ── signals ── */
    --cl-mint:   #37D98A;   /* up / go / live */
    --cl-red:    #FA5772;   /* down (kept clear of the orange) */

    /* ── ink ── */
    --cl-cream:     #FFF6EA;   /* headline ink on blue */
    --cl-cream-mut: #A9C2D6;   /* body on blue */
    --cl-cream-dim: #6E8CA3;   /* meta */
    --cl-deep-ink:  #0A1E30;   /* text on orange/cream/gold */

    /* ── type ── */
    --cl-disp: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
    --cl-sans: 'Hanken Grotesk', system-ui, sans-serif;
    --cl-mono: 'JetBrains Mono', ui-monospace, monospace;

    --cl-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --cl-r-lg: 20px;
    --cl-r-pill: 100px;
}

/* ── reusable: the lobster mark + wordmark ── */
.cl-mark { display: inline-block; flex: none; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.3)); }
.cl-wordmark { font-family: var(--cl-disp); font-weight: 800; letter-spacing: -0.02em; color: var(--cl-cream); }
.cl-wordmark b { color: var(--cl-orange); font-weight: 800; }

/* ── reusable: buttons (chunky, playful, tactile) ── */
.cl-btn {
    font-family: var(--cl-disp); font-weight: 700; font-size: 1rem; line-height: 1;
    border: none; border-radius: var(--cl-r-pill); padding: 15px 28px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 9px; text-decoration: none; white-space: nowrap;
}
.cl-btn--primary {
    background: var(--cl-orange); color: #2a0b04;
    box-shadow: 0 7px 0 var(--cl-orange-deep), 0 14px 24px rgba(238,90,44,0.26);
    transition: transform 0.12s var(--cl-ease), box-shadow 0.12s var(--cl-ease);
}
.cl-btn--primary:hover { transform: translateY(2px); box-shadow: 0 5px 0 var(--cl-orange-deep), 0 9px 16px rgba(238,90,44,0.26); color: #2a0b04; }
.cl-btn--ghost { background: transparent; color: var(--cl-cream); box-shadow: inset 0 0 0 2px rgba(255,246,234,0.28); }
.cl-btn--ghost:hover { box-shadow: inset 0 0 0 2px rgba(255,246,234,0.55); color: var(--cl-cream); }
.cl-btn--cream { background: var(--cl-cream); color: var(--cl-deep-ink); }
.cl-btn--cream:hover { filter: brightness(0.96); color: var(--cl-deep-ink); }

/* ── reusable: chips / pills ── */
.cl-chip {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--cl-disp); font-weight: 600; font-size: 0.82rem;
    border-radius: var(--cl-r-pill); padding: 7px 15px;
}
.cl-chip--live { background: rgba(247,193,30,0.14); color: var(--cl-gold); border: 1.5px solid rgba(247,193,30,0.32); }
.cl-chip--live .cl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cl-mint); box-shadow: 0 0 8px var(--cl-mint); animation: clPulse 2s ease-in-out infinite; }
@keyframes clPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ── directional color ── */
.cl-up { color: var(--cl-mint); }
.cl-down { color: var(--cl-red); }

@media (prefers-reduced-motion: reduce) {
    .cl-chip--live .cl-dot { animation: none; }
    .cl-btn--primary { transition: none; }
}