/* =============================================
   SKIN: TEMA DESIGN (AMBIENT)
   Este arquivo SÓ define as cores e imagens.
============================================= */

body.page-design {
    /* -- 1. Variáveis do Esqueleto (com cores da paleta Design) -- */
    --theme-body-bg: #1a0f2a;  /* Roxo escuro do fundo */
    --theme-text-light: #f5f3f7;
    --theme-text-muted: #a89bbd; /* Roxo-acinzentado */
    --theme-bg-dark: #1a0f2a;

    --theme-primary: #f252da;    /* Pink vibrante */
    --theme-secondary: #c084fc;  /* Roxo claro */
    
    --theme-header-image: url('/img/4.jpg'); /* Sua imagem de Design (assume que está na pasta /img/ da raiz) */
    --theme-header-position: right center; /* Foco no canto direito, como você pediu */
    --theme-header-border: 2px solid; /* A borda em si é definida abaixo */
    --theme-header-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);

    /* Gradiente para o título */
    --theme-title-gradient: linear-gradient(to right, var(--theme-primary), var(--theme-secondary));
    
    --theme-card-bg: #2b1a45; /* Roxo mais claro do card */
    --theme-card-border: rgba(255, 255, 255, 0.1); /* Borda "vidro" */
    --theme-card-icon-bg: #1a0f2a; /* Fundo do ícone (escuro) */
    --theme-card-hover-shadow: 0 10px 25px rgba(242, 82, 218, 0.2); /* Sombra pink */
    
    --theme-icon-shadow: 0 0 15px rgba(242, 82, 218, 0.3); /* Brilho pink */
    
    --theme-button-text: var(--theme-secondary);
    --theme-button-border: 2px solid var(--theme-secondary);
    --theme-button-bg: transparent;
    --theme-button-hover-bg: var(--theme-primary); /* Fundo sólido pink no hover */
    --theme-button-hover-text: #ffffff;
    --theme-button-hover-shadow: 0 0 15px rgba(242, 82, 218, 0.4);
    
    --theme-mobile-arrow-color: var(--theme-primary) !important; /* Seta pink no mobile */
}

/* --- 2. Sobrescritas Específicas do Tema --- */

/* Borda do Header (o esqueleto nao previa 'border-image') */
.page-design header.hero-catalog {
    border-image-slice: 1;
    border-image-source: linear-gradient(to right, var(--theme-primary), var(--theme-secondary));
}

/* Título (o esqueleto previa borda, este tema quer texto em gradiente) */
.page-design .category-title {
    background: var(--theme-title-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    border-image-source: none !important; /* Desliga o gradiente de borda do esqueleto */
    border-bottom: 1px solid var(--theme-card-border) !important; /* Borda sutil de vidro */
}

/* Efeitos de "névoa" e "pontos" da imagem */
body.page-design::after {
    content: '';
    position: fixed; /* 'fixed' para o efeito ficar parado no scroll */
    bottom: -10%; right: -20%;
    width: 60vw; height: 60vh;
    background: radial-gradient(circle, var(--theme-primary) 0%, transparent 60%);
    opacity: 0.1; z-index: -1; pointer-events: none;
}
body.page-design::before {
    content: '';
    position: fixed;
    top: 15vh; left: 1vw;
    width: 20vw; height: 30vh;
    background-image: radial-gradient(var(--theme-secondary) 1.5px, transparent 1.5px);
    background-size: 25px 25px;
    opacity: 0.1; z-index: -1; pointer-events: none;
}

/* Sobrescrita para o footer */
.page-design footer {
    color: white !important;
}