/* * ============================================================ * COCORICÓ — DESIGN TOKENS * Extraído do modelo Asterix · Adaptado para a marca Cocoricó * Brad Frost — Atomic Design Methodology * ============================================================ * * USO: @import './tokens.css'; em qualquer arquivo CSS do projeto * Todos os tokens seguem a convenção --cc-{categoria}-{variante} */ :root { /* ============================================================ * CORES — BRAND * Marca Cocoricó: primary #FFDD00 · logo gradiente azul→amarelo * ============================================================ */ /* Primária — Amarelo Cocoricó */ --cc-color-primary: #FFDD00; --cc-color-primary-hover: #FFE833; --cc-color-primary-active: #E6C800; --cc-color-primary-soft: rgba(255, 221, 0, 0.12); --cc-color-primary-border: rgba(255, 221, 0, 0.30); --cc-color-primary-glow: rgba(255, 221, 0, 0.20); /* Azul — gradiente do logo */ --cc-color-blue: #00A8E3; --cc-color-blue-soft: rgba(0, 168, 227, 0.12); --cc-color-blue-border: rgba(0, 168, 227, 0.30); /* Gradiente logo: azul → amarelo */ --cc-gradient-logo: linear-gradient(90deg, #00A8E3 0%, #FFDD00 100%); --cc-gradient-logo-diagonal: linear-gradient(135deg, #00A8E3 0%, #FFDD00 100%); /* ============================================================ * CORES — NEUTROS (Background escuro, estilo Asterix) * ============================================================ */ --cc-color-bg-base: #050505; --cc-color-bg-surface: #0F0F0F; --cc-color-bg-elevated: #1A1A1A; --cc-color-bg-overlay: #020202; --cc-color-bg-white-2: rgba(255, 255, 255, 0.02); --cc-color-bg-white-4: rgba(255, 255, 255, 0.04); --cc-color-bg-white-5: rgba(255, 255, 255, 0.05); --cc-color-bg-white-10: rgba(255, 255, 255, 0.10); /* ============================================================ * CORES — TEXTO * ============================================================ */ --cc-color-text-primary: #FFFFFF; --cc-color-text-secondary: rgba(255, 255, 255, 0.70); --cc-color-text-muted: rgba(255, 255, 255, 0.50); --cc-color-text-faint: rgba(255, 255, 255, 0.30); --cc-color-text-accent: #FFDD00; /* amarelo Cocoricó */ --cc-color-text-accent-muted: rgba(255, 221, 0, 0.80); --cc-color-text-blue: #00A8E3; /* ============================================================ * CORES — BORDAS * ============================================================ */ --cc-color-border-default: rgba(255, 255, 255, 0.10); --cc-color-border-subtle: rgba(255, 255, 255, 0.05); --cc-color-border-accent: rgba(255, 221, 0, 0.50); --cc-color-border-accent-hover: rgba(255, 221, 0, 0.30); --cc-color-border-blue: rgba(0, 168, 227, 0.30); /* ============================================================ * TIPOGRAFIA * Fonte principal: Geist (sans) · Destaque: Instrument Serif * ============================================================ */ --cc-font-sans: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --cc-font-serif: 'Instrument Serif', Georgia, serif; --cc-font-mono: 'Geist Mono', 'Space Mono', ui-monospace, monospace; /* Escalas de tamanho */ --cc-text-xs: 0.6875rem; /* 11px */ --cc-text-sm: 0.875rem; /* 14px */ --cc-text-base: 1rem; /* 16px */ --cc-text-lg: 1.125rem; /* 18px */ --cc-text-xl: 1.25rem; /* 20px */ --cc-text-2xl: 1.5rem; /* 24px */ --cc-text-3xl: 1.875rem; /* 30px */ --cc-text-4xl: 2.25rem; /* 36px */ --cc-text-5xl: 3rem; /* 48px */ --cc-text-6xl: 3.75rem; /* 60px */ --cc-text-7xl: 4.5rem; /* 72px */ /* Pesos */ --cc-font-normal: 400; --cc-font-medium: 500; --cc-font-semibold: 600; --cc-font-bold: 700; /* Line heights */ --cc-leading-tight: 0.95; --cc-leading-snug: 1.25; --cc-leading-normal: 1.5; --cc-leading-relaxed: 1.625; /* Letter spacing */ --cc-tracking-tight: -0.025em; --cc-tracking-normal: 0em; --cc-tracking-wide: 0.025em; --cc-tracking-wider: 0.05em; --cc-tracking-widest: 0.1em; /* ============================================================ * ESPAÇAMENTO — Escala 4px base * ============================================================ */ --cc-space-0: 0px; --cc-space-1: 0.25rem; /* 4px */ --cc-space-2: 0.5rem; /* 8px */ --cc-space-3: 0.75rem; /* 12px */ --cc-space-4: 1rem; /* 16px */ --cc-space-5: 1.25rem; /* 20px */ --cc-space-6: 1.5rem; /* 24px */ --cc-space-8: 2rem; /* 32px */ --cc-space-10: 2.5rem; /* 40px */ --cc-space-12: 3rem; /* 48px */ --cc-space-16: 4rem; /* 64px */ --cc-space-20: 5rem; /* 80px */ --cc-space-24: 6rem; /* 96px */ --cc-space-32: 8rem; /* 128px */ /* ============================================================ * BORDER RADIUS * ============================================================ */ --cc-radius-sm: 0.25rem; /* 4px */ --cc-radius-md: 0.5rem; /* 8px */ --cc-radius-lg: 0.75rem; /* 12px */ --cc-radius-xl: 1rem; /* 16px */ --cc-radius-2xl: 1.5rem; /* 24px */ --cc-radius-3xl: 1.875rem; /* 30px */ --cc-radius-full: 9999px; /* ============================================================ * SOMBRAS * ============================================================ */ --cc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --cc-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --cc-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); --cc-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6); --cc-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.7); /* Sombras com cor primária (glow) */ --cc-shadow-primary: 0 10px 30px rgba(255, 221, 0, 0.20); --cc-shadow-primary-sm: 0 4px 12px rgba(255, 221, 0, 0.20); --cc-shadow-primary-lg: 0 20px 40px rgba(255, 221, 0, 0.30); /* Sombra interna — botão premium */ --cc-shadow-btn-inner: inset 0px 1px 1px rgba(255, 255, 255, 0.20), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.10); /* ============================================================ * BLUR / BACKDROP * ============================================================ */ --cc-blur-sm: blur(4px); --cc-blur-md: blur(12px); --cc-blur-lg: blur(24px); --cc-blur-xl: blur(40px); --cc-blur-glow: blur(80px); --cc-blur-glow-lg: blur(100px); /* ============================================================ * TRANSIÇÕES / ANIMAÇÕES * ============================================================ */ --cc-transition-fast: 150ms ease; --cc-transition-base: 300ms ease; --cc-transition-slow: 500ms ease; --cc-transition-veryslow: 700ms ease; --cc-ease-in: cubic-bezier(0.4, 0, 1, 1); --cc-ease-out: cubic-bezier(0, 0, 0.2, 1); --cc-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ============================================================ * LAYOUT * ============================================================ */ --cc-container-max: 80rem; /* 1280px = max-w-7xl */ --cc-container-px: 1.5rem; /* 24px */ --cc-container-px-lg: 2rem; /* 32px */ --cc-nav-height: 64px; /* ============================================================ * Z-INDEX * ============================================================ */ --cc-z-behind: -10; --cc-z-base: 0; --cc-z-above: 10; --cc-z-dropdown: 100; --cc-z-sticky: 200; --cc-z-nav: 500; --cc-z-modal: 1000; --cc-z-toast: 2000; /* ============================================================ * GRADIENTES — Backgrounds (do modelo Asterix) * ============================================================ */ /* Hero radial — topo da página, adaptado para amarelo Cocoricó */ --cc-gradient-hero-radial: radial-gradient(ellipse at top, rgba(255, 221, 0, 0.12) 0%, transparent 60% ); /* Grid de fundo */ --cc-gradient-grid-mask: radial-gradient(ellipse 60% 50% at 50% 0%, #000 70%, transparent 100%); /* Texto com gradiente */ --cc-gradient-text-hero: linear-gradient(to bottom, #FFFFFF 60%, rgba(255,255,255,0.60) 100%); --cc-gradient-text-accent: linear-gradient(to right, #FFDD00 0%, #00A8E3 100%); --cc-gradient-text-accent-warm: linear-gradient(to right, #FFDD00 0%, rgba(255,221,0,0.60) 100%); /* CTA blur spot */ --cc-gradient-cta-glow: radial-gradient(circle, rgba(255,221,0,0.10) 0%, transparent 70%); /* Imagem overlay */ --cc-gradient-img-overlay: linear-gradient(to top, rgba(0,0,0,0.90) 0%, transparent 60%); }