/* * base.css — Variáveis globais do tema * Usar estas variáveis em todos os arquivos CSS de página e components.css * Não colocar regras de layout aqui, apenas :root com as variáveis */ :root { /* Cores principais */ --color-bg: #000000; --color-surface: #1a1a1a; --color-surface-alt: #111111; --color-border: #3a3738; --color-border-light: #505050; /* Texto */ --color-text: #b7b7b7; --color-text-muted: #888888; --color-text-bright: #d1d1d1; --color-link: #d1d1d1; --color-link-hover: #ffffff; /* Destaque */ --color-primary: #e07000; /* laranja do tema */ --color-danger: #cc3333; --color-success: #3a8a3a; --color-info: #3498db; --color-warning: #ffcc66; /* Tipografia */ --font-body: Verdana, Geneva, sans-serif; --font-size-xs: 9px; --font-size-sm: 11px; --font-size-md: 12px; --font-size-lg: 14px; /* Espaçamentos — escala numérica */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; /* Tokens SEMÂNTICOS de padding — usar nestes contextos para uniformidade. Ao criar um card/container/botão novo, preferir esses tokens em vez de valores hardcoded. Trocar tema = trocar 1 valor aqui. */ --card-padding-y: 12px; /* vertical interno de cards/containers (notice-box, archive-post-body, dl-card) */ --card-padding-x: 14px; /* horizontal interno de cards/containers */ --cell-padding: 6px; /* cells de table-standard, status-box-grid */ --cell-padding-loose: 10px; /* cells de tabelas mais "respiradas" (legal-text, om-cell) */ --button-padding-y: 6px; /* vertical de botões padrão (am-btn, la-btn, .form-submit-button) */ --button-padding-x: 16px; /* horizontal de botões padrão */ --button-padding-y-sm: 4px; --button-padding-x-sm: 12px; /* Bordas */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 15px; --radius-pill: 999px; /* ---------------------------------------------------------------------- * Accent tokens — usados em headers de seção (sidebar), online pill, * chips, indicadores, etc. Cinza-azul claro com leve halo dourado para * dar a vibe "premium" do tema sem ostensivo amarelão. * ---------------------------------------------------------------------- */ --color-accent-soft: #c8d0db; --color-accent-text: #e0e6ee; /* Accent quente — único tom da paleta que rompe o cinza-azul. Cobre envelhecido pra hover state, divisórias decorativas, accent rules em cabeçalhos e marcadores. NÃO usar pra background grande (vira ruído); só pequenas áreas e texto. Tonalidade calibrada pra fundo slate escuro. */ --color-accent-warm: #b88a5c; /* cobre envelhecido — accent principal */ --color-accent-warm-soft: rgba(184, 138, 92, 0.45); --color-accent-warm-bg: rgba(184, 138, 92, 0.08); --color-accent-warm-border: rgba(184, 138, 92, 0.30); /* Textura SVG noise compartilhada — fractalNoise tom slate. Reutilizada em sidebar sections, top bar, cards. Mantém uma única fonte da textura. */ --texture-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.55 0 0 0 0 0.65 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* Fonte display medieval — Cardo (Google Fonts). Substitui Cinzel nos cards/títulos. Carregada via @import no head globalmente. */ --font-display: 'Cardo', 'Trajan Pro', 'Times New Roman', serif; /* ---------------------------------------------------------------------- * Heading tokens — usados em todos os h1/h2 de página (monsters, spells, * tasks, items, npcs, guilds, etc.). Slate-300 dessaturado em vez de * branco puro: lê limpo no fundo escuro sem doer no olho. Pra ajustar o * tom global dos títulos, trocar AQUI uma vez. * ---------------------------------------------------------------------- */ --color-heading: #c8d4e2; --text-shadow-heading: 0 2px 8px rgba(0, 0, 0, 0.55); /* Superfícies semi-transparentes pra chips/pills/cards translúcidos */ --surface-soft: rgba(200, 208, 219, 0.06); --surface-soft-hover: rgba(200, 208, 219, 0.12); --border-soft: rgba(200, 208, 219, 0.18); --border-soft-hover: rgba(200, 208, 219, 0.28); /* Glow dourado sutil — combinar com `filter: var(--glow-accent)` em SVGs de ícone para destaque consistente. */ --glow-accent: drop-shadow(0 0 4px rgba(255, 200, 110, 0.18)); --glow-accent-strong: drop-shadow(0 0 6px rgba(255, 200, 110, 0.32)); /* Sombra preta inferior padrão para ícones/cards (depth) */ --shadow-icon: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); /* ---------------------------------------------------------------------- * Tier tokens — usados em raids (third/second/first), e também * reaproveitáveis em qualquer feature com hierarquia de dificuldade * (highscores ranges, donate packages, etc.). Cores carregam meaning: * verde = entry, amarelo = intermediário, vermelho = endgame. * ---------------------------------------------------------------------- */ --tier-3: #7AF972; /* Third tier (entry, easy) */ --tier-2: #F9F572; /* Second tier (medium) */ --tier-1: #F97272; /* First tier (hard, endgame) */ /* Categorias de raridade — usadas em rewards, drop tables, market */ --rarity-very-usual: #7AF972; --rarity-usual: #72F9DA; --rarity-medium: #7276F9; --rarity-hard: #F9F572; --rarity-rare: #F97272; --rarity-very-rare: #F172F9; /* ---------------------------------------------------------------------- * Medalhas (gold/silver/bronze) — paleta tradicional para podium em * rankings (highscores, future leaderboards). Tons calibrados para * fundo escuro, sem saturação excessiva. * ---------------------------------------------------------------------- */ --medal-gold: #d4af37; /* Silver com tom azulado "premium" — destaca melhor no fundo slate (cinza-azul escuro) do que prata neutra que se mistura. */ --medal-silver: #c0d4e8; --medal-bronze: #cd7f32; } /* * Breakpoints de referência (CSS vars não funcionam em @media — só documentação): * 1340px — página deixa de ter largura fixa * 960px — colapsa para 2 colunas: sidebar esquerda + conteúdo * 820px — grids de packs do buypoints (já existente) * 680px — mobile: coluna única */