/* ======================================================================= CHROMIA — Design System Tokens (PORTÁVEL) Comunidade da Arte ----------------------------------------------------------------------- Estética: all-dark, premium, "a arte como protagonista". 3 cores predominantes: Dark #0A0A0C · Ice White #F8F9FA · Purple #924EEA Primária de marca: Cream #F5F0E8 COMO USAR EM OUTRO PROJETO 1. Copie este arquivo + `chromia-fonts.css` (ou o bloco @font-face abaixo). 2. Importe-o no topo do seu CSS global: @import './chromia-tokens.css'; 3. Tailwind v4: o bloco `@theme inline` no fim expõe os tokens como utilitários (bg-background, text-foreground, rounded-md, etc.). 4. Consuma SEMPRE via variável (var(--token) / classe utilitária). Nunca cole hex direto nos componentes. Extraído de: src/styles/theme.css + src/styles/fonts.css ======================================================================= */ /* ======================================================================= 0. FONTES (arquivos em assets/fonts/ — paths relativos a este CSS: ../fonts/) ======================================================================= */ @font-face { font-family: 'Neue Haas Display'; src: url('../fonts/NeueHaasDisplayLight.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Neue Haas Display'; src: url('../fonts/NeueHaasDisplayRoman.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Neue Haas Display'; src: url('../fonts/NeueHaasDisplayMediu.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Neue Haas Display'; src: url('../fonts/NeueHaasDisplayBold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Neue Haas Display'; src: url('../fonts/NeueHaasDisplayBlack.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Weight'; src: url('../fonts/Weight.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } /* Inter carregada via no index.html (mais rápido e válido que @import depois de @font-face). */ :root { /* === FAMÍLIAS === */ --font-display: 'Neue Haas Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-highlight: 'Weight', 'Neue Haas Display', -apple-system, sans-serif; /* === ESCALA TIPOGRÁFICA (desktop) === */ --font-size: 16px; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base:1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.75rem; /* 28px */ --text-3xl: 2.25rem; /* 36px */ --text-4xl: 3rem; /* 48px */ --text-5xl: 4rem; /* 64px */ --text-6xl: 5rem; /* 80px */ /* === PESOS === */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-black: 800; /* nota: alguns headings usam 900 (Black local) */ /* === LETTER-SPACING === */ --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0em; --tracking-wide: 0.025em; --tracking-wider: 0.05em; /* === 3 CORES PREDOMINANTES === */ --predominant-dark: #0A0A0C; --predominant-ice: #F8F9FA; --predominant-purple: #924EEA; /* === BACKGROUNDS (dark) === */ --background: #0A0A0C; --background-alt: #060608; --foreground: #E8E6E3; --foreground-alt: #0A0A0C; /* Atmosfera editorial: clarão tonal (monocromático, profundidade) + malha papel-quadriculado fina */ --atmo-img: radial-gradient(125% 78% at 50% -12%, rgba(255,255,255,.05), transparent 56%), linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); --atmo-size: 100% 100%, 46px 46px, 46px 46px; --atmo-attach: scroll, fixed, fixed; /* === SUPERFÍCIES === */ --card: #141416; --card-foreground: #E8E6E3; --surface-elevated: #1A1A1E; --surface-glass: rgba(20, 20, 22, 0.6); --popover: #1A1A1E; --popover-foreground: #E8E6E3; /* === PALETA CREAM === */ --cream: #F5F0E8; --cream-light: #FAF8F4; --cream-dark: #E8E0D4; --cream-deep: #D4C9B8; --accent-soft: rgba(245, 240, 232, 0.12); /* === MARCA (Comunidade da Arte) === */ --brand-purple-deep: #350066; --brand-purple: #924EEA; --brand-purple-light: #A855F7; --brand-cyan: #5CE6D6; --brand-yellow: #FFE600; --brand-orange: #FF6D00; /* === PRIMÁRIA / SECUNDÁRIA / MUTED / ACCENT === */ --primary: #F5F0E8; /* cream */ --primary-foreground: #0A0A0C; --primary-hover: #E8E0D4; --secondary: #1E1E22; --secondary-foreground: #C4C0B9; --muted: #1A1A1E; --muted-foreground: #8A8680; --accent: #FAF8F4; --accent-foreground: #0A0A0C; /* === SEMÂNTICAS === */ --destructive: #DC3545; --destructive-foreground: #FFFFFF; --success: #1EA952; --success-foreground: #FFFFFF; --warning: #E8920A; --warning-foreground: #1A1A1E; --info: #3478D4; --info-foreground: #FFFFFF; /* === BORDAS / INPUTS === */ --border: #232328; --border-strong: #3A3A42; --border-dark: #1A1A1E; --input: #232328; --input-background: #141416; --switch-background:#3A3A42; --ring: #F5F0E8; /* === PALETA DE RANKING (gamificação) === */ --rank-bronze: #CD7F32; --rank-bronze-bg: rgba(205, 127, 50, 0.12); --rank-silver: #C0C0C0; --rank-silver-bg: rgba(192, 192, 192, 0.12); --rank-gold: #FFD700; --rank-gold-bg: rgba(255, 215, 0, 0.12); --rank-elite: #B9F2FF; --rank-elite-bg: rgba(185, 242, 255, 0.12); --rank-top100: #FF4655; --rank-top100-bg: rgba(255, 70, 85, 0.12); /* === CHARTS === */ --chart-1: #F5F0E8; --chart-2: #E8E0D4; --chart-3: #1EA952; --chart-4: #5CE6D6; --chart-5: #FFE600; /* === RAIO (generoso, inspirado em ClickUp) === */ --radius: 1.25rem; /* 20px base */ /* === MOTION (assinatura única do site) === */ --ease: cubic-bezier(0.16, 1, 0.3, 1); /* hover / feedback (snappy) */ --ease-reveal: cubic-bezier(0.25, 0.1, 0.25, 1); /* scroll-reveal (glide suave/contínuo, como antes) */ --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 0.28s; /* hover / feedback */ --dur-reveal: 0.75s; /* entrada scroll-reveal */ /* === SOMBRAS (elevação em fundo escuro) === */ --shadow-card: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --shadow-elevated: 0 4px 12px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3); --shadow-modal: 0 2px 4px rgba(0,0,0,0.3), 0 8px 20px rgba(0,0,0,0.4), 0 24px 60px rgba(0,0,0,0.5); --shadow-dropdown: 0 1px 3px rgba(0,0,0,0.3), 0 6px 16px rgba(0,0,0,0.4); /* === PADRÃO DE PONTOS / GRID === */ --dot-size: 1px; --dot-space: 24px; --dot-color: rgba(255, 255, 255, 0.04); /* === LAYOUT MOBILE === */ --mobile-container-px: 1rem; --mobile-section-py: 1.5rem; --mobile-card-gap: 0.75rem; --mobile-header-height: 3.5rem; --mobile-bottom-nav-height: 3.5rem; --mobile-safe-bottom: env(safe-area-inset-bottom, 0px); /* === SIDEBAR === */ --sidebar: #0E0E10; --sidebar-foreground: #E8E6E3; --sidebar-primary: #F5F0E8; --sidebar-primary-foreground: #0A0A0C; --sidebar-accent: #1A1A1E; --sidebar-accent-foreground: #E8E6E3; --sidebar-border: #232328; --sidebar-ring: #F5F0E8; } /* ======================================================================= VARIANTES DE SEÇÃO (override de tokens por bloco — alternância visual) Aplicar como classe no wrapper da seção. ======================================================================= */ /* Seção branco-gelo (contraste com o dark) */ .section-cream { --background: #F8F9FA; --background-alt: #F0F1F3; --foreground: #0A0A0C; --foreground-alt: #F8F9FA; --card: #FFFFFF; --card-foreground: #0A0A0C; --surface-elevated: #FFFFFF; --surface-glass: rgba(248, 249, 250, 0.7); --popover: #FFFFFF; --popover-foreground: #0A0A0C; --primary: #0A0A0C; --primary-foreground: #F8F9FA; --primary-hover: #1A1A1E; --secondary: #F0F1F3; --secondary-foreground: #3A3A42; --muted: #E9ECEF; --muted-foreground: #6C757D; --accent: #C49A3C; --accent-foreground: #FFFFFF; --accent-soft: rgba(10, 10, 12, 0.08); --border: #DEE2E6; --border-strong: #ADB5BD; --border-dark: #CED4DA; --input: #E9ECEF; --input-background: #FFFFFF; --switch-background: #DEE2E6; --ring: #0A0A0C; --dot-color: rgba(0, 0, 0, 0.06); --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05); --shadow-elevated: 0 4px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06); } /* Seção dark elevada (levemente mais clara, para alternância) */ .section-dark { --background: #141416; --foreground: #E8E6E3; --card: #1A1A1E; --card-foreground: #E8E6E3; --surface-elevated: #222226; --muted: #222226; --muted-foreground: #8A8680; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.12); --input: #2A2A30; --input-background: #1A1A1E; --dot-color: rgba(255, 255, 255, 0.06); --shadow-card: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4); --primary: #FAF8F4; --primary-hover: #E8E0D4; --accent: #FAF8F4; } /* (Bloco Tailwind v4 @theme removido — este projeto é estático/CSS puro. Os tokens acima são consumidos diretamente via var(--token).) */