/* ==========================================================================
   THIAGO BIFF ARQUITETURA.DESIGN - SISTEMA DE DESIGN (APRESENTAÇÃO RENDER)
   1. VARIÁVEIS, TIPOGRAFIA, PLACEHOLDERS & PREVENÇÃO DE OVERFLOW
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Montserrat:wght@500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

:root {
    /* Paleta Inspirada em Apresentação Render & Luxo Arquitetônico (Modo Escuro) */
    --bg-dashboard: #0b0f19;
    --bg-slide-dark: #0f141f;
    --bg-card-dark: #151c2a;
    
    --accent-gold: #c5a880;
    --accent-gold-hover: #b8926a;
    --accent-gold-line: rgba(197, 168, 128, 0.35);
    
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    --input-bg: #1e293b;
    --input-border: #334155;
    
    /* Tipografia Oficial (Apresentação Render) */
    --font-display: 'Montserrat', sans-serif;
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'Space Mono', monospace;
}

/* --------------------------------------------------------------------------
   PALETA MODO CLARO (FUNDO BRANCO EDITORIAL DE ALTO CONTRASTE)
   -------------------------------------------------------------------------- */
body.theme-light-active {
    --bg-dashboard: #f1f5f9;
    --bg-slide-dark: #ffffff;
    --bg-card-dark: #f8fafc;
    
    --accent-gold: #9b7b48;
    --accent-gold-hover: #806336;
    --accent-gold-line: rgba(155, 123, 72, 0.3);
    
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;

    --input-bg: #ffffff;
    --input-border: #cbd5e1;
}

/* Reset & Regras Globais contra Estouro de Texto */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    background-color: var(--bg-dashboard);
    color: var(--text-primary);
    font-family: var(--font-sans);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Prevenção de Estouro de Tipografia */
h1, h2, h3, h4, h5, h6, p, span, div {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* Utilitários de Tipografia Arquitetônica */
.font-display { font-family: var(--font-display); }
.font-sans { font-family: var(--font-sans); }
.font-mono { font-family: var(--font-mono); }

.text-gold { color: var(--accent-gold) !important; }
.text-white { color: #ffffff !important; }
.text-muted { color: var(--text-secondary) !important; }

/* Foco Visível (Acessibilidade) */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
    outline: 2px solid var(--accent-gold) !important;
    outline-offset: 2px;
}

/* Respeito à preferência por menos movimento */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   UTILITÁRIOS DE TEXTURAS MARMORIZADAS (APRESENTAÇÃO RENDER OFICIAL REFINADO)
   -------------------------------------------------------------------------- */
.marble-bg {
    background-color: #0b0f19 !important;
    background-image:
        radial-gradient(ellipse at 15% 80%, rgba(80,75,68,0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 78% 25%, rgba(85,80,70,0.14) 0%, transparent 40%),
        linear-gradient(135deg, transparent 25%, rgba(60,55,48,0.12) 30%, transparent 38%),
        linear-gradient(225deg, transparent 40%, rgba(70,65,55,0.08) 46%, transparent 52%),
        linear-gradient(315deg, transparent 50%, rgba(55,50,42,0.12) 55%, transparent 62%) !important;
}

.gold-marble-bg {
    background-color: #faf9f6 !important;
    background-image:
        radial-gradient(ellipse at 15% 80%, rgba(197, 168, 128, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 78% 25%, rgba(220, 215, 205, 0.20) 0%, transparent 40%),
        linear-gradient(135deg, transparent 25%, rgba(197, 168, 128, 0.05) 30%, transparent 38%),
        linear-gradient(225deg, transparent 40%, rgba(210, 205, 195, 0.10) 46%, transparent 52%),
        linear-gradient(315deg, transparent 50%, rgba(197, 168, 128, 0.06) 55%, transparent 62%) !important;
}

/* SVG Decorativo Vetorial */
.tech-vector-svg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* --------------------------------------------------------------------------
   SISTEMA DE PLACEHOLDERS ELEGANTES
   -------------------------------------------------------------------------- */
.image-placeholder-box {
    width: 100%;
    height: 100%;
    min-height: 200px;
    background: #090c14;
    border: 1px dashed var(--accent-gold-line);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

body.theme-light-active .image-placeholder-box {
    background: rgba(248, 250, 252, 0.7);
    border-color: rgba(155, 123, 72, 0.4);
}

.image-placeholder-box:hover {
    border-color: var(--accent-gold);
    background: #0e1320;
}

body.theme-light-active .image-placeholder-box:hover {
    background: #f1f5f9;
}

.image-placeholder-box svg {
    width: 36px;
    height: 36px;
    stroke: var(--accent-gold);
    margin-bottom: 12px;
    opacity: 0.8;
}

.image-placeholder-box .ph-label {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-primary);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.image-placeholder-box .ph-sub {
    font-size: 11px;
    color: var(--text-muted);
}

.image-placeholder-box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-placeholder-box.has-image .ph-content {
    display: none;
}