/**
 * TradeGoldOSRS — estilos propios (Bootstrap 5.3 para lo general).
 * Ver docs/10-DISENO.md para la guía completa.
 */

:root {
    --tg-wood-darkest: #120E0A;
    --tg-wood-dark: #1C1611;
    --tg-wood: #261D15;
    --tg-wood-light: #322619;
    --tg-stone: #3A2E20;

    --tg-bronze-light: #E0C068;
    --tg-bronze: #C9A227;
    --tg-bronze-dark: #6B5220;

    --tg-gold: #FFD700;
    --tg-gold-light: #FFE44D;
    --tg-gold-dark: #DAA520;
    --tg-gold-deep: #4A3608;

    --tg-crimson-light: #A82424;
    --tg-crimson: #8B1A1A;
    --tg-crimson-dark: #5C0F0F;

    --tg-success: #7FA650;
    --tg-danger: #C1453B;
    --tg-info: #6E93B8;
    --tg-warning: #D9A441;

    --tg-text: #E8DCC0;
    --tg-text-muted: #A89578;
    --tg-text-dim: #6E6050;

    --bs-body-bg: var(--tg-wood-darkest);
    --bs-body-color: var(--tg-text);
    --bs-primary: var(--tg-gold);
    --bs-border-color: var(--tg-stone);
    --bs-border-radius: .375rem;
    --bs-border-radius-lg: .5rem;
    --bs-link-color: var(--tg-gold-light);
    --bs-link-hover-color: var(--tg-gold);
}

body.tg-body {
    font-family: 'Lato', system-ui, sans-serif;
    background-color: var(--tg-wood-darkest);
    color: var(--tg-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.tg-brand,
.tg-title,
.tg-panel-title,
.tg-eyebrow {
    font-family: 'Cinzel', Georgia, serif;
}

.tg-brand {
    color: var(--tg-gold);
    letter-spacing: 0.04em;
}

.tg-header,
.tg-footer,
.tg-admin-bar {
    background: var(--tg-wood-dark);
}

.navbar-dark .navbar-toggler-icon {
    filter: invert(1);
}

.navbar .nav-link {
    color: var(--tg-text-muted);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--tg-gold-light);
}

.tg-panel {
    background: linear-gradient(180deg, var(--tg-wood) 0%, var(--tg-wood-dark) 100%);
    border: 2px solid var(--tg-bronze-dark);
    box-shadow:
        inset 0 1px 0 var(--tg-bronze-light),
        0 8px 24px rgba(0, 0, 0, 0.35);
    border-radius: var(--bs-border-radius-lg);
}

.tg-title {
    color: var(--tg-gold-light);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.tg-eyebrow {
    color: var(--tg-bronze-light);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.85rem;
}

.tg-text-muted {
    color: var(--tg-text-muted) !important;
}

.tg-text-dim {
    color: var(--tg-text-dim);
}

.tg-btn-primary {
    background: linear-gradient(180deg, var(--tg-crimson-light), var(--tg-crimson-dark));
    border: 1px solid var(--tg-bronze);
    color: var(--tg-text);
    font-family: 'Cinzel', Georgia, serif;
    min-height: 44px;
    padding-inline: 1.25rem;
}

.tg-btn-primary:hover,
.tg-btn-primary:focus {
    background: linear-gradient(180deg, var(--tg-crimson), var(--tg-crimson-dark));
    color: #fff;
    border-color: var(--tg-bronze-light);
}

.tg-btn-outline {
    border: 1px solid var(--tg-bronze);
    color: var(--tg-gold-light);
    background: transparent;
    font-family: 'Cinzel', Georgia, serif;
    min-height: 44px;
    padding-inline: 1.25rem;
}

.tg-btn-outline:hover,
.tg-btn-outline:focus {
    background: var(--tg-wood-light);
    color: var(--tg-gold);
    border-color: var(--tg-bronze-light);
}

.tg-locale-select {
    background-color: var(--tg-wood);
    border-color: var(--tg-stone);
    color: var(--tg-text);
    min-width: 7rem;
}

.tg-admin-sidebar {
    background: var(--tg-wood-dark);
    min-height: calc(100vh - 56px);
    border-right: 1px solid var(--tg-stone);
}

.form-select:focus {
    border-color: var(--tg-bronze);
    box-shadow: 0 0 0 0.2rem rgba(201, 162, 39, 0.25);
}

main {
    flex: 1;
}