/* ========================================
   TAGME - App-Specific Styles
   Using TGN Design System Tokens
======================================== */

:root {
    /* TagMe Brand Colors - Using TGN Primary */
    --primary: #2980b9;
    --primary-light: #3498db;
    --primary-dark: #1a5276;

    /* Typography */
    font-family: 'Comfortaa', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
}

/* ========================================
   TAGME-SPECIFIC COMPONENTS
======================================== */

/* Add any TagMe-specific styles here that extend the TGN Design System */

/* Example: TagMe Post Card */
.tagme-post-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);
    padding: var(--tgn-space-5);
    margin-bottom: var(--tgn-space-4);
    transition: transform var(--tgn-transition-normal),
                box-shadow var(--tgn-transition-normal);
}

.tagme-post-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--tgn-shadow-lg);
}

/* Example: TagMe User Profile Header */
.tagme-profile-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--tgn-text-inverse);
    padding: var(--tgn-space-8);
    border-radius: var(--tgn-radius-2xl);
    margin-bottom: var(--tgn-space-6);
}

/* Example: TagMe Action Button */
.tagme-action-btn {
    background: var(--primary);
    color: var(--tgn-text-inverse);
    border: none;
    padding: var(--tgn-space-3) var(--tgn-space-6);
    border-radius: var(--tgn-radius-full);
    font-family: 'Comfortaa', sans-serif;
    font-weight: var(--tgn-font-semibold);
    cursor: pointer;
    transition: all var(--tgn-transition-fast);
}

.tagme-action-btn:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--tgn-shadow-md);
}

.tagme-action-btn:active {
    transform: translateY(0);
}

/* Example: TagMe Feed Container */
.tagme-feed {
    max-width: var(--tgn-container-md);
    margin: 0 auto;
    padding: var(--tgn-space-4);
}

/* Example: TagMe Tag (Hashtag/Location) */
.tagme-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--tgn-space-2);
    padding: var(--tgn-space-2) var(--tgn-space-4);
    background: rgba(var(--tgn-primary-rgb), 0.15);
    color: var(--primary);
    border-radius: var(--tgn-radius-full);
    font-size: var(--tgn-text-sm);
    font-weight: var(--tgn-font-medium);
    text-decoration: none;
    transition: all var(--tgn-transition-fast);
}

.tagme-tag:hover {
    background: rgba(var(--tgn-primary-rgb), 0.25);
    transform: translateY(-1px);
}

/* Example: TagMe Story Circle */
.tagme-story {
    width: 80px;
    height: 80px;
    border-radius: var(--tgn-radius-full);
    border: 3px solid var(--primary);
    padding: 3px;
    cursor: pointer;
    transition: transform var(--tgn-transition-fast);
}

.tagme-story:hover {
    transform: scale(1.05);
}

.tagme-story img {
    width: 100%;
    height: 100%;
    border-radius: var(--tgn-radius-full);
    object-fit: cover;
}

/* Example: TagMe Search Bar */
.tagme-search {
    width: 100%;
    max-width: 600px;
    margin: 0 auto var(--tgn-space-6);
}

.tagme-search input {
    width: 100%;
    padding: var(--tgn-space-3) var(--tgn-space-5);
    background: var(--tgn-glass-bg);
    backdrop-filter: blur(var(--tgn-blur-md));
    -webkit-backdrop-filter: blur(var(--tgn-blur-md));
    border: 1px solid var(--tgn-glass-border);
    border-radius: var(--tgn-radius-full);
    font-family: 'Comfortaa', sans-serif;
    font-size: var(--tgn-text-base);
    color: var(--tgn-text-primary);
    transition: all var(--tgn-transition-fast);
}

.tagme-search input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--tgn-primary-rgb), 0.15);
}

.tagme-search input::placeholder {
    color: var(--tgn-text-tertiary);
}