/* ========================================
   BIDBAAS - APP-SPECIFIC STYLES
   Built on TGN Design System

   Using TGN Brand Colors:
   - Primary: #2980b9 (TGN Blue)
   - Font: Comfortaa (from TGN Design System)
======================================== */

:root {
    /* BidBaas Brand Colors (aligned with TGN) */
    --primary: #2980b9;
    --primary-light: #3498db;
    --primary-dark: #1a5276;

    /* Use TGN Design System tokens */
    --bidbaas-primary: var(--tgn-primary);
    --bidbaas-primary-light: var(--tgn-primary-light);
    --bidbaas-primary-dark: var(--tgn-primary-dark);

    /* Typography */
    font-family: var(--tgn-font-primary);
}

/* Override body to ensure Comfortaa is used */
body {
    font-family: var(--tgn-font-primary);
}

/* BidBaas-specific component styles can be added below */
/* These should build on top of TGN Design System classes */

/* Example: Auction-specific cards */
.auction-card {
    /* Inherit from TGN glass card */
    background: var(--tgn-glass-bg);
    backdrop-filter: blur(var(--tgn-blur-lg)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--tgn-blur-lg)) saturate(180%);
    border: 1px solid var(--tgn-glass-border);
    border-radius: var(--tgn-radius-2xl);
    box-shadow: var(--tgn-shadow-md);
    transition: transform var(--tgn-transition-normal),
                box-shadow var(--tgn-transition-normal),
                border-color var(--tgn-transition-fast);
}

.auction-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--tgn-shadow-xl);
    border-color: rgba(var(--tgn-primary-rgb), 0.2);
}

/* Bid button styling */
.bid-button {
    background: linear-gradient(135deg, var(--tgn-primary) 0%, var(--tgn-primary-dark) 100%);
    color: var(--tgn-text-inverse);
    padding: var(--tgn-space-3) var(--tgn-space-6);
    border-radius: var(--tgn-radius-full);
    font-family: var(--tgn-font-primary);
    font-weight: var(--tgn-font-semibold);
    border: none;
    cursor: pointer;
    transition: all var(--tgn-transition-fast);
}

.bid-button:hover {
    background: linear-gradient(135deg, var(--tgn-primary-light) 0%, var(--tgn-primary) 100%);
    transform: translateY(-2px);
    box-shadow: var(--tgn-shadow-md), var(--tgn-glow-primary);
}

.bid-button:active {
    transform: translateY(0);
    box-shadow: var(--tgn-shadow-xs);
}

/* Auction status badges */
.auction-status-active {
    background: rgba(var(--tgn-accent-green-rgb), 0.15);
    color: var(--tgn-accent-green);
    padding: var(--tgn-space-1) var(--tgn-space-3);
    border-radius: var(--tgn-radius-full);
    font-size: var(--tgn-text-xs);
    font-weight: var(--tgn-font-semibold);
}

.auction-status-ended {
    background: rgba(var(--tgn-text-tertiary), 0.15);
    color: var(--tgn-text-secondary);
    padding: var(--tgn-space-1) var(--tgn-space-3);
    border-radius: var(--tgn-radius-full);
    font-size: var(--tgn-text-xs);
    font-weight: var(--tgn-font-semibold);
}

.auction-status-pending {
    background: rgba(var(--tgn-accent-orange-rgb), 0.15);
    color: var(--tgn-accent-orange);
    padding: var(--tgn-space-1) var(--tgn-space-3);
    border-radius: var(--tgn-radius-full);
    font-size: var(--tgn-text-xs);
    font-weight: var(--tgn-font-semibold);
}

/* Price display */
.price-display {
    font-family: var(--tgn-font-primary);
    font-size: var(--tgn-text-2xl);
    font-weight: var(--tgn-font-bold);
    color: var(--tgn-primary);
}

/* Countdown timer */
.countdown-timer {
    font-family: var(--tgn-font-mono);
    font-size: var(--tgn-text-lg);
    font-weight: var(--tgn-font-semibold);
    color: var(--tgn-accent-orange);
}

/* Dark theme adjustments for BidBaas */
[data-theme="dark"] .auction-card,
.tgn-dark .auction-card {
    background: var(--tgn-glass-bg);
    border-color: var(--tgn-glass-border);
}

[data-theme="dark"] .price-display,
.tgn-dark .price-display {
    color: var(--tgn-primary-light);
}