@import "tailwindcss";


:root {
    /* Gruvbox Dark Theme Colors */
    --bg0-hard: #1d2021;
    --bg0: #282828;
    --bg1: #3c3836;
    --bg2: #504945;
    --bg3: #665c54;
    --bg4: #7c6f64;
    
    --fg0: #fbf1c7;
    --fg1: #ebdbb2;
    --fg2: #d5c4a1;
    --fg3: #bdae93;
    --fg4: #a89984;
    
    --red: #fb4934;
    --green: #b8bb26;
    --yellow: #fabd2f;
    --blue: #83a598;
    --purple: #d3869b;
    --aqua: #8ec07c;
    --orange: #fe8019;
    
    --red-dim: #cc2412;
    --green-dim: #98971a;
    --yellow-dim: #d79921;
    --blue-dim: #458588;
    --purple-dim: #b16286;
    --aqua-dim: #689d6a;
    --orange-dim: #d65d0e;
}

* {
    font-family: 'JetBrains Mono', monospace;
}

body {
    background-color: var(--bg0-hard);
    color: var(--fg1);
}

.service-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: var(--bg1);
    border: 2px solid var(--bg3);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    border-color: var(--orange);
}

.service-card-inner {
    background: linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 100%);
}

.spec-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.5rem;
    font-weight: 700;
}

.progress-bar {
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-card {
    background-color: var(--bg0);
    border: 2px solid var(--bg2);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.stat-card {
    background: linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 100%);
    border: 1px solid var(--bg3);
    transition: all 0.3s ease;
}

.stat-card:hover {
    border-color: var(--orange);
    transform: translateY(-2px);
}

.progress-bg {
    background-color: var(--bg3);
}

h1, h2, h3 {
    color: var(--fg0);
}

a {
    text-decoration: none;
}