/* TrigonLabs Branding Styles */

/* Import Google Fonts - Geometric Sans-Serif */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700&family=Roboto+Mono:wght@300;400;500;600;700&display=swap');

/* Color Variables */
:root {
    --trigon-primary-bg: #242B2E;
    --trigon-primary-icon: #FFFFFF;
    --trigon-accent-teal: #84A9A6;
    --trigon-typography: #E0E6E6;
    --trigon-black: #000000;
}

/* Typography */
body {
    font-family: 'Inter', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: 0.02em;
    color: var(--trigon-typography);
    background-color: var(--trigon-primary-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--trigon-primary-icon);
}

/* Logo Styling */
.trigon-logo {
    height: 40px;
    width: auto;
}

.trigon-logo-text {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--trigon-primary-icon);
    text-transform: uppercase;
}

/* Background Colors */
.bg-trigon-primary {
    background-color: var(--trigon-primary-bg);
}

.bg-trigon-accent {
    background-color: var(--trigon-accent-teal);
}

/* Text Colors */
.text-trigon-primary {
    color: var(--trigon-primary-icon);
}

.text-trigon-typography {
    color: var(--trigon-typography);
}

.text-trigon-accent {
    color: var(--trigon-accent-teal);
}

/* Border Colors */
.border-trigon-accent {
    border-color: var(--trigon-accent-teal);
}

/* Card Styling */
.trigon-card {
    background-color: rgba(36, 43, 46, 0.8);
    border: 1px solid rgba(132, 169, 166, 0.2);
    border-radius: 8px;
    color: var(--trigon-typography);
}

.trigon-card:hover {
    border-color: var(--trigon-accent-teal);
    background-color: rgba(36, 43, 46, 0.9);
}

/* Button Styling */
.btn-trigon-primary {
    background-color: var(--trigon-accent-teal);
    color: var(--trigon-primary-bg);
    font-weight: 600;
    letter-spacing: 0.05em;
    border: none;
    transition: all 0.3s ease;
}

.btn-trigon-primary:hover {
    background-color: #6B8E8B;
    transform: translateY(-1px);
}

.btn-trigon-secondary {
    background-color: transparent;
    color: var(--trigon-accent-teal);
    border: 1px solid var(--trigon-accent-teal);
    font-weight: 600;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.btn-trigon-secondary:hover {
    background-color: rgba(132, 169, 166, 0.1);
    border-color: #6B8E8B;
}

/* Link Styling */
.trigon-link {
    color: var(--trigon-accent-teal);
    text-decoration: none;
    transition: color 0.3s ease;
}

.trigon-link:hover {
    color: #6B8E8B;
    text-decoration: underline;
}

/* Badge/Pill Styling */
.trigon-badge {
    background-color: rgba(132, 169, 166, 0.2);
    color: var(--trigon-accent-teal);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* Input Styling */
.trigon-input {
    background-color: rgba(36, 43, 46, 0.6);
    border: 1px solid rgba(132, 169, 166, 0.3);
    color: var(--trigon-typography);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
}

.trigon-input:focus {
    outline: none;
    border-color: var(--trigon-accent-teal);
    background-color: rgba(36, 43, 46, 0.8);
}

/* Table Styling */
.trigon-table {
    background-color: rgba(36, 43, 46, 0.6);
    border: 1px solid rgba(132, 169, 166, 0.2);
}

.trigon-table th {
    background-color: rgba(132, 169, 166, 0.1);
    color: var(--trigon-accent-teal);
    font-weight: 600;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(132, 169, 166, 0.3);
}

.trigon-table td {
    border-bottom: 1px solid rgba(132, 169, 166, 0.1);
    color: var(--trigon-typography);
}

.trigon-table tr:hover {
    background-color: rgba(132, 169, 166, 0.05);
}

/* Alert/Notification Styling */
.trigon-alert-success {
    background-color: rgba(132, 169, 166, 0.2);
    border: 1px solid var(--trigon-accent-teal);
    color: var(--trigon-accent-teal);
}

.trigon-alert-error {
    background-color: rgba(220, 38, 38, 0.2);
    border: 1px solid #DC2626;
    color: #FCA5A5;
}

.trigon-alert-warning {
    background-color: rgba(245, 158, 11, 0.2);
    border: 1px solid #F59E0B;
    color: #FCD34D;
}

/* Navigation Styling */
.trigon-nav {
    background-color: var(--trigon-primary-bg);
    border-bottom: 1px solid rgba(132, 169, 166, 0.2);
}

.trigon-nav-link {
    color: var(--trigon-typography);
    transition: color 0.3s ease;
}

.trigon-nav-link:hover {
    color: var(--trigon-accent-teal);
}

/* Monochrome Logo Variant (for light backgrounds) */
.trigon-logo-monochrome {
    filter: brightness(0);
}