/* ===========================================
   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;

    /* ===========================================
       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;

    /* 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;

    /* ===========================================
       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;
    }
}