/* Tokens oficiais — Octopus Gamers Design System */ /* ============================================================ OCTOPUS GAMERS — COLOR TOKENS (identidade 2026-10) Paleta oficial: Laranja Octopus #EB4D1D · Azul Octopus #4AB8F5 · Roxo Octopus #8239EE · Grafite Abissal #070D18 · Azul-Marinho Profundo #071B3D · Branco Metálico #F4F6F8 ============================================================ */ :root { /* ---- Brand core (official palette — never change these six) ---- */ --brand-orange: #EB4D1D; /* Laranja Octopus */ --brand-blue: #4AB8F5; /* Azul Octopus */ --brand-purple: #8239EE; /* Roxo Octopus */ --brand-graphite: #070D18; /* Grafite Abissal */ --brand-navy: #071B3D; /* Azul-Marinho Profundo */ --brand-white: #F4F6F8; /* Branco Metálico */ /* ---- Orange (primary — energy, action, CTAs) ---- */ --orange-200: #FFD2C2; --orange-300: #FFA68A; --orange-400: #F4703F; --orange-500: #EB4D1D; /* Laranja Octopus */ --orange-600: #C93D12; --orange-700: #A2300D; --orange-800: #7A240A; /* ---- Blue (secondary — tech, focus, information) ---- */ --blue-200: #C4E8FC; --blue-300: #8DD2F9; --blue-400: #6CC6F7; --blue-500: #4AB8F5; /* Azul Octopus */ --blue-600: #2196DB; --blue-700: #1474AD; --blue-800: #0E5580; /* ---- Purple (tertiary — creativity, game dev, categories) ---- */ --purple-200: #DCC8FB; --purple-300: #BC98F6; --purple-400: #9D62F2; --purple-500: #8239EE; /* Roxo Octopus */ --purple-600: #6B25D6; --purple-700: #551CAD; --purple-800: #3F1482; /* ---- Navy (deep brand panels) ---- */ --navy-900: #071B3D; /* Azul-Marinho Profundo */ --navy-800: #0C2652; --navy-700: #123268; /* ---- Ink (graphite canvas & surfaces, navy-tinted) ---- */ --ink-950: #04080F; /* deepest void */ --ink-900: #070D18; /* Grafite Abissal — brand canvas */ --ink-850: #0B1322; --ink-800: #0F1A2C; --ink-700: #152338; --ink-600: #1E2E47; --ink-500: #2C3D58; --ink-400: #46566F; /* ---- Metallic neutrals (Branco Metálico → steel greys) ---- */ --white: #FFFFFF; --mist-50: #F4F6F8; /* Branco Metálico */ --mist-100: #E3E7EC; --mist-200: #C9D0DA; --mist-300: #A3ADBD; --mist-400: #7D889B; --mist-500: #5E697C; /* ---- Status (danger pushed toward pink so it never reads as brand orange) ---- */ --green-500: #36D399; --amber-500: #F5B73D; --red-500: #FF6B8A; /* ============================================================ SEMANTIC ALIASES — design against these ============================================================ */ /* Backgrounds & surfaces */ --bg-deep: var(--ink-950); --bg-base: var(--ink-900); --bg-brand: var(--navy-900); --surface-1: var(--ink-850); --surface-2: var(--ink-800); --surface-3: var(--ink-700); --surface-hover: var(--ink-600); /* Text */ --text-primary: var(--mist-50); --text-secondary: var(--mist-300); --text-muted: var(--mist-400); --text-on-accent: var(--white); /* on orange: 3.7:1 — bold/large text only, see README */ --text-on-accent-2: var(--ink-900); /* on blue: 8.8:1 */ --text-on-accent-3: var(--white); /* on purple: 5.6:1 */ --text-disabled: var(--ink-400); /* Brand accents */ --accent: var(--orange-500); --accent-hover: var(--orange-400); --accent-press: var(--orange-600); --accent-soft: color-mix(in oklch, var(--orange-500) 16%, transparent); --accent-2: var(--blue-500); --accent-2-hover: var(--blue-400); --accent-2-soft: color-mix(in oklch, var(--blue-500) 16%, transparent); --accent-3: var(--purple-500); --accent-3-hover: var(--purple-400); --accent-3-soft: color-mix(in oklch, var(--purple-500) 18%, transparent); /* Borders & dividers */ --border-subtle: color-mix(in oklch, var(--mist-50) 8%, transparent); --border-default: color-mix(in oklch, var(--mist-50) 14%, transparent); --border-strong: color-mix(in oklch, var(--mist-50) 24%, transparent); --border-accent: color-mix(in oklch, var(--orange-500) 60%, transparent); /* Status semantic */ --success: var(--green-500); --warning: var(--amber-500); --danger: var(--red-500); --info: var(--blue-500); /* Focus */ --focus: var(--blue-400); --ring: color-mix(in oklch, var(--blue-400) 55%, transparent); /* ---- Signature gradients ---- */ --grad-octopus: linear-gradient(115deg, var(--orange-500) 0%, var(--blue-500) 55%, var(--purple-500) 100%); /* the logo ring: orange → blue → purple */ --grad-orange: linear-gradient(135deg, var(--orange-400) 0%, var(--orange-700) 100%); --grad-purple: linear-gradient(135deg, var(--purple-400) 0%, var(--purple-700) 100%); --grad-abyss: radial-gradient(120% 120% at 50% -10%, var(--navy-800) 0%, var(--navy-900) 30%, var(--ink-900) 65%, var(--ink-950) 100%); --grad-text: linear-gradient(100deg, var(--blue-400) 0%, var(--blue-500) 45%, var(--purple-400) 100%); /* the GAMERS wordmark */ /* ---- Legacy names (pre-2026-10 palette) — kept so older pages keep working ---- */ --violet-200: var(--purple-200); --violet-300: var(--purple-300); --violet-400: var(--purple-400); --violet-500: var(--purple-500); --violet-600: var(--purple-500); --violet-700: var(--purple-700); --violet-800: var(--purple-800); --cyan-200: var(--blue-200); --cyan-300: var(--blue-300); --cyan-400: var(--blue-400); --cyan-500: var(--blue-500); --cyan-600: var(--blue-600); --cyan-700: var(--blue-700); --grad-violet: var(--grad-purple); } /* ============================================================ OCTOPUS GAMERS — TYPOGRAPHY TOKENS ============================================================ */ :root { /* ---- Families ---- */ --font-display: 'Chakra Petch', 'Saira Condensed', system-ui, sans-serif; --font-body: 'Sora', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* ---- Type scale (1.250 major-third on a 16px base) ---- */ --text-2xs: 0.6875rem; /* 11px — micro labels */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.375rem; /* 22px */ --text-xl: 1.75rem; /* 28px */ --text-2xl: 2.25rem; /* 36px */ --text-3xl: 3rem; /* 48px */ --text-4xl: 4rem; /* 64px */ --text-5xl: 5.25rem; /* 84px — hero */ /* ---- Weights ---- */ --fw-regular: 400; /* @kind other */ --fw-medium: 500; /* @kind other */ --fw-semibold: 600; /* @kind other */ --fw-bold: 700; /* @kind other */ --fw-extra: 800; /* @kind other */ /* ---- Line heights ---- */ --lh-tight: 1.05; /* @kind other */ --lh-snug: 1.2; /* @kind other */ --lh-normal: 1.5; /* @kind other */ --lh-relaxed: 1.65; /* @kind other */ /* ---- Letter spacing ---- */ --ls-tighter: -0.02em; /* @kind other */ --ls-tight: -0.01em; /* @kind other */ --ls-normal: 0; /* @kind other */ --ls-wide: 0.04em; /* @kind other */ --ls-wider: 0.12em; /* @kind other */ /* display eyebrows / kickers */ --ls-widest: 0.22em; /* @kind other */ /* all-caps micro labels */ /* ---- Semantic roles ---- */ --type-hero-size: var(--text-5xl); --type-display-size: var(--text-3xl); --type-h1-size: var(--text-2xl); --type-h2-size: var(--text-xl); --type-h3-size: var(--text-lg); --type-body-size: var(--text-base); --type-small-size: var(--text-sm); --type-kicker-size: var(--text-xs); } /* ============================================================ OCTOPUS GAMERS — SPACING & LAYOUT TOKENS 4px base unit. ============================================================ */ :root { --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 2.5rem; /* 40 */ --space-8: 3rem; /* 48 */ --space-9: 4rem; /* 64 */ --space-10: 5rem; /* 80 */ --space-12: 7rem; /* 112 */ /* ---- Layout ---- */ --container-max: 1200px; --container-wide: 1440px; --gutter: var(--space-5); --section-y: var(--space-10); } /* ============================================================ OCTOPUS GAMERS — RADII, SHADOWS, GLOWS, MOTION ============================================================ */ :root { /* ---- Corner radii ---- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* ---- Elevation shadows (tuned for dark UI) ---- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.5); --shadow-md: 0 6px 18px rgba(0,0,0,0.55); --shadow-lg: 0 18px 48px rgba(0,0,0,0.6); --shadow-xl: 0 32px 80px rgba(0,0,0,0.65); /* ---- Signature neon glows (one per brand color) ---- */ --glow-orange: 0 0 0 1px color-mix(in oklch, var(--orange-500) 55%, transparent), 0 8px 32px color-mix(in oklch, var(--orange-500) 42%, transparent); --glow-blue: 0 0 0 1px color-mix(in oklch, var(--blue-500) 50%, transparent), 0 8px 32px color-mix(in oklch, var(--blue-500) 40%, transparent); --glow-purple: 0 0 0 1px color-mix(in oklch, var(--purple-500) 50%, transparent), 0 8px 32px color-mix(in oklch, var(--purple-500) 45%, transparent); --glow-accent: var(--glow-orange); --glow-soft: 0 4px 24px color-mix(in oklch, var(--orange-500) 22%, transparent); /* legacy names */ --glow-violet: var(--glow-purple); --glow-cyan: var(--glow-blue); /* ---- Inner highlight (glassy top edge on dark cards) ---- */ --inset-top: inset 0 1px 0 rgba(244,246,248,0.06); /* ---- Motion ---- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 200ms; /* @kind other */ --dur-slow: 360ms; /* @kind other */ /* ---- Blur (glass surfaces) ---- */ --blur-sm: 8px; /* @kind other */ --blur-md: 16px; /* @kind other */ --blur-lg: 28px; /* @kind other */ }