/* ============================================================================
   RECIPE BUILDER CSS VARIABLES
   Centralized CSS custom properties and shared keyframe animations.
   
   Load order: 
   1. base-layout.css (core variables)
   2. variables.css (recipe-builder specific variables)
   3. base.css, modals.css, conversation.css, focus.css, fullscreen.css, split.css
   4. responsive.css (must be last - contains media query overrides)
   
   This file MUST be loaded AFTER base-layout.css and BEFORE other recipe-builder CSS files.
   ============================================================================ */

:root {
    /* ============================================
       TRANSITIONS
       ============================================ */
    --rb-transition-fast: 0.15s;
    --rb-transition-normal: 0.2s;
    
    /* ============================================
       COLORS - PRIMARY
       Used for buttons, links, focus states
       ============================================ */
    --rb-primary: #8b5cf6;
    --rb-primary-hover: #7c3aed;
    --rb-accent: #8b5cf6;
    
    /* ============================================
       BACKGROUNDS
       Extends base-layout.css variables
       Note: --rb-bg-input is already in base-layout.css
       ============================================ */
    --rb-bg-hover: #1e1b4b;
    
    /* ============================================
       BORDERS
       Fills gaps in base-layout.css
       ============================================ */
    --rb-border-light: rgba(255, 255, 255, 0.1);
    --rb-border-medium: #4b5563;
    
    /* ============================================
       DIFF COLORS
       For highlighting additions, deletions, and changes
       ============================================ */
    --rb-diff-removed-bg: rgba(127, 29, 29, 0.4);
    --rb-diff-removed-text: #fca5a5;
    --rb-diff-removed-border: #ef4444;
    --rb-diff-added-bg: rgba(6, 78, 59, 0.4);
    --rb-diff-added-text: #86efac;
    --rb-diff-added-border: #10b981;
    --rb-diff-unchanged-text: #94a3b8;
    
    /* Warning/stale state colors */
    --rb-color-warning: #f59e0b;
    --rb-color-warning-bg: rgba(245, 158, 11, 0.1);
    
    /* Monospace font stack */
    --rb-font-mono: 'SF Mono', 'Monaco', 'Cascadia Code', 'Consolas', 'DejaVu Sans Mono', monospace;
    
    /* ============================================
       VIEWER CONTENT SPACING
       Shared by code editors, param sections, and diff chunks
       ============================================ */
    --rb-viewer-content-padding: 0.75rem;
    --rb-viewer-status-border-width: 3px;
    
    /* ============================================
       NOTE: These are inherited from base-layout.css
       DO NOT redefine here:
       - --rb-bg-base, --rb-bg-surface, --rb-bg-elevated
       - --rb-text-primary, --rb-text-secondary, --rb-text-muted, --rb-text-dimmed
       - --rb-color-error, --rb-color-success, --rb-color-info, --rb-color-purple
       - --rb-border-default, --rb-border-dark, --rb-border-purple
       ============================================ */
}

/* ============================================
   SHARED KEYFRAME ANIMATIONS
   Centralized here, referenced by any CSS file
   ============================================ */

@keyframes rb-typing-bounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

@keyframes rb-message-appear {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rb-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}