// Main stylesheet - Soul of CSS Framework
// Inspired by Elden Ring aesthetics

// Import Google Fonts
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cinzel+Decorative:wght@400;700&display=swap");

// Import all components
@import "mixins";
@import "base";
@import "elements";
@import "form";
@import "helpers";

// Custom components using mixins
.btn {
    @include button-base;

    &.btn-secondary {
        border-color: var(--er-text-muted);
        color: var(--er-text-muted);

        &:hover {
            background: var(--er-text-muted);
            color: var(--er-bg-primary);
        }
    }

    &.btn-danger {
        border-color: var(--er-red);
        color: var(--er-red);

        &:hover {
            background: var(--er-red);
            color: var(--er-text-primary);
        }
    }

    &.btn-large {
        padding: var(--er-spacing-md) var(--er-spacing-xl);
        font-size: 1.1rem;
    }

    &.btn-small {
        padding: var(--er-spacing-xs) var(--er-spacing-sm);
        font-size: 0.9rem;
    }
}

.card {
    @include card;

    &.card-bordered {
        @include golden-border;
    }
}

.panel {
    @include dark-panel;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--er-spacing-md);

    @include mobile {
        padding: 0 var(--er-spacing-sm);
    }
}

// Grid system
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -#{var(--er-spacing-sm)};
}

.col {
    flex: 1;
    padding: 0 var(--er-spacing-sm);

    @include mobile {
        flex: 100%;
    }
}

@for $i from 1 through 12 {
    .col-#{$i} {
        flex: 0 0 #{($i / 12) * 100%};
        max-width: #{($i / 12) * 100%};
        padding: 0 var(--er-spacing-sm);

        @include mobile {
            flex: 100%;
            max-width: 100%;
        }
    }
}

// Navigation
.navbar {
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--er-gold);
    padding: var(--er-spacing-md) 0;

    .nav-brand {
        @include glowing-text;
        font-family: "Cinzel Decorative", serif;
        font-size: 1.5rem;
        text-decoration: none;
    }

    .nav-links {
        display: flex;
        list-style: none;
        gap: var(--er-spacing-lg);

        a {
            padding: var(--er-spacing-sm) var(--er-spacing-md);
            border-radius: 4px;
            transition: all 0.3s ease;

            &:hover {
                background: rgba(212, 175, 55, 0.1);
            }
        }
    }
}

// Hero section
.hero {
    text-align: center;
    padding: calc(var(--er-spacing-xl) * 3) 0;
    background: radial-gradient(
            ellipse at center,
            rgba(212, 175, 55, 0.1) 0%,
            transparent 70%
        ),
        linear-gradient(
            180deg,
            var(--er-bg-primary) 0%,
            var(--er-bg-secondary) 100%
        );

    h1 {
        font-size: 3.5rem;
        margin-bottom: var(--er-spacing-lg);

        @include mobile {
            font-size: 2.5rem;
        }
    }

    p {
        font-size: 1.2rem;
        max-width: 600px;
        margin: 0 auto var(--er-spacing-xl);
    }
}

// Tables
.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--er-bg-secondary);
    border: var(--er-border-gold);
    border-radius: 8px;
    overflow: hidden;

    th,
    td {
        padding: var(--er-spacing-sm) var(--er-spacing-md);
        text-align: left;
        border-bottom: 1px solid var(--er-bg-tertiary);
    }

    th {
        background: var(--er-bg-tertiary);
        color: var(--er-gold);
        font-weight: bold;
        text-transform: uppercase;
        font-size: 0.9rem;
        letter-spacing: 1px;
    }

    tr:hover td {
        background: rgba(212, 175, 55, 0.05);
    }
}

// Alerts
.alert {
    @include dark-panel;
    border-left: 4px solid var(--er-gold);

    &.alert-danger {
        border-left-color: var(--er-red);

        .alert-title {
            color: var(--er-red);
        }
    }

    &.alert-success {
        border-left-color: var(--er-green);

        .alert-title {
            color: var(--er-green);
        }
    }

    .alert-title {
        color: var(--er-gold);
        font-weight: bold;
        margin-bottom: var(--er-spacing-sm);
    }
}