@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --color-text: #111827;
    --color-background: #ffffff;
    --color-border: #e5e7eb;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--color-text);
    line-height: 1.5;
}

.font-geist-mono {
    font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace;
}

.org-chart-container {
    width: 100%;
    height: 0;
    padding-bottom: 66.67%; /* Aspect ratio 3:2 */
    position: relative;
    overflow: hidden;
}

.org-chart {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.tab-btn {
    transition: all 0.2s ease;
}

.tab-btn.active {
    border-color: #111827;
    color: #111827;
}

.tab-btn:not(.active) {
    color: #6b7280;
}

.tab-content {
    display: none;
}

.active-tab {
    display: block;
}

.chart-container {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(
        #3b82f6 0% 60%, 
        #10b981 60% 80%, 
        #f59e0b 80% 100%
    );
}

@media (max-width: 768px) {
    .chart-container {
        width: 150px;
        height: 150px;
    }
}