/* ===========================================
   DESIGN TOKENS - DegenAI Terminal
   ===========================================

   Semantic design tokens for consistent theming.
   These tokens extend MudBlazor's --mud-palette-* system.

   Usage: var(--degen-color-primary)
   =========================================== */

:root {
    /* ===========================================
       BRAND COLORS
       =========================================== */
    --degen-color-primary: #B8F84E;
    --degen-color-primary-hover: #d4ff7e;
    --degen-color-primary-muted: rgba(184, 248, 78, 0.15);
    --degen-color-primary-subtle: rgba(184, 248, 78, 0.1);
    --degen-color-primary-faint: rgba(184, 248, 78, 0.05);

    /* ===========================================
       SEMANTIC COLORS - Trading
       =========================================== */
    --degen-color-buy: #B8F84E;
    --degen-color-buy-bg: rgba(159, 212, 68, 0.49);
    --degen-color-buy-bg-hover: rgba(159, 212, 68, 0.65);
    --degen-color-buy-muted: rgba(184, 248, 78, 0.15);

    --degen-color-sell: #FF6B6B;
    --degen-color-sell-bg: rgba(255, 107, 107, 0.49);
    --degen-color-sell-bg-hover: rgba(255, 107, 107, 0.65);
    --degen-color-sell-muted: rgba(255, 107, 107, 0.15);

    --degen-color-long: #4CAF50;
    --degen-color-short: #f44336;

    /* Outcome palette — slot colors for prediction-market multi-outcome buckets.
       Shared by ProbabilityBar segments and the outcome buttons in the trading
       tab so a selected slot in the order form matches the bar slice. Slot 0
       aliases buy (lime) so binary YES keeps its identity. Bucket markets with
       more than six outcomes wrap via idx % 6 in OutcomeColorClass. */
    --degen-outcome-0: #B8F84E;
    --degen-outcome-1: #FFC107;
    --degen-outcome-2: #4ADBC7;
    --degen-outcome-3: #9D7AC9;
    --degen-outcome-4: #E0935E;
    --degen-outcome-5: #6BB6A8;

    /* ===========================================
       ASSET-SEARCH BADGES (chart asset dropdown)
       Consolidated from app.css + mudblazor-overrides.css (they had drifted).
       Leverage and HIP-3 sub-market badges are grey; the venue badge is a
       color-coded pill, one hue per venue (only shown when the user has >1
       venue enabled). Add a --degen-venue-* pair per new venue — mirrors the
       outcome-slot pattern above. See MultiVenueUxBuildSheet Phase C.

       The --degen-venue-* pairs outgrew this heading: the badge family reads
       them (.asset-venue-badge--{slug}, in mudblazor-overrides.css and
       app.css), and so do the Predict venue filter chips
       (.predict-filter-chip--venue-{slug}, in prediction-markets.css). Adding
       a venue therefore means the pair here PLUS one rule in each family that
       should carry the hue. Neither family breaks if you forget: both fall
       back to --degen-venue-default, so a missed rule shows up as a grey
       venue rather than as a wrong colour.
       =========================================== */
    --degen-badge-symbol-fg: var(--degen-text-secondary);
    --degen-badge-leverage-fg: var(--degen-text-tertiary);
    --degen-badge-leverage-bg: rgba(162, 162, 162, 0.15);
    --degen-badge-submarket-fg: var(--degen-text-tertiary);
    --degen-badge-submarket-bg: rgba(255, 255, 255, 0.06);

    --degen-venue-hyperliquid: var(--degen-color-primary);
    --degen-venue-hyperliquid-bg: var(--degen-color-primary-muted);
    --degen-venue-lighter: var(--degen-color-info);
    --degen-venue-lighter-bg: rgba(74, 158, 255, 0.15);
    /* Violet, not another blue: Lighter already owns the info blue, and the prediction browser is the
       one surface that shows both venues in the same list, so they have to separate at a glance. */
    --degen-venue-polymarket: #9D7AC9;
    --degen-venue-polymarket-bg: rgba(157, 122, 201, 0.15);
    /* Neutral fallback for a venue that has no dedicated color yet (see VenueAssetSearch.Badge default). */
    --degen-venue-default: var(--degen-text-secondary);
    --degen-venue-default-bg: var(--degen-hover-overlay);

    /* ===========================================
       BACKGROUND COLORS
       =========================================== */
    --degen-bg-primary: #080809;
    --degen-bg-secondary: #0D1215;
    --degen-bg-surface: #131B1F;
    --degen-bg-elevated: #141C21;
    --degen-bg-input: #0b0d0f;
    --degen-bg-input-hover: #131619;

    /* ===========================================
       TEXT COLORS
       =========================================== */
    --degen-text-primary: #E9E9E9;
    --degen-text-secondary: #A2A2A2;
    --degen-text-tertiary: #888;
    --degen-text-muted: #666;
    --degen-text-hint: #565E63;
    --degen-text-disabled: rgba(255, 255, 255, 0.3);

    /* ===========================================
       BORDER COLORS
       =========================================== */
    --degen-border-default: rgba(102, 102, 102, 0.2);
    --degen-border-subtle: rgba(102, 102, 102, 0.1);
    --degen-border-muted: #2C373D;
    --degen-border-accent: rgba(184, 248, 78, 0.1);
    --degen-border-accent-strong: rgba(184, 248, 78, 0.2);

    /* ===========================================
       STATUS COLORS
       =========================================== */
    --degen-color-success: #B8F84E;
    --degen-color-warning: #FFC107;
    --degen-color-error: #FF6B6B;
    --degen-color-info: #4A9EFF;

    /* Tinted fill for a warning-toned surface (selected "expiring soon" filter, and anything
       else that needs an amber background rather than amber text). Same 0.15 alpha the venue
       and deposit muted fills use, so tinted chips read at one weight across the app. */
    --degen-color-warning-muted: rgba(255, 193, 7, 0.15);

    /* Deposit accent — funding a venue is neither a trade action (lime) nor a warning (red/amber),
       and info-blue is already spoken for by open orders and the Lighter venue badge. This teal is
       the existing --degen-outcome-2 hue promoted to a semantic name so deposit affordances read as
       their own class of action. */
    --degen-color-deposit: #4ADBC7;
    --degen-color-deposit-hover: #6FE8D7;
    --degen-color-deposit-muted: rgba(74, 219, 199, 0.15);
    --degen-color-deposit-border: rgba(74, 219, 199, 0.35);

    /* PnL specific */
    --degen-pnl-positive: #B8F84E;
    --degen-pnl-negative: #FF6B6B;

    /* Order status */
    --degen-status-filled: #B8F84E;
    --degen-status-open: #4A9EFF;
    --degen-status-canceled: #666;
    --degen-status-rejected: #FF6B6B;
    --degen-status-triggered: #FFC107;

    /* ===========================================
       LAYOUT METRICS
       =========================================== */
    --header-height: 78px;

    /* ===========================================
       SPACING
       =========================================== */
    --degen-space-xs: 4px;
    --degen-space-sm: 8px;
    --degen-space-md: 12px;
    --degen-space-lg: 16px;
    --degen-space-xl: 24px;
    --degen-space-xxl: 32px;

    /* ===========================================
       TYPOGRAPHY
       =========================================== */
    --degen-font-mono: 'Source Code Pro', monospace;
    --degen-font-sans: 'Space Grotesk', sans-serif;

    --degen-font-size-xs: 9px;
    --degen-font-size-sm: 10px;
    --degen-font-size-md: 11px;
    --degen-font-size-base: 12px;
    --degen-font-size-lg: 14px;
    --degen-font-size-xl: 16px;

    /* ===========================================
       TRANSITIONS
       =========================================== */
    --degen-transition-fast: 0.1s ease;
    --degen-transition-normal: 0.2s ease;
    --degen-transition-slow: 0.3s ease;

    /* ===========================================
       SHADOWS
       =========================================== */
    --degen-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --degen-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
    --degen-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);
    --degen-shadow-glow-green: 0 0 8px rgba(184, 248, 78, 0.3);
    --degen-shadow-glow-red: 0 0 8px rgba(255, 107, 107, 0.3);

    /* ===========================================
       RADII
       =========================================== */
    --degen-radius-sm: 2px;
    --degen-radius-md: 4px;
    --degen-radius-lg: 6px;
    --degen-radius-xl: 8px;
    --degen-radius-full: 50%;

    /* ===========================================
       INTERACTIVE STATES
       =========================================== */
    --degen-touch-target-mobile: 48px;
    --degen-touch-target-tablet: 44px;
    --degen-input-height: 28px;
    --degen-input-height-mobile: 48px;

    /* ===========================================
       FOCUS & ACCESSIBILITY
       =========================================== */
    --degen-focus-ring: 0 0 0 2px rgba(184, 248, 78, 0.4);
    --degen-focus-ring-error: 0 0 0 2px rgba(255, 107, 107, 0.4);
    --degen-focus-ring-offset: 2px;

    /* ===========================================
       HOVER & ACTIVE STATES
       =========================================== */
    --degen-hover-overlay: rgba(255, 255, 255, 0.06);
    --degen-hover-overlay-light: rgba(255, 255, 255, 0.04);
    --degen-active-overlay: rgba(255, 255, 255, 0.1);
    --degen-hover-lift: translateY(-1px);
    --degen-active-press: translateY(0);

    /* ===========================================
       BUTTON SHADOWS
       =========================================== */
    --degen-btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    --degen-btn-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.25);
    --degen-btn-shadow-primary: 0 2px 8px rgba(184, 248, 78, 0.25);
    --degen-btn-shadow-primary-hover: 0 4px 16px rgba(184, 248, 78, 0.35);

    /* ===========================================
       CHAT INPUT CONTROLS - Responsive Sizing
       Desktop → Tablet → Mobile progression
       =========================================== */

    /* Action button (send/stop) sizes */
    --degen-chat-btn-size: 24px;
    --degen-chat-btn-icon: 14px;
    --degen-chat-btn-radius: 3px;

    /* Mode selector / control sizes */
    --degen-chat-control-height: 24px;
    --degen-chat-control-font: 14px;
    --degen-chat-control-icon: 14px;
    --degen-chat-control-padding: 2px 6px;
}

/* Tablet overrides (600-899px) */
@media (min-width: 600px) and (max-width: 899px) {
    :root {
        --degen-chat-btn-size: 28px;
        --degen-chat-btn-icon: 16px;
        --degen-chat-btn-radius: 4px;

        --degen-chat-control-height: 28px;
        --degen-chat-control-font: 14px;
        --degen-chat-control-icon: 15px;
        --degen-chat-control-padding: 3px 6px;
    }
}

/* Mobile overrides (<600px) */
@media (max-width: 599px) {
    :root {
        --degen-chat-btn-size: 32px;
        --degen-chat-btn-icon: 18px;
        --degen-chat-btn-radius: 4px;

        --degen-chat-control-height: 32px;
        --degen-chat-control-font: 15px;
        --degen-chat-control-icon: 16px;
        --degen-chat-control-padding: 4px 8px;
    }
}