/* Surgente Core - Shared Assets & Design System v2.0 */

:root {
    /* Palette - Base Colors (RGB for transparency) */
    --sc-rgb-activity: 120, 230, 255;
    /* Cyan */
    --sc-rgb-identity: 255, 120, 200;
    /* Pink */
    --sc-rgb-community: 170, 140, 255;
    /* Purple */
    --sc-rgb-mejora: 140, 255, 200;
    /* Mint/Teal */
    --sc-rgb-circuito: 255, 190, 120;
    /* Orange */
    --sc-rgb-inbox: 120, 255, 160;
    /* Green-ish */

    /* Palette - Solid Colors */
    --sc-color-activity: rgb(var(--sc-rgb-activity));
    --sc-color-identity: rgb(var(--sc-rgb-identity));
    --sc-color-community: rgb(var(--sc-rgb-community));
    --sc-color-mejora: rgb(var(--sc-rgb-mejora));
    --sc-color-circuito: rgb(var(--sc-rgb-circuito));
    --sc-color-inbox: rgb(var(--sc-rgb-inbox));

    /* Default Primary (Green/Community as fallback) */
    --sc-primary-color: #4CAF50;
    --sc-primary-rgb: 76, 175, 80;

    /* Derived Primary */
    --sc-primary-light: rgba(var(--sc-primary-rgb), 0.1);
    --sc-primary-border: rgba(var(--sc-primary-rgb), 0.3);

    /* UI Colors */
    --sc-bg-color: #0a0a0a;
    --sc-surface-color: rgba(255, 255, 255, 0.06);
    --sc-bg-hover: rgba(255, 255, 255, 0.08);
    --sc-text-color: #f2f2f2;
    --sc-text-muted: rgba(255, 255, 255, 0.7);
    --sc-glass-border: rgba(255, 255, 255, 0.14);

    /* Typography */
    --sc-font-family: 'Montserrat', sans-serif;

    /* Spacing & Radius */
    --sc-radius: 12px;
    --sc-radius-sm: 8px;
    --sc-btn-padding: 10px 14px;
}

/* Base Styles */
body {
    background-color: var(--sc-bg-color);
    color: var(--sc-text-color);
    font-family: var(--sc-font-family);
}

/* Unified Glass Button (Matches Hub.css) */
.sc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: var(--sc-text-color);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    line-height: 1.2;
}

.sc-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
    color: white;
}

/* Primary Action Button (Themed) */
.sc-btn-primary {
    background: rgba(var(--sc-primary-rgb), 0.15);
    border-color: rgba(var(--sc-primary-rgb), 0.4);
    color: rgb(var(--sc-primary-rgb));
    box-shadow: 0 0 0 1px rgba(var(--sc-primary-rgb), 0.1), 0 0 18px rgba(var(--sc-primary-rgb), 0.05);
}

.sc-btn-primary:hover {
    background: rgba(var(--sc-primary-rgb), 0.25);
    color: white;
    filter: brightness(1.2);
}

/* Glass Card */
.sc-card {
    background: var(--sc-surface-color);
    border: 1px solid var(--sc-glass-border);
    border-radius: var(--sc-radius);
    padding: 1.2rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Themed Section (Matches Hub Sections) */
.sc-theme-section {
    border: 1px solid rgba(var(--sc-primary-rgb), 0.22);
    background: linear-gradient(135deg, rgba(var(--sc-primary-rgb), 0.07), rgba(255, 255, 255, 0.02));
    box-shadow: inset 3px 0 0 rgba(var(--sc-primary-rgb), 0.22), 0 0 0 1px rgba(var(--sc-primary-rgb), 0.05), 0 18px 40px rgba(0, 0, 0, 0.18);
    border-radius: var(--sc-radius);
    padding: 1.5rem;
    margin-bottom: 2rem;
    /* Ensure content is readable on top */
    position: relative;
    overflow: hidden;
}

/* Navigation Pills (Rounded 999px) */
.sc-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
    color: var(--sc-text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.sc-nav-pill:hover,
.sc-nav-pill.active {
    background: rgba(var(--sc-primary-rgb), 0.15);
    border-color: rgba(var(--sc-primary-rgb), 0.4);
    color: white;
    box-shadow: 0 0 0 1px rgba(var(--sc-primary-rgb), 0.1);
}