/* --- LINUX DISTRO PALETTE --- */
:root {
    --color-arch: #1793d1;
    /* Blue */
    --color-mint: #87cf3e;
    /* Green */
    --color-ubuntu: #dd4814;
    /* Orange */
    --color-debian: #d70a53;
    /* Red */
    --color-kali: #7870e2;
    /* Purple (Info) */
    --color-fedora: #ffffff;
    /* White/Light (Secondary) */
    --bg-fedora: #2c3e50;
    /* Dark Blue-Gray */
}

/* Base button class for shared properties */
.btn-base {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    line-height: 1.2;
}

/* Color Mappings */
.btn-primary {
    --btn-color: var(--color-arch);
}

.btn-success {
    --btn-color: var(--color-mint);
}

.btn-warning {
    --btn-color: var(--color-ubuntu);
}

.btn-danger {
    --btn-color: var(--color-debian);
}

.btn-info {
    --btn-color: var(--color-kali);
}

.btn-secondary {
    --btn-color: var(--color-fedora);
}


/* --- STYLE 2: TECH CLIP (The "Style 2" requested option) --- */
.btn-tech-wrapper {
    filter: drop-shadow(0 0 1px var(--btn-color));
    display: inline-block;
    transition: all 0.3s;
    position: relative;
    margin: 5px;
    /* Spacing */
}

.btn-tech {
    background: rgba(30, 30, 40, 0.95);
    color: var(--btn-color);
    border: none;
    padding: 10px 24px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    position: relative;
    transition: all 0.3s;
}

/* Decorative Triangle */
.btn-tech-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 6px;
    height: 6px;
    background: var(--btn-color);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    transition: all 0.3s;
    pointer-events: none;
}

.btn-tech-wrapper:hover {
    filter: drop-shadow(0 0 2px var(--btn-color)) drop-shadow(0 0 6px var(--btn-color));
}

.btn-tech-wrapper:hover .btn-tech {
    background: rgba(255, 255, 255, 0.05);
    text-shadow: 0 0 8px var(--btn-color);
}


/* --- STYLE 4: CYBER GLASS (The "Style 4" requested option) --- */
.btn-glass {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--btn-color);
    padding: 10px 24px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    /* Explicit font */
    font-size: 0.85rem;
    font-weight: normal;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--btn-color);
    box-shadow: 0 0 15px var(--btn-color), inset 0 0 10px rgba(0, 0, 0, 0.5);
    text-shadow: 0 0 5px var(--btn-color);
    transform: translateY(-2px);
}